• Get application security done the right way! Detect, Protect, Monitor, Accelerate, and more…
  • Deploying frontend applications is not a big thing today. We can deploy a site within minutes with modern technologies and hosting platforms. There are many hosting platforms out there. But, we are interested in Netlify for this article.

    Let’s deploy our frontend application to Netlify.

    Frontend Applications

    There are different kinds of frontend libraries and frameworks like React, Vue, Angular, etc.., And the good news is that all of those use the same package packager. Deployment for all the frontend applications build with different libraries and frameworks is similar.  So, we are good to go with any of those libraries and frameworks.

    We can also create frontend applications without any libraries or frameworks. This is the traditional way of building frontend applications once upon a time. But, it changes a lot now. So, we can build frontend applications in different ways. Although, the deployment process is the same for all of those different kinds of frontend applications.

    We will see deploying one front-end application built with a library and another one without any library or framework. Let’s build minimal frontend applications for deployment using React and Plain JavaScript.

    Setup

    We will create simple React and JavaScript applications for the deployment demonstration. You create them as well to follow along. Or, if you have already had frontend applications, then skip to the deployment section.

    We need to remember that the entry point of any frontend application should be index.html while deploying to Netlify.

    If we have created applications using any library or framework, we don’t have to worry about it. By default, the libraries and frameworks create index.html file in the build process for us. But, when we have plain JavaScript applications, we need to create an index.html file as the entry for our application.

    React Application

    Run the following command to create a React app.

    npx create-react-app demo

    You can update the app as you wish before deploying. I have just updated a line of text on the Home page. It doesn’t matter, though :).

    Plain JavaScript Application

    Follow the below steps to create a simple JavaScript application.

    • Create a folder called demo.
    • Create three files called index.html, styles.css, and script.js.
    • Here, index.html is the entry point for our application.

    Take out your creativity and update the app. I am just adding simple things to the application.

    Deploying

    Coming to the deployment of frontend applications to Netlify, we have two options. We can directly deploy applications from GitHub, GitLab, BitBucket, etc.., to Netlify. Or else we can deploy using the Netlify CLI (command-line interface). It’s not mandatory to know every to deploy our applications. But, it’s good about the different options we have for the deployment.

    Let’s explore each of them one by one.

    GitHub

    We are using GitHub to host our code. You don’t need to use it as it’s not mandatory. You may use other platforms as you like.

    There are two types of applications for us to deploy. But, the process looks similar for both of them. Even though I will show you both of them. There are mainly two steps in it. They are

    • Push the code to GitHub.
    • Deploy the application from GitHub using Netlify.

    The first part is common for both React and JavaScript applications. Let’s start the deploying process with the first step.

    We are assuming you haven’t had your code on GitHub. If you do have your code on GitHub, then you can skip the pushing code part. You need git tool. If you don’t have git installed on your machine, then you should install it before continuing.

    #1. Pushing Code to GitHub

    • Go to your GitHub account and create a repo called demo.

    Creating GitHub Repository

    • You can see the repo as follows after it’s created.

    GitHub Repository

    Now, we have to push our code to the repository that we have created above. To push the code, you can follow the commands given in the repo or below commands.

    • Open terminal or cmd.
    • Go to your project directory.
    • Initialize the git with git init
    • Add the changes to local git git add .
    • Commit the changes with a message git commit -m 'Completed application'
    • Connect the remote repository with our local repository git remote add origin 'your_repo_path'. Replace your_repo_path with your remote repository. You can find it in the repository similarly mine [email protected]:hafeezulkareem/demo.git
    • Now, push the code git push -u origin main
    • That’s it; we have pushed our code to GitHub.

    You can see the code as follows in your repo.

    GitHub Repository Code

    We are done with the first step of pushing our code to GitHub. If you are deploying a plain JavaScript application, then your code may look as follows.

    JavaScript Repository

    Let’s move to the next step and deploy our application to Netlify.

    #2. Deploying GitHub code to Netlify

    If you don’t have an account in Netlify, create one.

    • Go to the Netlify website.
    • Login to your account.
    • You can see a button called New site from Git, as shown below.

    Netlify New Site Button

    • Click the button to start deploying.
    • You will navigate to the deploy page that looks as follows.

    Netlify Deploy Page

    • You can different code hosting platforms on the page. We are using GitHub. So, click on it.
    • It will open a new window to login into our GitHub account as follows.

    Netlify GitHub Authentication

    • Log in to your GitHub account for Netlify authorization.
    • Once you login into your GitHub account, the window will close saying Authorized.
    • Now, search for your repository name from the given search bar.

    Netlify Search Repository

    • When you search for the repository, it won’t appear because we didn’t give our repository access to Netlify. You will see a button called Configure Netlify on GitHub.

    Configuring Repository

    • Click the button and enter your GitHub account password to confirm the access.

    GitHub Confirm Access

    • You will navigate to an Access page that looks as follows.

    Netlify GitHub Access Page

    • Scroll down, and you will see a section called Repository Access.

    Repository Access

    • There are two options. We can give access to all our repositories or some of them that require it. It’s better to give access to the repositories that we are deploying and not all.
    • Select the Only select repositories option as follows.

    Select Repository Option

    • Click on the below dropdown and search for the repository that you want to deploy. Select it.

    Selected Repository

    • Click on the Save button.
    • It will redirect to Netlify deploy page. And you can see the new repository.

    Deploying Repository

    • Click on the repository.
    • It will show different details like a branch to deploy, command to install packages, etc..,

    Repository Details

    • If you have full code on a different branch other than master, update it by selecting the branch from the dropdown.
    • Finally, click on the Deploy site button. It’ll redirect you to the dashboard.
    • It will take some time to deploy the site.

    Site Deploy Progress

    • You will see the published site once it is deployed.

    Published Site

    That’s it.

    We have successfully deployed our site to Netlify. You can click on the site URL to see it live.

    Demo Site URL

    Demo Live

    We can update the site and domain settings as we want. But, we will not cover it here as it makes another full topic to talk about. Below is the plain JavaScript application after deployment.

    Demo Live

    There’s no difference in the deployment process. But, remember not to forget about the entry point of the application, i.e.., index.html.

    Now, it’s time to learn about another method of deploying our frontend application.

    #3. Deploying code using Netlify CLI

    The Netlify CLI is a command-line interface to deploy frontend applications from the terminal or command-line. It’s useful when you don’t want to go through some extra steps (above method). Like the above method, we can deploy React (any library or framework) or JavaScript applications.

    You can get the complete documentation of Netlify CLI here. But, it’s not necessary to deploy an application. You can refer to it when you are going to the advanced level.

    Let’s see how to deploy using Netlify CLI.

    First of all, we have to install it on our machine. It’s available as a node package. So, we can install it using the npm. Let’s install it using the following command.

    npm install netlify-cli -g

    The flag -g is to install the package globally so that we can access it anywhere. You will see something similar to the following image.

    Netlify CLI Installation

    Let’s see the steps to deploy React and plain JavaScript applications using Netlify CLI.

    • Run the build command of React (or any other library or framework) application. We don’t need to run any commands in the case of a plain JavaScript application.
    npm run build
    • Build command may vary based on the library or framework you are using.
    • You will see a build folder as follows.

    Build

    • Change your directory to build folder in case of React application or project folder in case of JavaScript application.

    React Build

    Plain JavaScript Application

    • Before going to the next steps, we need to create a Netlify account. Go to Netlify and create one account and move to the next steps.
    • Now, we need to log in using the CLI. Let’s run the following command to log in.
    netlify login
    • The above command will open a new tab in the default browser to login into the Netlify account. It’ll take you to the Netlify site.
    • Enter your credentials and log in. You will ask to Authorize the CLI after you logged in.

    Netlify CLI Authorize

    • Click on the Authorize to authenticate yourself. You will see a success message after it.

    Netlify CLI Authorize Success

    Netlify CLI Authorize Success

    • Now, it’s time to deploy our application. Run the following deploy command.
    netlify deploy
    • It’ll ask you to choose the existing site or create a new one. Choose (use your up and down arrows) the Create & configure a new site and hit Enter.

    Netlify CLI Deploy - Create

    •  It’ll then show Teams to choose, use your arrows to select, and hit Enter.

    Netlify CLI Deploy Team

    • Now, you can enter the subdomain for your site. It’s not mandatory, though. Netlify will choose a random one for us if we leave it. We can change it later if we want to. I am leaving it blank for now.

    Netlify CLI Deploy Subdomain

    • It’ll ask us to enter the directory that we want to deploy. We have already navigated to the destination directory. Let’s just hit Enter. You can enter other directories as well. But it isn’t straightforward. So, it’s better to navigate to the destination directory first and then deploy.

    Netlify CLI Deploy Directory

    • It will deploy our site for a draft URL as follows.

    Netlify CLI Deploy Draft

    • You can check your site on the draft URL and make sure everything is correct.
    • After checking the site, we can deploy it to production using the following command.
    netlify deploy --prod

    Netlify CLI Deploy Production

    • It will ask only for the directory. Enter the directory. If we are in the same directory, then just hit Enter.
    • That’s it. Our deploying the site is complete. You can visit the site to check it.

    Netlify CLI Deploy Production

    • And, here is the result.

    Demo Live

    We are done with deploying our site to Netlify using Netlify CLI. You can update the settings of the site in your Netlify dashboard.

    Conclusion

    Phew! It’s a long one. You don’t need any other guide to deploy your frontend application to Netlify after reading this completely.

    There are two methods to deploy our application to Netlify. Which to follow? There is a slight advantage of using the first method. Netlify will update the build whenever we push new code to our site repository. But, in the case of the CLI method, we have to do it manually.

    We always take up one method over the others based on the situations we are in. Anyway, you know both the deployment methods. So, we don’t need to worry about the method. Choose the one which suits best for you.

    Note: The demo sites shown in the article may not be available publicly after some time.

    Need an alternative to Netlify? Check out these best static site hosting platforms.

    Happy Deploying 🙂