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.
Related
I am trying to deploy my React app on a server via PM2. My React app currently has 2 environments: prod and dev. So, in my app folder, I have an environments folder with 2 files: .dev.env and .prod.env. First one is used for calling local APIs, and the second one is for production API URLs. prod.env is shown below:
When I want to start the app, I use the command npm run start:dev or npm run start:prod, depending on which environment I want my app on.
The question here is, when I try to deploy my app via PM2, what command or modification should I do so that I am certain that my app is deployed in production/prod mode?
My current PM2 config file looks like this:
{
apps : [
{
name : "random_app", //name of my app
script : "npm",
interpreter: "none",
args: "run start:dev"
}
]
}
For a production environment you should be serving the built version of the React app (run npm run build and it will output a production-ready version of your app to the build folder).
In order to separate the environment variables, you should use .env.development and .env.production files (the built version will automatically use the .env.production file) - see here for more information.
Then to serve it, you would use pm2 and serve (make sure serve is installed as well npm install -g serve) with a command like pm2 serve <path/to/build/folder> <port> --spa - more info can be found here.
React fails to make proper build, even with default app.
I ran commands npx create-react-app my-app then npm run build.
When I open index.html in /build, the site doesn't work and I get following logs:
You can just open a React (or Angular) build by clicking on the HTML file.
What you have to do is the following:
Install any static server module (i.e. serve):
npm install -g serve
In the root directory:
serve -s build
And then your app will be served.
It would be wise to do that before you deploy to any cloud storage or even your own server, but if you are 100% your app works, you can just deploy in on Vercel, Heroku or GitHub pages, they are free.
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.
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
I have a node API and an angular front end project (via grunt, bower, yeoman flow structure) as two separate github repositories. I am trying to push them both to production through Heroku. Coming from a rails bg where everything in the app exists in the same project directory, and you only have to push one directory, how would you do this? Should I push both projects as separate heroku projects or is there a best practice out there? I'd appreciate any and all advice, thank you in advance.
Firstly, I would review the official Heroku doc on deploying nodejs apps
If you have two projects, you will probably want to deploy them as different heroku apps.
The key here is going to be making sure your package.json is set up correctly. Make sure all your dependencies are correct and present, and your package.json points to your node server script. Make sure you have your dev dependencies like grunt separate from your production dependencies also, as these don't need to be deployed to production. If this is just a demo app, you can have heroku install all your scripts (like angular) simply by including them in your package.json. When you push your app, it will run an npm install on your package.json and install it the dependencies.
There are a few ways you can deploy also - via the heroku cli, a github link, or a dropbox link. I haven't personally used the cli much, but I have found the other two convenient to use, especially if you are already pushing to github.
One key thing too is that if you need to install dependencies with bower, you should know that heroku DOES NOT run bower install on it's own. You can tell heroku to run it by adding the following to your package.json:
"scripts": {
"postinstall": "bower install"
}
This will cause it to run a bower install after npm install finishes.
Also, if you haven't done so already, you'll need to set up your database somewhere with a 3rd party provider (like mongolab or modulus).