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?
Related
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+).
My Django + React app is integrated fine at least for most parts. Because every time I have to make changes on my React code, in order to apply those changes I have to stop django from running then run npm run build everytime.
I've already read this is there any way to run React + Django in same project without running npm run build again and again? and tried to apply it to my problem but it didn't work.
Still new in React but with a few experiences with Django. Would appreciate your help
When developing with Django and react I have often found it easier to import libraries (the minified versions usually) through script tags in the html that is served to the front end, this entirely circumvents the need to have npm in use entirely. If you do switch to this method, simply make sure that debug is set to true and you will be able to start the server by running 'python manage.py runserver' and you'll be able to access everything on the Django port that you are using.
I'm new to yarn, nodejs and react apps. I've tried running the Sizzy app and it works on my local XAMPP server if I first run yarn start in the cmd terminal and then access via http://localhost:3033, but after a while I have to rerun the same command. I've tried yarn build and then navigating to the build directory but that just loaded a page with a header, it didn't have the same functionality. And the contents of the build directory looks very similar to the contents of the public directory anyway.
I've had a look at this SO post and this one but still unsure why I need to run yarn start everytime.
UPDATE:
I'm still not sure how node, react, and electron fit together and why each is required, much research and learning still to do! Rather than a 'react app' I believe I'm looking at an 'Electron app'. I think if I run the command npm run package-win then I think I should get an exe file and some dlls. But how to instead setup for running on an Apache web server without having to start using the command line, or would you just have to build it with different architecture?
Starting to get a vague understanding from reading this.
If you used the npx create-react-app <app-name> then you just have to change the "start" script in the package.json file as "serve -s build". Run yarn add serve to add For deployment, Heroku is a good choice. Create a Heroku app and connect your git repo to the newly created app. Then go to the deploy tab and deploy your branch.
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!
So, I have spent a couples of months learning react and have now created a react app that works nicely on my local computer using the web address localhost:3000. But now is the big question: how do I deploy the app so it becomes accessible on the internet for everybody to see. Previously I have place on a web hotel where I can host some php files. But how do I put the react app on that web hotel. Or do I need some other service that a normal web hotel cannot handle.
Thanks for any help
/Simon :-)
There's a few great options for pushing out your first React application. Once it's built and hosted on GitHub, there's a few free options for deploying static websites (as long as your app meets this requirement). I suggest checking out GitHub Pages (https://pages.github.com/) or Netlify (https://www.netlify.com/); they offer you the tools to deploy right from your repository.
The short answer is simply run npm run build or yarn build command then the scripts try to create a js file and a CSS file and a HTML file and all your files can access from build folder. so just copy build folder and everything in it to server for example upload it to Heroku or AWS
First you should create build. Use 'npm run build' or if you are using yarn then use 'yarn build' command.
After that you will see build folder in your app having html file static folder.
You can test with any local server in your machine. You can use following chrome extension to deploy your app locally. Just import your build folder inside this extension.
Web server for chrome
Thank you Keith!
I used "Github pages" to deploy my React app and it was surprisingly simple. I found a great short 5 minute tutorial on Youtube: "https://www.youtube.com/watch?v=1Y-PqBH-htk". This is how I did it:
Added this line to my package.json file, at the top level:
"homepage": "https://zimon42.github.io/helloworld"
(zimon42 is your username on Github. helloworld is the name of your repository)
Installed the so called Github pages module by running:
npm install --save gh-pages
Added these two lines to my package.json file, under scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Committed and pushed everything to Git (Dont know if this step is necessary)
Deploying the application by running
npm run deploy
Now simply check out the paeg at https://zimon42.github.io/helloworld.
( For me there was a delay before the changed took effect.)
Also my routes didn't work. Got a empty page. But saw this video: https://www.youtube.com/watch?v=7yA7BGos2KQ&t=114s which described using HashRoutes instead, and then it worked!
/Simon :-)