How to create and deploy a React App properly?

Question

I was working on a ReactJS project, which I created using the npx create-react-app app-name command. I used some images in the project as well.

My problem is that after I ran npm run build the file paths did not work. What I mean is that instead of

<link href="./css/main.493343f3.chunk.css" rel="stylesheet">

The result was this:

<link href="/static/css/main.493343f3.chunk.css" rel="stylesheet">

It were be comfortable if I wouldn't have to rewrite the file paths manually, but fine I can do it.

The bigger problem is that as I mentioned I used IMG-s in my project.

The code what I used for the images:

import pic_1 from './pics/pic_1.jpg';

<img src={pic_1} alt=""/> 

After compiling (running npm run build) it did not work. As I thought the file paths were not working.

"static/media/placeholder.3a8380d3.jpg"

Instead of

"./media/placeholder.3a8380d3.jpg"

I fixed it manually but it still didn't work.

What should I do differently?

How should I compile the code correctly?

Thank you for reading my question! :)

Answer 1

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

Answer 2

at first, make sure your project runs truly the make build to the application by fro both client and server if they are found the push the project in GitHub go to location of folder project

git init
git add . 
git commit -m "deploying static--err, dynamic site to heroku"
git remote add origin remote repository URL
git push origin master

install heroku-cli tools then login

heroku login

Enter your Heroku credentials: Email: Password:

heroku apps:create nameproject

git push heroku master
git add .
git commit -m "A helpful message"
git push heroku master

tell me if it success or not