Deploy React Application to Netlify
I just deployed an app with react, so I want to share it with you and my problem is encountered when posting on Netlify.
1. Log in
First you need an account. Netlify allows you to log in in 4 ways: Github, Gitlab, Bitbucket and by Email.
After logging in, you will see an interface like this to upload your project.
2. Deploy the product
First we have to build the product with the command:
1 2 | npm run build |
After running the above command, we will have a build directory in the project
Here we will have 2 ways to deploy the product
1. Drag and Drop (Drag & Drop)
Netlify is easy to use drag and drop to deploy. After you have the build directory just created earlier. You can drag and drop that build directory to conduct your deploy project
2. Use the command
Netlify provides us with commands to deploy with the command line.
- First, we need to install Netlify CLI with the command:
1 2 | npm install netlify-cli -g |
- Next we have to login Netlify with the command:
1 2 | netlify login |
You will be taken to Netlify’s page to Authorize
- Next, enter the deploy app command:
1 2 | netlify deploy |
- After entering the command will ask you
"What wơuld you like to do"
selectCreate & configure a new site
to create a new site.
- Set Site name. You can enter if you do not want to name anything.
- Select an account
- Select the build directory path
Note: if no link is selected
- Ctrl + C to cancel deploying. Back at the project you will see the newly created
.netlify
. - Open this item, you will see a
build
directory, delete it. - Copy the external
build
directory to.netlity
. - Rerun the
netlify deploy
command
Once completed you will be
Live Draft URL
is a draft link you can visit here to see how your product is deployed. When you are satisfied with it, officially deploy it by typing netlify deploy --prod
to complete.
Conclusion
Thank you for watching here. After you have finished you can public your project online
References:
https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/