create-react-app seems to start localhost server at npm start.
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
https://facebook.github.io/create-react-app/docs/getting-started
Why do I need to bring up a server just to run JavaScript?
What are the differences, advantages, and disadvantages of opening the build result file directly in the browser?
Also, is this true for other frameworks regardless of create-react-app?
I read React's repository etc on this issue, but there was no topic on this issue.
One of the main advantages to create-react-app starting a localhost server is hot reloading.
When you write most modern JavaScript, including React, your code needs to be transpiled (essentially converted to a different version of JS) before the browser can understand it. This is called the build process, which takes all the files in the src directory and bundles them into a single static JS file.
You could do this manually with npm run build, which creates an index.html that you can open in a browser without running a server. But you have to go through 2 part process to see your changes: rebuild and then reload the browser to see your changes.
create-react-app is built so that it watches for changes in your files, updates the built JS whenever you hit save, and then restarts the server, loading your changes automatically.
By running a server on localhost, create-react-app can update your page instantly every time you save, without you manually rebuilding OR refreshing the page. Hot reloading!
Related
I have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose
I have a Visual Studio project with a simple React ClientApp that I'm using for testing. The client app was working well until suddenly it wasn't. (It may have broken when I added a static wwwroot folder to the project, but that has since been removed--I was testing with a different React App at the time so I wasn't paying much attention to whether my admin utility app was still working.)
Now for the life of me I can't get webpack-dev-server to serve the React app. I've tried:
/invalidate,
npm build
Changing the ports the server is running on
Hitting it from a different browsers.
npm cache clean --force
Reverting back to a much earlier version of the project when this front end was definitely working
Strangely enough if I run npm start directly in the ClientApp folder the app runs fine. For workflow reasons, and for reasons of just wanting to understand how this works, I'd like to keep using the VS launched version.
The symptom is that it simply displays the Index.html page and does not load the app. In Chrome it keeps failing to load 0.chunk.js with error ERR_HTTP2_PROTOCOL_ERROR. In Firefox this there are no errors loading this file, but only the index.html file displays.
I can navigate to /webpack-dev-server and everything looks good. I can click through to all of the individual files from there.
Any ideas for how to diagnose this would be fantastic!
FWIW - if anyone runs into this issue, the solution was to simply update Microsoft.AspNetCore.SpaServices.Extensions to the latest version (in this case 5.0+).
I want to run react from the HTML page so that it is displayed on the browser. Till now I was using node to run it but now I want that when I open my HTML file in the browser my react app should run there.
A production build might be what you need. Try executing npm run build (or yarn build, if you're using Yarn).
This creates a production build of your app in the build folder, which contains index.html along with other static files. Running index.html should run the app in your browser.
A production build is meant to be served to the end user, so remember that you won't be getting any nice crash messages or stack traces that you get from running it on Node. Neither would development-related niceties like hot-reloading work. If you're still working on your project actively, keep using Node.
By the way, if you just need to make any changes to the HTML file of your React app (like changing the title or adding an external script), you can do that in public/index.html too - you don't need to create a production build for that.
I am developing a React JS app on a remote server which uses Apache.
In the past I have built a React JS app manually with webpack/babel etc. and then used "npm run dev" to run the app.
With this method I could see any errors on the fly in the terminal and test in the browser automatically through the web browser.
I am now creating a new site with create-react-app which takes care of a lot of the tedious setup for you. One thing I cannot figure out is how to use something similar to "npm run dev". My two options seem to be:
npm run build - This takes a while and I have to rerun it every time I change my code. It does put the updated code in the /build directory which I can link to from my Apache server and see in my browser.
npm start - I can see any errors right away in the terminal, but I cannot see it in my browser because it runs on localhost and does not get compiled to the build directory.
What can I do so that I get the best of both worlds? Having quick rebuilds / error reporting and being able to see remotely through my Apache server?
Or would it be better just to go back to my old manual way of doing things?
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.