How to Deploy your fullstack website - My approach

Building full-stack applications is increasingly common today, whether for personal projects or portfolios or small businesses. However, finding affordable hosting can be tough, especially for those who prefer free services. Luckily, several platforms offer free hosting, allowing developers to deploy their full-stack applications. In this article, I am going to be sharing some of the ways and platforms that I host my full-stack application for free. Let's dive right in 😉

NOTE - I want to clarify that I am not receiving compensation or sponsorship from any of the mentioned services. The advice I will be sharing is from my experience as a freelancer and how I personally host my web applications.

💡 As we advance, I may interchangeably refer to full-stack websites and full applications, but the essence remains unchanged.

What is a full-stack application?

A full-stack application includes both frontend and backend components, covering all aspects of web development. Let's break them down 👇🏽

1. Frontend: The frontend refers to the client-facing aspect of a website, consisting of the user interface (UI) and user experience (UX). It includes HTML for structure, CSS for styling, and JavaScript for interactivity. And this is where you can also use a library like React or Vue.
2. Backend: The backend serves as the engine behind the scenes, handling data processing, storage, and communication with the frontend. It consists of server-side programming languages (e.g., Node.js, Python, Ruby) and databases (e.g., MySQL, MongoDB, PostgreSQL).

Ways of Hosting your full-stack applications

So the way I host my full-stack applications is more like separation of concerns. I host the frontend part on netlify or vercel (which I barely use) and I host the backend Api or database on these platforms which we are about getting into 👇🏽

💡 I'd like to emphasize that all the platforms I'll be sharing are fantastic, despite having certain disadvantages or limitations.

1. Render

Render is a platform for deploying applications built with diverse technologies such Node.js, Python, Ruby, Go. It also scales your application's resources up or down based on traffic demands.

This platform is excellent for hosting your full-stack applications, although I've personally only utilized it for backend services so far. Deploying your backend service to it is relatively straightforward, and it offers a convenient free tier with some limitations, which we'll discuss shortly.

So the downside of the free tier is that is goes down after 15 minutes of inactivity ( if your website is not getting any traffic ) and takes about 30 seconds to spin back up which is not really a good experience if you have website like on your portfolio because not everyone have the patience to wait that long. However they also made it clear in their documentation that

“Free instances have important limitations, and you should not use them for production applications. However, they’re perfect for testing out a new technology, working on a hobby project, or previewing Render’s developer experience!”

💡 This was the initial service I utilized for hosting my first full-stack application. Initially, I didn't find it very enjoyable when I started noticing the 15-minute inactivity issue on my website (believe me, it's a really frustrating experience, especially if you have a website like that on your portfolio). To add to the frustration, I wasn't aware that Render provides 750 free instance hours to each user and team per calendar month. If you exceed either usage limit (instance hours or outbound bandwidth) during a given month, all of your Free web services become suspended for the remainder of that month. This is why you must always read the docs😅.

Here is the link to the docs

After a month, my free tier expired, and my backend services were suspended, prompting me to either upgrade to a paid plan. So I had to look for another alternative which was Railway

2. Railway

Railway is a platform that provides hosting solutions for full-stack web applications. It offers developers an easy way to deploy and manage their applications without worrying about infrastructure management. it also supports various programming languages, frameworks, and databases, making it suitable for a wide range of projects. it also simple to use and it also has a free tier which is has a little benefit than Render.

One aspect I particularly appreciate is that your website doesn't necessarily have to go down after 15 minutes of inactivity. Instead, Railway takes steps to optimize resource utilization. This may involve:
• Reducing resource allocation: Lowering the CPU and memory available to the application to free up resources for other active applications.

But in a nutshell you won’t really notice the difference when you visit you website after an extended period of time.

The only limitation with the free tier is that it provides either $5 (no credit card required) or 500 hours of resources. Once these resources are depleted, Railway will fully pause your application to conserve resources and prompt you to consider a paid plan.

💡 I made sure to read the documentation thoroughly before migrating my database and backend API to Railway this time, so I was well-prepared for what to expect. Migrating my database from Render to Railway turned out to be much easier than anticipated, especially since I had initially built my backend with Strapi, a headless CMS utilizing PostgreSQL as one of its databases. After successfully migrating my data and getting my website up and running, I knew I needed to find an permanent solution before reaching the limit of $5 or 500 hours (which took longer than I expected). But I eventually found a permanent solution by using Sanity. Let me know in the comments if you'd like an article detailing the migration process!

3. Sanity

Sanity is a flexible and customizable headless content management system (CMS) designed to empower developers and content creators to build digital experiences. It has a free plan which includes a hosted, real-time content database which means you don’t have to go through the stress of looking for a backend service to deploy your backend Api.

💡 To be honest when I read the docs and saw that it has a hosted, real-time content database (which is called Sanity Studio) I was really relieved. So I had to migrate my entire code from Strapi to Sanity which took longer but the stress was worth it. And to be honest I have basically been using it to build majority of my projects.

However, if you're utilizing the MERN stack and seeking a platform for deploying your web application, then Cyclic is definitely worth exploring.

4. Cyclic

Cyclic is a platform that provides hosting solutions primarily tailored for full-stack JavaScript or Node.js applications, with beta version support extending to other languages like Python and Go. it is also very easy to use to deploy your backend endpoints and variables; all you need to do is connect your GitHub repository and manage your environment variables. It also has a generous free tier (the most generous I have seen so far). It is free forever and there is no Inactivity or delay of any sort.

However, similar to others, the free tier does come with a limitation: you can only deploy one application. Therefore, if you plan on deploying multiple applications, upgrading to a paid plan is necessary.

💡 My experience with Cyclic was generally smooth, except for the limitation of only being able to deploy one application. Nonetheless, I would suggest it, particularly for newcomers to deploying MERN stack applications who prefer not to pursue the serverless approach.

While Cyclic provides a solid hosting solution for MERN stack applications, it's beneficial to explore alternatives like serverless functions. These functions are pieces of code that execute in a cloud environment and are managed by a cloud provider.

Platforms such as Vercel and Netlify offer serverless functions, presenting a cost-effective and scalable method for managing dynamic functionalities in your application, such as user authentication, payment processing, and email notifications.

Serverless functions excel in constructing lightweight API backends and implementing webhooks for seamless integration with external services. They handle HTTP requests efficiently, perform data validation, and interact seamlessly with databases or third-party APIs.

💡 Personally, I've primarily utilized serverless functions, particularly Netlify functions, for smaller projects. However, I wouldn't recommend them for larger projects, such as e-commerce websites.

Conclusion

That’s all guys and thank you for sticking around and reading the article through to the end 🎉 🎉. I didn't cover many other services simply because I haven't had the chance to use them yet. However, I'm eager to hear about the services or platforms you rely on for deploying full-stack applications. Feel free to share your experiences in the comment section below.

Also feel free to connect with me on Twitter, LinkedIn, or GitHub if you have any questions or projects you'd like to collaborate on.

See you next week and have an amazing weekend 😃