Deploy Checklist App to Netlify

Reading Time: 5.44 minutes


From the previous chapter, we've completed the implementation of database capability of our checklist app (Adding Database Capability to Checklist App) using the Firebase Firestore database. In that chapter, we've discussed the following database operations:

  • Read (read all)
  • Create
  • Update

In this chapter, we are going to see how we can deploy our app to the internet so that it can be accessed anywhere with an internet connection. Either through phone or computer with modern web browser.


In order to put our codes in the cloud, we are gonna need to upload it to a server. The old days of doing this is to upload your whole site using technologies like FTP (File Transfer Protocol) applications.

Today, this is faster and easier.

The method that we are going to use in this lesson is just by uploading the files directly into a web service called Netlify from https://netlify.comopen in new window.

The following are the steps we are going to take.

  1. Register to Netlify to get an account
  2. Create a new site in Netlify
  3. Upload our codes

And that's it! Just three steps.

Register to Netlify

1. Let's get over to to register an account.

Click on the "Sign up" button to go to the sign up form.

2. On the next page, we will be presented with the different ways and accounts we can sign up with.

If you have an account in any of the first 3 options or want to create one, go ahead and select any one of them. The account creation is pretty straight forward.

Netlify signup options

3. I selected the last option which is "Sign up with email" so I get this page.

Netlify signup with email

4. Upon clicking the Sign up button, a notice will be displayed saying that I have to check my email to verify my account.

Netlify signup with email

5. On the received email confirmation, click on "Verify email" to activate the account.

Email confirmation

6. On the email verified page, click on "Personal". On the next options, click on the cards that best describes your purpose.

Email verified page

7. I just selected "Web app" on the first site to build and "Hobby developer" on the role.

Email verified page

8. On the team name, I selected "". After that, select "Continue to deploy".

Choose team name

9. Now on the deploy page, click on "Skip this step for now". We will create a new site on the next step.

Choose skip this step for now

Create a new Site

Now it is time to create a site.

10. On the sites page, click on "Sites" link.

Sites page

Upload the codes

Let us now upload our site.

11. On the "Add site to Netlify" page, on the bottom, under "..or deply manually", click "browse to upload" link.

Here select the folder containing the codes of your site to upload and upload it.

Deploy manually

12. After that, an alert box will appear asking you to confirm the upload. Just click on "Upload".

This will upload our site and automatically deploy it.

Upload confirmation

13. On the left menu, click "Site overview".

Left menu

14. This will bring us to the site overview page.

Netlify automatically chooses a random name for our website. In my case, it is "incandescent-paprenjak-f727f4"

It is a little bit long and random and we will change it. Click on the "Site configuration"

Site overview

15. On the site details, click "Change site name". Then let us name our site whatever we want. A meaningful name because this will appear on the site url.

I will name mine "checklist-sample". If successful, this will give me a site name

Site details

And there you have it! You should now see the url for your site at the top of site configuration page.

configuration summary
configuration summary

You can now click on it to preview your site!


Congratulations on your new web site!

Last Updated:
Contributors: alexiusacademia