Beginner’s Guide to Deploying Frontends

All web developers must’ve collectively gone through the struggles of trying to build an awesome website with HTML, CSS, JS, only to learn localhost:3000 would not open the same in a friend’s computer. And thus begins our quest for learning about deployments.

In this blog we will be looking at some straight easy deployment methods such as Github Pages, Vercel, Netlify. The following methods will vary a little in their implementations for different codebases, hence, we will focus today on deploying

• Basic HTML websites

• Next.js applications

Github Pages

For absolute beginners looking to deploy their basic HTML websites, Github Pages are one of the first and easiest ways to deploy a site.

To deploy a static HTML website on GitHub Pages, create a repository on GitHub, upload your website files (including an index.html file), then configure GitHub Pages in the repository settings to publish from a specific branch (usually main or gh-pages). Below is a pros and cons table for choosing github pages as your hosting service.

Get started

1. Create a GitHub Repository
   Visit https://github.com/new and create a new repository.

2. Upload Your Website Files:

   • Create your website: Prepare your HTML, CSS, and JavaScript files, ensuring your entry point is an index.html file.

   • Upload to the repository: You can either upload files directly through the GitHub web interface, or clone the repository locally, add the files, and push them to GitHub.

       git add .
       git commit -m "initial commit"
       git push
     

3. Configure GitHub Pages:

   • Navigate to repository settings: Go to your repository and click on "Settings".

   • Go to Pages: In the sidebar, click on "Pages".

   • Select the branch: Under "Build and deployment", select "Deploy from a branch" under "Source".

   • Choose the branch: Select the branch you want to deploy (usually main or gh-pages).

   • Save: Click "Save".

   • Visit your site: After a few minutes, your website should be live, and you'll see a link to it under "GitHub Pages".

Once completed, your website will be visible on on a standard domain, e.g. awesome-project.github.io

Vercel

Vercel is by far one of the easiest and popular tools used by students and professionals alike to get their projects deployed fast and hassle free, with automatic CI CD pipelines.

On an enterprise level, however, Vercel does not hold a solid ground. While basic applications and websites work great, server intensive use cases or database support do not fare well with Vercel.

Below is a pros and cons table for choosing Vercel as your hosting platform.

Get started

1. Create an account at https://vercel.com. Select the Hobby plan to get started.

2. Continue with a git provider. In this case, say Github.

   

3. Install and authorize Github and import a repository to get started.

4. Import a Github repository from the options given.

5. 

   Configure the required build and output settings, and add any environment variables required

6. 

   The deployment will start and once done, will give a URL to find the deployment on.

Netlify

Netlify is another popular platform for deploying websites, known for its simplicity and powerful features. It supports continuous deployment and offers a unique drag-and-drop feature for quick deployments.

Netlify is particularly well-suited for static sites and React applications, providing a seamless experience with its built-in CI/CD pipeline. However, it's important to note that while React apps work best on Netlify, Next.js applications may face limitations, especially with server-side rendering and API routes.

Pros and Cons

Get Started with Continuous Deployment

1. Create a Netlify Account:
   Sign up at https://www.netlify.com and log in to your dashboard.

2. Connect to a Git Repository:
   Click on "New site from Git" and choose your Git provider (GitHub, GitLab, or Bitbucket). For this example, we will use Github

3. 

   Select a Repository:
   Choose the repository you want to deploy and configure the build settings and add any environment variables necessary.

   

4. Deploy Your Site:
   Netlify will automatically build and deploy your site, providing a live URL once the process is complete.

Drag-and-Drop Deployment ( An option for vanilla sites)

1. Prepare Your Site Files:
   Ensure your site is ready with all necessary files, including an index.html.

2. Drag and Drop:
   Simply drag your site folder into the Netlify dashboard's "Sites" section.

3. Live URL:
   Your site will be deployed instantly, and you'll receive a live URL to access it.

Netlify's ease of use and robust features make it a great choice for deploying static sites and React applications, though Next.js users should be aware of its limitations.

Conclusion

Deploying frontends can be a straightforward process with the right tools. Platforms like GitHub Pages, Vercel, and Netlify offer various features and ease of use for different types of projects, from basic HTML websites to more complex React and Next.js applications. While each platform has its strengths and limitations, they all provide valuable options for developers looking to get their projects online quickly and efficiently.

While this guide focused on frontend deployments, it's also important to consider backend deployment tools. Some popular free options for backend deployments include:

• Render: Provides a straightforward platform for deploying both static sites and backend services, with a generous free tier.

• Railway: Offers an easy-to-use interface for deploying full-stack applications, with support for various databases and services.

These tools can help you deploy backend services alongside your frontend, ensuring a complete and functional web application. In future blogs, we will look at tools for full stack deployments, databases.