How to Deploy a React App to the Internet for Free

In our previous blog, we showed you how you can get your first application running locally within minutes without any hassle at all. If you missed part one, check it out here.

In this tutorial, I will show you how to use Netlify to get your React application exposed to the public web! The best part is this whole process is FREE for minimal apps! Perfect for a technical portfolio.

This will help you share with your friends and family your newly found superpowers. ?

You can use any react app that you are building. For this tutorial, I will be using a Bare Bones application created with the nifty Create-React-App command.

To give you some background Netlify is a resource that allows for easy deployment for any website. As you will see in this tutorial, Netlify offers amazing automation for the build process. It deploys any changes you make to your react app. This works like magic.

If you want to follow along with the same app, please refer to my post on how to get started with your first React application.

Prerequisites:

  • A GitHub account
  • A Netlify account
  • Git installed (Tutorial Here)
  • Same prerequisites as the first post.

New Terminal

  1. Open Visual Studio Code. Then click on the terminal dropdown on the top of the menu bar. Then click ‘New Terminal’.

cd mytestapp

2. Now type ‘cd mytestapp’ in the terminal window that opened at the bottom of the Visual Studio Code. Hit Enter.

npm start

3. Now type ‘npm start’. This will start the React Application locally.

React application

4. You should see a browser window open up with your React application.

navigate to github

5. Now go to your browser and navigate to github.com. Click on the ‘New’ button on the left-hand side of the site.

repository name

6. Type in ‘mytestapp’ for the repository name. Then click the ‘Create repository’ button.

repository command

7. Now click on the button on the right side of the displayed section of text. This will allow us to link our local code to this repository that we just created on GitHub.

Visual Studio Code

8. Now go back to Visual Studio Code. On the terminal, we need to stop your local React App. To do this, hold the CTRL+C keys while you are on the terminal section of the VS Code.

Now type ‘Y’ and hit enter when you get prompted to terminate the batch job.

terminal window

9. Now, paste the statements that were copied from GitHub into your terminal window and hit enter.

set up repo

10. You should see the following text show up after. This confirms that you have connected your local code to the newly set up repo.

git add

11. In the next step, you will type ‘git add.’ in the terminal and hit Enter.

Initial Commit

12. Now type ‘git commit -m “Initial Commit” ’ and hit Enter.

git push

13. Next type ‘git push’ and hit Enter. Congrats, you have published your local code to GitHub.

navigate to netlify

14. Now go to your browser and navigate to netlify.com.

Click on the top-right menu button.

log in netlify

15. Click ‘Log in’ on the dropdown, as shown in the above screenshot.

New site from Git

16. Next, click ‘New site from Git’.

click GitHub

17. Then click GitHub, as shown above.

create new site

18. Scroll down on this screen.

Configure Netlify app

19. Then click ‘Configure the Netlify app on GitHub’.

GitHub account

20. Log onto your GitHub account.

Select repositories

21. Click ‘Select repositories’.

mytestapp

22. Next, type in the search box ‘mytestapp’ as shown in the screenshot above.

Then select the result that shows up.

list of repos

23. Now you should see ‘mytestapp’ in the list of repos. On to the next step!

list of repos save

24. Click the ‘Save’ button.

back to Netlify

25. Now go back to Netlify.

search box

26. In the search box type ‘mytestapp’.

create new site netlify

Select the result, as shown in the screenshot above.

27. Scroll down on this screen.

Deploy site

28. Click on the ‘Deploy site’ button.

site deploy progress

29. You should see a screen like the one above. Your website’s name will be random, so don’t worry if it is different from mine.

You should see the status highlighted in yellow, letting you know that your site deploy is in process. Please wait for this to finish. You can refresh while you wait – it should only take a few minutes.

site published

30. In a few minutes, you should see the status turn green.

Now click on the link.

deployed site

31. Your site is deployed to the internet! Now for the cool part. If you make any code changes and check it into your repository on GitHub, Netlify will automatically detect those changes and push them to your newly created and deployed site. Amazing!

Follow along below.

code -r

32. Now go back to VS Code and type the following in the terminal window and hit Enter: ‘code -r .’

app js

33. You will see a panel for the app open on the left side of the screen.

Click App.js

delete code

34. Delete the following line from the code.

vs code change

35. Change text to ‘Hi Mom!!’

git add code

36. In the terminal, type the command ‘git add’ and then press Enter.

Changed Message

37. Next type ‘git commit -m “Changed Message” ’

Then hit Enter.

git push enter

38. Next type ‘git push’

Hit Enter

GitHub repository

39. You should see a similar amount of text, as shown in the screen above. This pushed the change we made locally to the GitHub repository.

live site and hit Refresh

40. Go back to your live site and hit Refresh a few times. It could take a minute or two to change.

site deployed to the internet

41. Now we can see the updated text on our site deployed to the internet. Woohoo!

There you go, folks; you can now use Netlify to get your React application exposed to the public web! On the contrary, the best part is that this whole process is FREE for minimal apps, which makes it perfect for a technical portfolio! If you have any questions or insights on this blog, please do share them using the comment box below! If you have questions about how AlphaBOLD can help your organization design, build and deploy React applications, please reach out to us at [email protected]

Happy Reacting!

Leave a Reply

Your email address will not be published.