How to create and deploy a React App properly? - reactjs

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