How to deploy your React app with a single command using Netlify!

So, you've started learning React.

Maybe built a couple of apps.

And now you're looking to deploy them in order to showcase them on your portfolio or link them on your resume.

Having live projects that potential recruiters can play with and the test is absolutely necessary nowadays. It not only leaves a great impact but also saves the recruiters the hassle of looking at the source code, trying to figure out what the heck you've built.

However, deployment is generally considered to be a tedious and time-consuming process. Many people are reluctant to deploy their apps just because they think it involves configuring proxies and managing databases and so on.

But this is far from the truth.

Today I will show you how you can deploy your react applications with just a single command. It will literally take 2 minutes and you'll have a live and working app that you can show off to potential employers and link to your portfolio or resume.

So what are you waiting for? Let's get started!

Introducing Netlify!

The tool we will be using is called Netlify.

It allows you to deploy your front-end apps onto the web. It works with React, Angular, and Vue applications in addition to vanilla JS apps.

In order to get started, head on over to Netlify and create an account. Netlify supports a wide variety of login methods. I would recommend using your GitHub to login but it's up to you.

Install the Netlify CLI

Once you've created your account, you'll need to install the netlify CLI. The CLI is a very powerful tool that allows you to deploy directly from the command line. Once you have it set up, you'll never have to leave your editor to deploy your projects. One command and you'll be done.

In order to install the Netlify CLI, you'll need to have npm installed. npm is installed with Node.js. You can download Node.js from the official website.

Once Node.js is installed, open a terminal and change the directory to your react app using the cd command. Then run the following command to install the CLI:

npm install netlify-cli -g

Once done, you can check the version of the CLI by using the following command:

netlify

Great work. Now you're ready to start deploying some apps!

Deploy your React app

From your application directory run the following command to build the application:

npm run build

Give it a few seconds and you'll notice a new build folder in your project structure. This contains all your project static files that we will deploy.

Now run the following command to deploy the application:

netlify deploy

The first time you run this command, it will ask you to authorize netlify and will open a browser window. Just click on authorize and head back to your terminal.

Now, it will ask if you want to create and configure a new site or Link this directory to an existing site.

Select create a new site (using keyboard up or down arrows) and press Enter.

Then it will ask which Team you want to deploy to. Just keep it default and press Enter.

After that, it will ask if you want to change the name of your site. By default, it will give your site a random name. Feel free to change the name if you want as it will become your site's URL. Remember that you can always change it later.

Once you're done with it press Enter.

Finally, it will ask for the publish directory. Since we're deploying a React app we shall use the build folder. Type the following:

./build

Press Enter once more.

It will do its magic and after a few seconds, it will show you a draft URL for your site. Open that URL in your web browser. You'll see your web app deployed. Play around with it to test if everything looks good.

Once you're satisfied, use the following command to deploy your app to a production site:

netlify deploy --prod

Again type ./build when asked for the publish directory and voila! You're React app is now deployed on the web.

You will see a URL in the terminal. This is the URL for your application. Visit this URL to see your live deployed app.

Making changes

Now you might be wondering "That's all fine and good, but how do I make changes to my app? Maybe I want to fix something or change the layout, then what?

No worries.

After making changes to your application just run the npm build command again.

Then, you can update the deployed app by running netlify deploy --prod command.

It will deploy the new changes and your app will be updated.

If you want to change the settings of your deployed site, you can visit your account dashboard on netlify. Here you can do things like change the name of the site, add a custom domain, and even delete the deployed app.

That's All Folks!

That's it! You now have a working app URL that you can showcase on your portfolio and add to your resume.

Thanks for reading and happy coding!

Follow me around the web

Twitter: twitter.com/fahadimran_dev
Blog: Articles By Fahad
GitHub: github.com/fahadimran

Cover Photo by AARN GIRI on Unsplash