I am deploying ant-admin dashboard in apache2 rather nginx.
How do I configure apache2 for antd-admin dashboard?
repo: https://github.com/zuiidea/antd-admin
npm run build
// Generated build files under /dist
copy paste in apache2 document root /Library/Web
cp -r /dist Library/WebServer/Documents/
trying to call
http://localhost/dist
Page is not loading
When I checked console. css, js files are serving from http://localhost/umi.css but expecting it should serve from http://localhost/dist/umi.css
How do I serve css, js and sub directory /dist in apache2?
use home page key in the package.json
"homepage": "./dist"
https://facebook.github.io/create-react-app/docs/deployment#step-1-add-homepage-to-packagejson
Related
I have a built using create-react-app and hosted in netlify.
In this link it is mentioned that I need to write redirect rules for SPAs.
/* /index.html 200
But redirecting to index.html is not working since no view is rendered with that URL.
I also tried redirecting to / like
[[redirects]]
from = "/*"
to = "/"
but this is also not working.
How do I do a catch-all redirect for create-react-app?
To catch all the redirects use /* /index.html 200 in _redirects file.
According to the netlify docs, the _redirects file should be in your root build directory.
create-react-app by default creates all build files under the folder named build
so just modify the build scripts in package.json to add the _redirects in the build folder after building the app.
example.
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
If you have multiple redirects to make things easier you can create a _redirects file with all the redirects in your root(/) folder of the CRA
then in the package.json will become
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
make sure that the build command in your netlify is yarn run build or npm run build
after making the changes in package.json simply rebuild your code.
UPDATED: much better way
IN CRA(Create React App), the build script copies every file in public directory to the build folder so just put the _redirects with the rules in the public directory without changing anything and you are good to go.
There are two (2) ways to create redirects when hosting on Netlify.
_redirects file in the root of the publish directory (/build in CRA)
[[redirects]] list in the netlify.toml config file at the root of the repository (project)
/public/_redirects (option 1)
Put the _redirects in the /public directory. CRA will copy all files in /public to the build directory when running the build command.
/public/_redirects
/* /index.html 200
/netlify.toml (option 2)
Put the netlify.toml in the root (/) directory of your project (repository) being deployed to Netlify. You can add the redirect lines to the end of the netlify.toml if it exists already.
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
Note: These options can be combined, but remember the _redirects will overwrite an entry with the same source (from) path in the netlify.toml.
You can also use the redirects playground to convert from one format to the other.
I followed this tutorial in order to deploy my nextjs app to shared hosting on cPanel.
Road map for deploying on cPanel Next App with server-side rendering (not only static) :
Build locally (next build)
Copy into html_folder all your project directory (not only the build folder, and except node_modules of course) :
public_html
my_project
.next
src
server.js
package.json
...
Note: A custom server is needed as cPanel needs a startup file (use the next's default one)
create your node application ("setup node.js app") with options :
Application root : public_html/my_project
Application startup file : server.js
...
"Run NPM install" to create node_modules packages
Finally "Start App"
package.json with the start command :
"scripts": {
"start": "cross-env NODE_ENV=production node server.js"
}
However, visiting my website after going through the entire process gives me this error:
All you really need to do is run next build && next export and put the contents of the out folder in the public_html folder or /var/www/html/, /sites-available/, etc, depending on setup.
Make sure to copy the .next folder, in the cpanel's folder, like this:
my_project --> folder in cpanel
_________
| .next | --> this folder
___________
src
server.js
package.json
...
If you can't see this folder in your project, enable the option to show hidden files.
I have a built using create-react-app and hosted in netlify.
In this link it is mentioned that I need to write redirect rules for SPAs.
/* /index.html 200
But redirecting to index.html is not working since no view is rendered with that URL.
I also tried redirecting to / like
[[redirects]]
from = "/*"
to = "/"
but this is also not working.
How do I do a catch-all redirect for create-react-app?
To catch all the redirects use /* /index.html 200 in _redirects file.
According to the netlify docs, the _redirects file should be in your root build directory.
create-react-app by default creates all build files under the folder named build
so just modify the build scripts in package.json to add the _redirects in the build folder after building the app.
example.
"scripts": {
....
"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects ",
...
}
If you have multiple redirects to make things easier you can create a _redirects file with all the redirects in your root(/) folder of the CRA
then in the package.json will become
"scripts": {
....
"build": "react-scripts build && cp _redirects build/_redirects",
...
}
make sure that the build command in your netlify is yarn run build or npm run build
after making the changes in package.json simply rebuild your code.
UPDATED: much better way
IN CRA(Create React App), the build script copies every file in public directory to the build folder so just put the _redirects with the rules in the public directory without changing anything and you are good to go.
There are two (2) ways to create redirects when hosting on Netlify.
_redirects file in the root of the publish directory (/build in CRA)
[[redirects]] list in the netlify.toml config file at the root of the repository (project)
/public/_redirects (option 1)
Put the _redirects in the /public directory. CRA will copy all files in /public to the build directory when running the build command.
/public/_redirects
/* /index.html 200
/netlify.toml (option 2)
Put the netlify.toml in the root (/) directory of your project (repository) being deployed to Netlify. You can add the redirect lines to the end of the netlify.toml if it exists already.
/netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false
Note: These options can be combined, but remember the _redirects will overwrite an entry with the same source (from) path in the netlify.toml.
You can also use the redirects playground to convert from one format to the other.
I have a reactjs application that I created using the create-react-app. I have installed gh-pages and successfully deployed it to github pages (project page) using the following command:
gh-pages -d build
However, when I add a custom domain to my github project repository my application could not load the js and css files. My browser is looking for the following files:
http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js
The correct link to load these files should be:
http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js
In the GitHub repo pages, I have set custom domain to be 'my.custom.domain' (root domain without www). The source is gh-pages branch.
My DNS settings are:
A record, #, value: 192.30.252.153
A record, #, value: 192.30.252.154
CNAME record, www, value: username.github.io
Any ideas how to change the settings so that repo name is not added to the domain?
Make sure your package.json have the attribute homepage. e.g.
"homepage": "https://<git-USER>.github.io/",
That's literally what I just did with my cra projet. If you want to take a look on my project just look at the develop branch. However, I haven't use gh-pages -d build. I just built the project myself and create the branch gh-pages and put the content of my build into it. It should be the same though.
Adding a copy CNAME script to my package.json scripts worked for me as it wasn't being published to gh-pages branch automatically in the React Create App build dir.
"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",
I'm using create-react-app.
The react application works well by npm start.
But...
I ran npm run build then index.html and main...js/main...css were create in build directory.
And moved this files into tomcat web application's home directory.
When I open the index.html in the browser, blank screen only shown.
What's the problem ?
(I added "homepage" : "." into package.json, so this isn't 404 problem)