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.
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 need to remember that the entry point of any frontend application should be index.html while deploying to Netlify.
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 :).
- 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.
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.
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.
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
- 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_pathwith your remote repository. You can find it in the repository similarly mine
- 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.
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.
We have successfully deployed our site to Netlify. You can click on the site URL to see it 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
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
-g is to install the package globally so that we can access it anywhere. You will see something similar to the following image.
npm run build
- Build command may vary based on the library or framework you are using.
- You will see a build folder as follows.
- 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.
netlify deploy --prod
- 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.
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 🙂