I'm using React version 17.0.1 on windows and I've noticed that the create-react-app hot reload doesn't work. I found some tips online (Development server of create-react-app does not auto refresh for example ) and tried every one of them (my path doesn't include parentheses, it isn't synced to google drive or dropbox, I've tried the watcher refresh and reinstalling the node modules). Nothing worked until I realized that the problem occurs only with the index.js file. If I save any other file (html or components) the browser does reload automatically. I've read that this might be a bug with the newer version of React that was released just days before I started studying this subject.
One thing I should mention is that my npm start script (that was automatically generated) is different than the ones I saw on the other threads (Auto reload react server on update for example), It doesn't says "Webpack" at all and I thought it maybe have something to do with my problem.
From the package.json file:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Is there any way around this bug? Is this problem familiar?
Related
In the React file structure under components there is index.js file that runs the main character when running the project. Is there anyway to rename this file to any name I want? I am using PM2 server manager and there is no way for me to keep track which server is which when running multiple index.js files. So the only option I got is to rename this index.js to something specific to each project.
I have tried changing the package.json file's start script as below but nothing worked out only gave errors.
"scripts": {
"start": "test.js react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Appreciate all your help!
You can't change the name of the file used by create-react-path.
You'll have to either eject to use custom webpack config by running
npm run eject
But it's a one-way operation (see documentation)
Or you can use Vite instead of create-react-app to bundle your project.
Vite is more configurable than create-react-app, you define in the index.html the name of your js file. So you can put any name you want.
Maybe even this example could help you:
https://vitejs.dev/guide/ssr.html#example-projects
I have the following issue
React app that is served to firebase hosting is caching double the size of the build folder for non apparent reason,
my current network tab looks like this
as you can see the resources are 2.5 and i have no idea what resources in this case are referring to ?
my cache tab looks like this
why is the cache is getting up to this size my finale build folder size is 3.4mb (not zipped by any means),
I tried to fix the issue of my build file being big by using
compress-create-react-app
to make the build folder smaller, and then serve that file to firebase hosting but it didn't help , firebase didn't read the zipped files for some reason, however as one question suggested the firebase actually compress your hosted files, but this is not true sine I was able to get my .js main chunk and it has the same size and the one in my non compressed default folder , what do you think is the gist here ?, it seems like my build is getting cached twice for some reason.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && compress-cra",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm learning ReactJS for a few weeks but I'm facing an issue that's impossible to solve by myself.
I use create-react-app command to start react project but it is totally impossible to use npm test after that. Even if I don't touch anything in the project, when I try to run npm test I only get "No tests found, exiting with code 0".... When I just create the project there is src/App.test.js but the command found nothing..... :(
Someone I sent the folder succeeded to run the tests.... is it possible that the problem comes from my computer/environment (Windows 10) ?
Thanks for help.
Have a good day
Add this line to your "package.json"
open package.json
find scripts in that "test" : "react scripts test" replace this with
"test": "react-scripts test --watchAll --testMatch **/src/**/*.test.js"
Now run npm test.
It works!
Got it!
I found this posts https://github.com/facebook/create-react-app/issues/7660
wich explain that npm test don't work with hidden directories (.xxx).
My projet is under C:\Users\kendr\.babun\cygwin\home\Kendrak\react\myprojet
The problem is the .babun !
I move my project in another dir and the test command now works fine!
If you are CRA(Create React App) user who is seeking proper answer, try this out in package.json.
`
{
"name": "Your App",
"jest": {
"testMatch": [
"<rootDir>/src/**/*.test.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
]
},
"version": "0.1.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"eject": "react-scripts eject"
}
}
`
CRA manages jest in package.json. So if you use jest.configure.js in parent route you will get error about route something.
If you want another custom configuration give a changetestMatch.
As answered by #Kenkradstef, there can be issues with the path your project is in.
Had the same problem, with "[" "]" in my path. Full path was something like "C:\Users\xxx\[P]rojects\xxx\".
I moved the project to a different location and it worked.
Can't add a comment because I have no reputation, that's why I am posting this as an answer.
I looked around the internet for this and found this medium article using serve. The article directed modifying the packange.json file to this:
"scripts": {
"dev": "react-scripts
"start", "start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
Now this works in development. I get console logs saying Content is cached for offline use. And google Lighthouse gives me >90% on progessive web apps. The problem is, when I deploy to Heroku, during build it runs the npm run build specified in the package.json scripts. But on opening the app, I get 21% on performance, and 50% on progressive web apps in firehouse. Also, it says service worker not registered. Which means it is not serving from the build folder. As an extra, I ran npm build myself in development machine and deployed the project TOGETHER with the build folder, but still same result. Now I also came around this other articlesuggesting to use node.js server and change scripts in package.json to this:
start: "node server.js"
I no nothing about node.js, so I decided to consult here for better choices.
EDIT: If a server command is needed, like in the node.js in the second medium article, and in Garesh's php code below - if anyone could help with a similar code in python(django), it'd be nice
Found the answer to this in this comment online:
Before deploying the app go to:
Heroku dashboard > settings > buildpacks > add buildpacks and then add github.com/mars/create-react-app-b...
Or, in command line you can do
heroku buildpacks:set github.com/mars/create-react-app-b...
If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.
Build you code with:
npm run build
Now Put this code in the index.php file:
<?php header( 'Location: /index.html' ) ; ?>
Now put this index.php file into your build folder.
Copy this build folder somewhere else.
Now configure your new folder with your heroku app.
then
git push heroku master
I've created an React app with create-react-app and I want to deploy it to Back4App.
The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).
So far, I haven't found any way to config deploy to use anything other than the public folder.
Any solution / workaround to this?
If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.
Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.
Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.
This is a live demo of a create-react-app deployed in Back4App.