A Beginner's Guide To Web Deployment
Tags: webdev, frontend, softefwrr
Published: 2023-11-25 21:06:24

So you’re done building that great application and want the world to see it? Great, you’ve come to the right place.

The primary reason for deploying applications, whether frontend or backend, is to make them usable outside your computer. Thankfully, the web is littered with platforms that allow you to deploy your applications with little or no effort and for free. In this article, I’ll try to exhaust the options for deploying frontend and backend web applications.

---

## Frontend Deployment
With Frontend, all you deploy to the cloud are static files and assets. This means that whatever frontend framework you choose to build with (React, Vue, Angular, Flutter), in the end, plain old HTML, CSS, and Javascript files and assets are what your users/visitors get.


![Frontend deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2uo8mmw7sq4s3qdwf85.png)

Let’s see the options you have for deploying your front-end applications.

## [Render](https://render.com/)

I have written a guide to get you started deploying your front-end applications to Render. In their words, Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, and private networks, and auto deploys from Git. With Render, you can deploy static sites, web servers, or an entire docker container.

{% embed https://devjavu.space/post/auto-deploy-react-apps-with-render/ %}

## [Vercel](https://vercel.com/)

Vercel is primarily Frontend focused, as it comes baked with quick deployment templates for most javascript frontend frameworks, including React, Vue, and Angular; it also caters to static site generators. Here’s a guide to get you started:

{% embed https://devjavu.space/post/deploying-react-vue-applications-with-vercel/ %}

## [Heroku](https://www.heroku.com/)

Heroku is famous for deploying most types of applications. You could also quickly deploy your JavaScript frontend applications to Heroku. Here’s another quick guide:

{% embed https://devjavu.space/post/auto-deploy-react-vue-apps-with-heroku/ %}

## [Surge](https://surge.sh/)

Surge is another free alternative with one of the most convenient deployment flows. It allows you to deploy your Frontend static files in a single CLI command.

```bash

$ surge
    Running as youremail@gmail.com (Student)
        project: /Users/onuoha/devjavu
```

To start deploying with Surge, you must install the Surge CLI tool. Assuming you already have node/NPM setup on your machine, you can install the CLI tool globally:

```bash

npm install --global surge
```

This should provide you with the surge command globally available in your terminal. To authenticate the Surge CLI., you can now run surge login.

```bash

surge login
```

From here, you can deploy any Frontend application in a single command. Here’s how I’d usually use it. You can add a deploy script to your package.json file if you have a Vue or React application.

Vue (Nuxt) package.json Example:

```json

{
  ...
  "scripts": {
    "build": "nuxt build",
    "deploy": "yarn build && cd dist && mv index.html 200.html && surge ."
  }
}
```

The above is a sample deploy script for a Vue/Nuxt application. First, we run the build command, which generates a dist folder. When prompted, we navigate into the folder, run the surge command, and specify the application domain.

Other relatively free alternatives for deploying your frontend applications include:

- [Netlify](https://www.netlify.com/)

- [Firebase Hosting](https://firebase.google.com/docs/hosting)

- [Github Pages](https://pages.github.com/)

- [Cloudflare Pages](https://pages.cloudflare.com/)

---

## Backend Deployment

With backend deployments, unlike Frontend deployments, we do not deploy static files to the cloud. Instead, we deploy server-side scripts; some listed frontend deployment services may not work for server-side code. Let’s see the options we have.

## [Heroku (BE)](https://www.heroku.com/)

Most beloved by every developer, Heroku is a go-to option for everything web deployment, Frontend and backend. Unfortunately, Heroku does not include any free tier at the time of writing.


![Heroku langauges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7l934ndov3r0jzxjnwx.png)

If you build backend applications in any of these languages, then Heroku allows you seamlessly deploy them. Head over to the [documentation](https://devcenter.heroku.com/) and select the language of your choice.

## [Digital Ocean](https://www.digitalocean.com/pricing)

Digital Ocean offers you an excellent free tier for around 60 days plus free credits; after that, you must pay per use. A simple Droplet at 4 USD / month might work fine if you build small applications.

{% embed https://www.digitalocean.com/pricing %}

## [Forge](https://forge.laravel.com/)

For seamless deployment of [Laravel](https://laravel.com/) applications, Forge is a good option. They also offer a decent free tier you can kick start with.

{% embed https://forge.laravel.com/ %}

## [AWS](https://aws.amazon.com/)

Amazon Web Services provides EC2 instances to host/deploy your web applications. AWS might require some basic DevOps knowledge compared to the others; the interface isn’t the most budding developer-friendly.

{% embed https://aws.amazon.com/ %}

## [Google Cloud](https://cloud.google.com/appengine)

Google Cloud Platform (GCP) provides several services, including App Engine, which allows you to deploy backend applications like Nodejs. Google also provides decent freemium for these services. Here’s an official guide to deploying a Node app.

{% embed https://cloud.google.com/appengine %}

## Serverless

If you didn’t already know, **Serverless** computing allows you to build and run applications and services without thinking about servers. **Serverless** applications don’t require a virtual server to run them.

You can deploy simple functions and use them as APIs without a complete server-side setup. If these are the kind of applications you intend to build, then here’s a list of possible hosting services to use:

- [AWS Lambda](https://aws.amazon.com/lambda/?c=ser&sec=srv)

- [Cloudflare Workers](https://workers.cloudflare.com/)

- [Netlify Functions](https://www.netlify.com/platform/core/functions/)

- [Google Cloud Functions](https://cloud.google.com/functions)

- [Microsoft Azure Functions](https://azure.microsoft.com/en-us/products/functions/)

- [Parse Platform (Opensource)](https://parseplatform.org/)

- [Back4app](https://www.back4app.com/)

With the above options, you can host your functions at a freemium or paid rate.

---

In conclusion, what you decide to choose is dependent on the kind of web application you’re developing, be it large, small, frontend or backend. As well as your budget for your application.

Cheers ☕️

---