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.
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.
Next.js builds all the static assets in _next folder but Github pages does not need to serve those files. I am 404 for static assets.
Example repo: https://github.com/ajaymathur/ajaymathur.github.io
Master branch is hosted and dev branch is for development.
And I guess github pages is not hosting paths starting with -. How can I get around this issue?
Add a .nojekyll file in the folder that contains the _next folder.
This disables Jekyll processing and lets the _next folder (which contains an underscore) get copied to the final website.
My _next folder is in the root of my repository, so I added a .nojekyll file to the root.
Simply adding a .nojekyll file wasn't enough for me. I had to change the build command to add the file after the export to static HTML/CSS/JS like this
"scripts": {
...
"static": "next build && next export && touch ./out/.nojekyll && echo 'www.mywebsite.com' > ./out/CNAME",
...
},
I am also using gh-pages to copy the files from the out folder to the branch Github Pages will serve, by default the .nojekyll file was not copied over. This can be circumvented by setting the -t option to true
"scripts": {
...
"deploy": "gh-pages -d out -t true"
...
},
After these changes, npm run static && npm run deploy should do what you're looking for.
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 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
I have a site generated with yeoman's generator-angular and I'd like to publish this site using github pages. I create the gh-pages branch but my repo does not show up in myusername.github.io/myreponame I think the reason is because index.html is in the app/ directory not the root.
app/
|-- index.html
|-- scripts/
dist/
Gruntfile.js
etc..
Can I tell github pages to load index.html from the app folder? How can I launch a site generated w/ angular-generator to gh pages?
Running grunt build is important as without it dist directory is not created. Also changes will appear on gh-pages only after they are added and pushed to the subtree.
Remove dist from .gitignore file
Run grunt build in console
After the project is built the dist directory needs to be added to the GitHub. Run this command in console: git add dist && git commit -m "Initial dist subtree commit"
And then push the subtree to the gh-pages branch: git subtree push --prefix dist origin gh-pages
All of your answers can be found here!
In a nutshell, you will generate the deployment-ready version of your site. You do this by running grunt. That will generate the optimized, production site in a folder called dist. You will then push the contents of dist directly to gh-pages.
A frequent contributor to Yeoman also made this task: grunt-build-control, which will let you simply run something like grunt deploy.