Free platform to host your full stack application
Tags: webdev, react, nextjs
Published: 2022-11-11 04:49:34

Hello web developers!👋

Ever thought of where you can host your small scale full stack application completely for free? You heard it right! There are many services out there that supports developers by providing a free tier to their service. In this post, I'll be guiding you through the process of hosting it your application on these platforms.

**Note: I won't be going through how to build the frontend and backend. I'll only be showing you how to host your application**

Table of Contents:

- [Frontend](#frontend)
- [Backend](#backend)
- [MongoDB](#mongodb)


## Frontend
Since Next.js is popular for web development, I'll be using Next.js to demonstrate the deployment on Vercel. Vercel also supports hosting for CRA but it supports best for Next.js since this framework is created by the Vercel team. 

1. Create a repository on GitHub for your frontend app.
2. Log into your [Vercel](https://vercel.com) account and click on `Add new > Project`
<img src="https://i.imgur.com/rDJ5vV8.png" />
3. You should see something like this. Click on `Continue with GitHub`
<img src="https://i.imgur.com/DP6UyHJ.png" />
4. Find your project and click on `import` then click `Deploy`. **Note**: If your frontend application is inside a `frontend` folder, make sure to change `Root Directory` to `./frontend`. This will tell Vercel where to find your frontend application
<img src="https://i.imgur.com/UpTZ9HJ.png" />
5. That's it! You've successfully deployed your Next.js application on Vercel 🥳


## Backend
I'll assume that you are using [ExpressJS](https://expressjs.com/) for your backend server. The reason why we are using a separate server is because Vercel only allows your serverless function to run for up to 10 seconds in your Next.js app. If you requests manages to run within 10 seconds then you're free to use Vercel's serverless function but for most cases, you'll need to use ExpressJS as your requests will usually take more than 10 seconds to receive a response.

1. Create a repository on GitHub for your backend server. **Note**: If you don't want to create a new repository for your server, you can just host it together with your frontend repository. Just create a folder named `backend` and place your ExpressJS files in it.
2. Visit [Render](https://dashboard.render.com/) to host your server. Your dashboard should look like this:
<img src="https://i.imgur.com/qRY3XFR.png" />
3. You can select `New > Web Service`
<img src="https://i.imgur.com/GsbRkdi.png" />
4. Your repository should appear. Select `Connect` and it should automatically connect to your repository
<img src="https://i.imgur.com/SBgYQJi.png" />
5. Fill out all the necessary details. Make sure your `root directory` follows the name of the folder that your backend app is in. For mine, it's in `backend` folder.
<img src="https://i.imgur.com/XFzojnn.png" />
6. Scroll all the way down and click on `Create Web Service`. 
7. That's it. You've successfully deployed your backend server on Render

## MongoDB
NoSQL database seems to be very popular and MongoDB is the go-to for this. If you are looking to run your MongoDB instance for free, you should check out [MongoDB Atlas](https://www.mongodb.com/).

1. Create your account and verify it
2. Once you've done it, you should be re-directed to the dashboard here
<img src="https://i.imgur.com/pDTnRd1.png" />
3. Click on `Create Database` and select the free tier
<img src="https://i.imgur.com/qApwAAr.png" />
4. Select your configuration and click `Create cluster`
<img src="https://i.imgur.com/F026qYh.png" />
5. Create your user and your IP address then click `Finish and Close`
<img src="https://i.imgur.com/YBibELT.png" />
6. That's it. You've successfully created your MongoDB instance.
7. Now all you need to do is click on `Connect` and it should guide you on how to connect to your database instance.
<img src="https://i.imgur.com/u39kePc.png" />

**Note**: Since you're hosting your server on render.com, you need to configure your network access so that your server can connect to your database when you host it online.
<img src="https://i.imgur.com/DLMHuX9.png" />


I hope that you like this short write up and continue building your MVP on these free platforms 🥳