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. 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.
You can see the repo as follows after it’s created.
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 initAdd 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 git@github.com:hafeezulkareem/demo.gitNow, push the code git push -u origin mainThat’s it; we have pushed our code to GitHub.
You can see the code as follows in your repo. 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. 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.
Click the button to start deploying.You will navigate to the deploy page that looks as follows.
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.
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.
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.
Click the button and enter your GitHub account password to confirm the access.
You will navigate to an Access page that looks as follows.
Scroll down, and you will see a section called 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.
Click on the below dropdown and search for the repository that you want to deploy. Select it.
Click on the Save button.It will redirect to Netlify deploy page. And you can see the new repository.
Click on the repository.It will show different details like a branch to deploy, command to install packages, etc..,
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.
You will see the published site once it is deployed.
That’s it. We have successfully deployed our site to Netlify. You can click on the site URL to see it 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. 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. 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. 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.
Build command may vary based on the library or framework you are using.You will see a build folder as follows.
Change your directory to build folder in case of React application or project folder in case of 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.
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.
Click on the Authorize to authenticate yourself. You will see a success message after it.
Now, it’s time to deploy our application. Run the following deploy command.
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.
It’ll then show Teams to choose, use your arrows to select, and hit Enter.
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.
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.
It will deploy our site for a draft URL as follows.
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.
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.
And, here is the result.
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 🙂
