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.
Related
I connected my react app that I made with create-react-app to django by passing it in as a template. I followed the steps shown here: https://studygyaan.com/django/django-react-setup-best-project-structure.
This works but if I want to try out a full backend server by running manage.py runserver, I have to do npm run build on the frontend app all the time. Is there a way to get it so that I could maybe connect the development components to django instead of the build components? Running the build command always takes a bit of time.
recently i moved to react and i am quite familiar with it , now i started using react with backend django, after i set up it was all working but ,every time i change code and i want to see it , i need to npm run build , although this works but on real world projects where maybe 100s of js file , run build is gonna take hours to build , and i cant wait that long to do changes and it is very impractical.like python manage.py runserver makes instant easy updation , can you give me solution for this...
You can just run the front end with npm start or yarn start depending on your preference from the front-end directory and do live updates that way. Then you can save the actual build for when you've completed the front end. You don't even have to worry about running the django runserver command unless you have data on the backend you're collecting. In that case just run both until you want to build the final product.
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!
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?
So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.