Let us try to deploy your app to Heroku:
Step 1: Create a React App
npx create-react-app hello-world
cd hello-world
Step 2: Create an Express JS server to serve your production build
In your repository, create a file called server.js and insert the following code:
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
++In your package.json file, change the start script to the following:
start: "node server.js"
- Step 3: Create a React production build
Heroku now runs the build command automatically when you deploy, but it’s a good idea to test the production build locally before deploying (especially your first time).
You can create a production build locally by running this command in your terminal:
npm run build
Step 5: Deploy to Heroku -[you can do this in two ways]:
a) Go to your Heroku account on their official site and create your app manually.
b) or just run heroku create yourAppName
After that you would do the following:
It's done using Git, so you have to do the following:
git init // to initialize a Git repo
git add . // to add the new files
git commit -m "Heroku deploy" // In order to commit your changes
// Now goes the comment to connect your local app to the one created on the Heroku
heroku git:remote -a nameOfYourApp // <- the one created on their website
git push heroku master // to push it to heroku master repo
Now you can run `heroku open` to see your app in the browser
Link for references
b) Using the zero-configuration approach. With this approach you can skip the express server (it's all done for you) -> Just type the following commands:
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open
Link for references
UPDATE:
Since you're using firebase here are the steps you should take:
- Make sure you install firebase tools
npm i -g firebase-tools
Create production build of your app by running npm run build
Go to https://console.firebase.google.com and create your "empathy" app
Run firebase init inside of your project and provide the following answers:
Are you ready to proceed? -> YES
- From the list choose
hosting
- Choose your app which you previously created on firebase console
- What do you want to use are your
public folder -> build
- Do you want to configure a single page application -> YES
- Do you want to overwrite existing
index.html folie -> NO
After that just run firebase deploy
create-react-appuses Babel and Webpack -> They are responsible for your development work flow. After you create a production build it optimizes your code and puts it into the build folder. NOTE: Take a look in it, it changes the folder structure a lot, so that's why you get different paths. But withcreate-react-appeverything should work properly right out of the box. I hope that makes sense. Cheers.