How to deploy the client application on Netlify

Tram Ho

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:

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.

  1. First, we need to install Netlify CLI with the command:

  1. Next we have to login Netlify with the command:

You will be taken to Netlify’s page to Authorize

  1. Next, enter the deploy app command:

  1. After entering the command will ask you "What wơuld you like to do" select Create & configure a new site to create a new site.

  1. Set Site name. You can enter if you do not want to name anything.

  1. Select an account

  1. Select the build directory path

Note: if no link is selected

  1. Ctrl + C to cancel deploying. Back at the project you will see the newly created .netlify .
  2. Open this item, you will see a build directory, delete it.
  3. Copy the external build directory to .netlity .
  4. 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/

Share the news now

Source : Viblo