I am new to react.js and trying to convert my websites content into react components as a way to learn it with friends. I am using npx create-react-app and want to put the app online with Google Firebase. The deploying was successful - but I could not see the localhost page with the components I am seeing when I run npm start. Instead there is an empty page.
I followed some online guides and run npm run build.
Than, I tried to add "homepage:" to package.json and set it as "mydomain.com" or ".".
I have also changed my Firebase public directory to the build folder (instead of public).
Nothing yet worked. does anyone has an idea why?
Thanks to goto1 I looked again in react documentations and found out about issue #2440. Adding:
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
in firebase.json solved it for me.
See more at: https://create-react-app.dev/docs/deployment/#firebase
Related
I have a SvelteKit app with package.json showing "#sveltejs/kit": "^1.0.0" and it uses netlify functions to interface with mongodb and everything works fine.
I then installed, in another folder, npm create svelte#latest app and it shows "#sveltejs/kit": "^1.5.0". Everything else the same. Copied over src/static/netlify folders, installed Netlify adapter, set up netlify.toml file, .env file. Installed same version dependencies.
Under 1.5, I get several weird problems like it wont update a record or it has an issue with a {#each loop or duplicate keys. Not just one issue. Several. I change package.json entry to "#sveltejs/kit": "^1.0.0" and npm i and all the problems disappear so its definitely 1.5. I updated Node. No difference. I updated axios and mongodb and same issue.
Is there any way to find out what changes took place from 1.0 to 1.5 to try to figure this out? I would like to use the latest SvelteKit version but can't with these errors.
Bug description
I am working with a library called react-carousel from brainhubeu in NextJS. Even when I am using dynamic import with ssr:false, The build UI looks strange but the dev UI is perfectly fine.
dev UI -
I have recreated it in Codesandbox too (this one is for dev environment is running npm run dev)-
https://codesandbox.io/embed/suspicious-volhard-460q8?fontsize=14&hidenavigation=1&theme=dark
However when I build it and then run the build by using npm run build && npm run start -
To recreate this in codesandbox -
In bottom right click on + sign for a new terminal
npm run build
npm run start (I have already added "start": "next start -p 8080" in the package.json file so a new tab will be created for the sandbox and can be accessed as https://460q8-8080.sse.codesandbox.io/ where 8080 signifies the port number )
Expected behavior
UI should be same as when seen with npm run dev.
Question
Why does my dev UI works fine but when I build and serve, the UI is strange. What exactly is the difference between npm run dev and npm run build && npm run start in context of NextJS?
Any solution to this problem?
My attempts
I have been trying to work on this problem and have asked this question on official Github discussions on NextJS. Couldnt find any answer.
I even created a Github Bug issue on react-carousel's Github, they couldn't help much.
Thanks for helping out.
I was able to resolve this issue. In my case, it was due to the difference between how I had set up (dev) and next build && next start. Take note of a few things to get it sorted -
If you have used an external library, chances are it doesn't support server-side rendering. I was using react-carousel from Brainhubeu and it having some issues. Resolve it by importing the library via next/dynamic imports with ssr:false option.
Another issue was that I was using/following an outdated boilerplate code for Tailwind and NextJS. Hence the way postcss.config.js was configured was error-prone. Here is the crux of the problem. at least for me - During the dev, everything worked fine because postcss didn't purge any of the classes of third party plugins/libraries that I imported, however, they were being purged when I did npm run build and npm run start
Now let's quickly see how you can solve this issue on your part -
Use the inbuilt purge option provided by TailwindCSS. For this, use the official starter-code/boilerplate code from the NextJS team. As they mention there - To control the generated stylesheet's filesize, this example uses Tailwind CSS' purge option to remove unused CSS.
Or you could try patching the problem if you don't want to go the previous way. I would only suggest this method if you are almost done with the project and just want to get this working because this is in no way a good solution. You will have to whitelist a bunch of css files from being purged. This is what I did but you can probably whitelist a lost more CSS classes as well -
// postcss.config.js
const purgecss = [
"#fullhuman/postcss-purgecss",
{
content: [
"./node_modules/#brainhubeu/react-carousel/lib/style.css",
"./node_modules/#brainhubeu/react-carousel/lib/style.css.map",
"./node_modules/react-toastify/dist/*.css",
"./components/**/*.js",
"./pages/**/*.js",
],
defaultExtractor: (content) => {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
return broadMatches.concat(innerMatches);
},
},
];
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
...(process.env.NODE_ENV === "production" ? [purgecss] : []),
],
};
Still I would suggest go the first way and copy your code from old repo to new, use SSR:false to use client-side libraries that hate SSR, and you should be good to go.
You can reach out to my Twitter #toughyear if you need help with this.
I am trying to deploy my react app onto to gh pages but it just shows up as a blank screen. I have tried everything, and nothing seems to work. I followed this video: https://www.youtube.com/watch?v=4NapRkCazks and everything seems to run fine except there is a blank page when I type in the url. Here is my repo: https://github.com/nupurd89/onlineshopping.git
I am super lost and nothing seems to work. Thanks for your help in advance!
The main problem in my case that I am deploying a static create react app [App-filter-review] system and my screen show blank screen too.
#Fix No 1
The first issue is the incorrect url config, for the homepage,as it is given everywhere to correct it
#Fix No 2
If you are using React-router>v4.0 in the React app the include Basename acc to defined property
Basename add this basename={process.env.PUBLIC_URL} in Browser Router
This Article really helps out if you are using another stack too.
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
#Fix No 3
If you are deploying the system on Heroku or GH-pages try to correct Case sensitive issues while directing to JS/CSS file while configuring as these systems are using Linux container that is case sensitive
Link to My Github Page that is fixed by Fix no2 is here
https://amancode27.github.io/App-Review-Filter/
Make sure you have installed the right version of gh-pages (npm install gh-pages --save-dev).
Also, add the following properties to package.json file.
"homepage": "http://{your_username}.github.io/{your_repo-name}"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Run the following command :
npm run deploy.
Your GitHub repository > Settings > Pages
Under the Source tab, select the "gh-pages" branch.
Hopefully, that helps.
I was having a similar issue while using a custom domain I bought on namecheap, even after following the recommended set up (adding the A records/CNAME on namecheap, adding the deploy scripts in package.json, custom name on github, etc.)
The solution I found here https://github.com/gitname/react-gh-pages/issues/53 worked for me.
I had to remove my repo name from the end of my package.json homepage property, so it looks like this now:
"homepage": "https://gitname.github.io"
After redeploying and then refreshing my browser page / cache, and I'm not getting a blank page anymore. I was using create-react-app, namecheap for the custom domain, and gh pages for hosting.
I have an issue where I deploy my React app the images are not showing. Works fine locally. I've set the homepage to a GitHub site http://ryandixon555.github.io/react-board-game and run
npm build
then
npm deploy
but still no images. I've also specified the homepage in the package.json:
"homepage": "http://ryandixon555.github.io/react-board-game"
In the end I gave up and deployed using netlify, following this link and then copying my code over.
I've got a problem with deploying my react app with gh-pages. I tried all guides from YT and those from the first site of Google. And my GitHub pages don't show an app still. link to my repo:
https://github.com/maksymilianMroz/react-todo-app
the question is Where is the problem? I didnt write smth in the code? How can I fix this? (I want to live preview on my react app by ghpages)
When you open your project site https://maksymilianmroz.github.io/react-todo-app/ and do a full refresh with the developer tools of your browser enabled, you will see that all javascript and css references result in a 404. This is because all url all prefixed with maksymilianMroz.
eg https://maksymilianmroz.github.io/maksymilianMroz/react-todo-app/static/css/main.fbf7fb8c.chunk.css
where it should be https://maksymilianmroz.github.io/react-todo-app/static/css/main.fbf7fb8c.chunk.css
This is caused by the homepage property of your package.json file, as shown in the output of npm run build
If you adjust that property in the package.json your build will be fine.
{
"name": "react-todo-app",
"version": "0.1.0",
"private": true,
"homepage": "https://maksymilianMroz.github.io/react-todo-app",
...
}