After working on my React project, I run npm start but my google chrome browser does not start automatically.
I manually write "http://localhost:3000" are there any solutions???
Wrong URL
localhost://3000 is wrong, it should be http://localhost:3000
Auto launch
If you're trying to get Create React App to open the dev page automatically, you may need to set your browser explicitly. Look at the environment variable called BROWSER in the Create React App config. It will look like this BROWSER=chrome, and you can put this in the .env file at the root of your directory. chrome might not be the right value, check documentation.
If the browser doesn't automatically launch, there may be an issue with your OS
concerning the execution of an application developed with react js if I type npm start; the execution does not start automatically; the terminal shows me the url that I must type and I write it manually in my browser. and I notice that a similar problem occurs when I type herroku login if I want to deploy a project. I think there is a problem with my browser
Related
I am working on a project that includes react as frontend technology. Python Django is used for backend and both of them dockerized by a docker-compose file and Dockerfiles. When I try to edit and save index.html or App.js file, nothing happened. Docker container terminal and browser stayed still, despite app's files are mounted correctly in docker-compose file.
When I look up for the solution to this case on SO and other websites, all of the suggestions were made towards to environment variables like CHOKIDAR_USEPOLLING, WATCPACK_POLLING and FAST_REFRESH.
In those websites, WATCHPACK_POLLING was suggested to use instead of CHOKIDAR_USEPOLLING due to using react-scripts version 5.0.1 in my project. So I set WATCHPACK_POLLING=true in environment variable and tried again.
This time webpack compiles with this message in terminal:
frontend-app-1 | Compiling...
frontend-app-1 | Compiled successfully!
frontend-app-1 | webpack compiled successfully
But after compiling successfully nothing happens, browser still does not refresh. I've tried to set FAST_REFRESH=false to enable hot reloading but nothing changed.
I've mixed up old and new solutions and using CHOKIDAR_USEPOLLING and WATCHPACK_POLLING at the same time. This time after editing and saving compiling has done again and browser refreshes but with a slight issue. Browser refresh process cant catch up the compiling and these two process are being done unsynchronized.
So when I change the website title from "React App" to "React" and save it, compilation starts and broser refreshes. Browser still displays "React App" title. After that when I edit index file again to change title from "React" to "Test", refreshed browser diplays title "React". Refreshment is following at least one step behind like this.
Essentially my problem is after edit and save in a dockerized react app, webpack compiles successfully but browser does not refresh.
How can I solve this problem?
Edit: I've tried FAST_REFRESH with these two variables and nothing changed.
Are you editing source code on host machine? If yes then do you have a bind mount of the source code folder or file to the container?
Please try different node versions. I had the same issue recently and got it resolved after taking an image with different node version.
If previous options don't work then you can setup directory synchronization between host and container. See how to rsync from a host computer to docker container using docker cp for details.
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
I made an electron app with react, but I don't know how to make its MSI file for windows.
actually, I know what the problem is, it is because Reac app needs to run on localhost:3000 and after that electron can launch it through mainWindow.loadURL, but the MSI file doesn't work like this, and it doesn't launch it, please help me how to solve this problem
note: in development, it works fine because I first run the react app and then the electron app which causes it can load URL from localhost:3000 but when I make its MSI file through the electron packager then it doesn't work
You want to use electron-builder to make an .msi file. The necessary command to build a windows app (once you've gotten your electron app set up) is electron-builder --windows.
If you want to use a template with all of this already set up, you can use secure-electron-template. Disclaimer: I am the author of this template.
I'm trying to create a react chrome browser extension using create-react-app. The browser_action popup is pointed to the index.html generated by the react app. The app is ejected from create-react-app and the writeToDisk is enabled in the webpack config as well. Initial build and rebuilding on changes are working fine on npm run start.
If I make a change in the react code, then close and reopen the browser action popup, the changes are applied. But hot-reloading doesn't work as expected. My expectation was that if I kept the browser action window open, and then make a change in the code, the dev build would be rebuilt and the hot reloading would apply live patches on the open browser action popup. But no hot-reloading is happening. Moreover, I get the below error message on the chrome extensions page whenever the browser action window is opened:
It seems like the websocket connection required for hot reloading the popup has a problem establishing the connection. Has anyone come across something like this ? All inputs are welcome.. And thanks in advance.
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.