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.
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",
My Situation:
I'm hosting an app created with create-react-app on Surge. In order to have Surge let react-router handle the routes, I have to add a 200.html to the root, and in order to handle 404s, I have to add a 404.html to the root. The problem is, with npm run build, only index.html and favicon.ico are added to the root of the build directory.
Possible Solution:
I can copy other files by making the build script in package.json react-scripts build && cp 200.html 404.html build.
Question:
Is there a better way to have react-scripts add extra files to the root of the build, rather than relying on bash scripting in package.json?
The answer I settled on was to use bash scripts in my package.json as I originally suspected, but I decided to do the file operations in a deploy script instead of the build script, and rename index.html to 200.html instead of copying extra files, as suggested by the create-react-app docs;
"build": "react-scripts build",
"deploy": "npm run build && mv build/index.html build/200.html && surge build mydomain.com"
I think doing the file operation in the deploy script, instead of the build script, is the right solution because that change is unique to the deployment environment, meaning, if I was deploying somewhere other than surge, I might not want to rename the index file.
Still open to other solutions if anyone has a better suggestion.