Hosting your app for production

Let’s say you have built an app. It works great, is innovative, and will change the world. At this moment, you definitely cannot wait to publish it and share it with others! But there is one more decision: how will you make your app available to everyone?

You need hosting, someplace where your code can leave and be served to the users (fronted apps) or where it would run and handle incoming requests (backend apps). Plenty of services are offering paid or free hosting in various forms. They differ not only by which company operates them but also by which data center your app will be stored and served. Additionally, they can require a different configuration level or support only a specific set of technologies.

The decision is not easy, and your choice impacts your app’s overall performance and accessibility. This article will provide an overview of available hosting options alongside recommendations for different types of applications you have or are planning to build.

Static content

For most front-end apps, you build static content from your code that doesn’t do any server-side computations. This is the case with, for example, static websites or Single Page Applications (SPAs).

Your app consists of some HTML and CSS alongside JavaScript code dedicated entirely to client-side usage in the web browser. If this sounds like your project, the best solution is to use a Content Delivery Network (CDN).

It allows your application to be geographically distributed among a group of servers that work together to provide fast delivery to everyone, no matter where they are in the world. This crucial optimization makes your app accessible for everyone in a somewhat comparable load time. The easiest and most pleasant way to ship your application to the edge is via seamless all-in-one services like Netlify or Vercel or manage the CDN yourself with Cloudflare CDN, Google Cloud CDN, and Amazone CloudFront.

Server-side

If your app requires a runtime platform, for example, you have built a back-end service, full-stack app, or front-end application that uses Server-Side Rendering (SSR), there are three main types of cloud computing options you should be interested in: Infrastructure as a service (IaaS), Platform as a service (PaaS), and Serverless.

How do you choose which one suits your needs? Ask yourself a question: how much of a runtime environment do I need or want to manage myself?

Infrastructure as a service (IaaS)

In IaaS, you typically get a preconfigured virtual or physical machine from a cloud provider that can be exposed publicly on a temporary domain or your domain. Everything else you need to set up on your own, similar to how you set up your local machine. Installation of the required software, the configuration of the deployment process, and even the network layer setup - great freedom comes with great responsibility.

The main advantage of this approach is that if you own the machine, you can more easily configure it for your needs which comes in handy for more complicated projects or less typical setups; for example, combining different runtime platforms in a single project, requiring access to a host environment or you simply need the persistence of stored data. Take a look at Amazon AWS, Microsoft Azure, and Google Cloud.

Platform as a service (PaaS)

If you’re searching for something more plug-and-play, take a look at PaaS. With this type of cloud computing, you still get a dedicated spot in the virtual machine environment. But the whole configuration and setup process is typically based on declarative configuration specifying how to build and run the app, what npm scripts to run, and which Node.js version to use. Using that information, all the setup is done for you.

The network layer setup is also taken care of, and you commonly get a free subdomain bonded to your newly created service for free. Typically, you need to provide the port number to the environment variable your app will listen from, and the cloud service can automatically supply you with the appropriate one.

Additionally, because many applications have standard requirements, typically reasonable defaults are available. For instance, if you use Node.js, then dependencies can be installed using npm install, and most probably, the app can be built using npm run build and run using npm start.

PaaS services go even one step further and often offer direct GitHub, GitLab, or Bitbucket integrations to get an automated code deployment process. Take a look at AWS Elastic Beanstalk, Heroku, Google Cloud App Engine, and DigitalOcean App Platform.

Serverless

If your requirements are even lower, and you just need to run some code on the server safely and securely that can be accessed by your users and app, look no further than Serverless! Commonly known as functions or lambdas, they provide you with everything except your own code.

You don’t own the infrastructure, machine, and not even the runtime platform. You just upload a file with a function for handling HTTP requests, and in return, you receive an URL address. The cloud provider guarantees that if someone requests this URL, your function will be invoked and supplied with all the necessary information as arguments. That’s it!

Cloud providers are famous for offering solutions that combine CDN and Serverless in one product covering your project requirements from both the front-end and back-end, building a seamless developer experience, and taking care of DevOps work for you. Take a look at AWS Lambda, Google Cloud Serverless, and Azure Functions.

Our choice

Considering all of the described solutions, it may not be easy to decide which path to follow. Especially if you have just started thinking about your app. If you have a great idea in your head, but you are unsure how your app will evolve, it can be hard to decide where and how the app should be hosted to not slow down your innovation and allow for experimenting with new things. Additionally, once your app gains more attention, you need to take care of scaling it up.

We have a similar thought process at LiveChat about developers building their apps for our Marketplace, thanks to the LiveChat Developer Program. We wanted to offer a universal starter project which would provide flexibility and showcase how to integrate with our platform but at the same time is simple for development and deployment. How do you minimize the required time and effort to build and deploy your app?

We made a LiveChat Next.js App template. Using Next.js as a foundation for the project, we have a front-end app with built-in routing, Server Side Rendering (SSR), and Server Side Generation (SSG) built with React, but on top of that, ready-to-use API routes built in the form of Serverless functions. If you prefer Vue.js or Svelte, you can choose similar frameworks, like Nuxt.js and SvelteKit.

When it comes to deployment, thanks to excellent tooling support, using one of the aforementioned frameworks, you can deploy your entire application under a single project where the front-end will be distributed on the CDN and the back-end automatically deployed as Serverless functions. The services which offer such capabilities are Netlify and Vercel.

About the autor

Maciej Walaszczyk is a frontend developer and tech lead of OpenWidget. He’s the guy behind Chat Widget Adapters. You can follow him on Twitter or check out his work on GitHub.