Django and React - npm run watch/build very slow - reactjs

I'm trying to make a django/drf and react project but it takes 15+ seconds for npm run build to finish. What are my options here? It's not feasible to wait that long after every change I make to the front end. Should I keep the react and django parts separate till the end?
I followed these instructions since I'm new to npm:
https://medium.com/how-to-react/use-npm-watch-to-auto-build-your-reactjs-app-6ed0e5d6cb00

If you need a development setup with React & Django, you can :
do npm run start to open your create-react-app project in development
add "proxy": "localhost:8000" in your package.json so that AJAX requests from React are forwarded to Django
make sure Django is running on port 8000 with ./manage.py runserver
The npm run build is only needed to deploy usually.

Related

installed some dependencies, but now npm start doesn't work

I have a react app that I created with npx create-react-app. I have been workin on this app for a few weeks and decided to try to add a backend. I installed mongoose, express, and nodemon, and I can see them in my dependencies, but now when I use npm start, it opens up my browser and sends me to localhost:3000 but the app doesn't load. just an error saying this site cant be reached, local host refused to connect. Can anyone help me figure out how to get my app properly running again?
Try to delete node modules and install dependencies again similarly you can use npm ci will do the same.

How to give next js app build to the client

I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.

What is the difference npm start and firebase serve?

I've created an app that makes calls to Firebase. The Firebase API has given instructions to test the application, via firebase serve and firebase deploy. I know that firebase serve creates a local server instance at localhost:5000.
Is there a difference in this case between running npm start and firebase serve, besides the port number? Are they just the same thing, if you have a react application that uses Firebase?
npm scripts are defined in your project's package.json. So, if the "start" script defined there is "firebase serve", then there is no practical difference between firebase serve and npm start for that project.

How to run create-react-app build version

I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

How can I run my bower-angular project?

Hi everyone I know its simple question but I am new the angular development.
I have angular projects but I cant run.
I know npm using on console, I tried many times npm run, npm instal on my main directory.
So, how can I run my angular project on the console?
If the project is using Angular Seed or is similarly configured, you can use
npm start
to install dependencies and start a running http-server on port 8080 (by default).
If you project has a README or package.json file, it might give more clues.
Otherwise you can just serve up the application with http-server:
npm install http-server
http-server .
Asume you are using NodeJS as a server side, try node [your-application-main-js-file.js]. For example node index.js. But it depends on what back end environment are you using. Angular is just a front end library/ framework. It should be tested on browser not in your console.

Resources