Deploy your own project management app on Vercel and Render for free
Tags: opensource, nextjs, node
Published: 2024-07-06 09:14:00

Hi everyone, It's Hudy again

Today, I just released the deployment guide for Namviek on youtube. So, if someone who need to deploy my app to run their team please check out the link below

{% embed https://www.youtube.com/embed/Pql94kF--4s?si=chMrQLf5baGYIJuC %}

For those who would like to scroll for fast, use this post intead. 

## Preparation

In order to deploy `namviek` to Vercel and Render we need to prepare accounts on the following services
- [Redis](https://redis.io/) - for caching
- [Mongodb Atlas](https://account.mongodb.com/account/login?nds=true) - for database
- Github Account - store the codebase
- [Firestore](https://firebase.google.com/) - for Gmail authentication
- [Vercel](https://vercel.com) - for frontend
- [Render](https://render.com) - for backend

## Deployment process

The deployment progress will implemented in 5 steps. That's a lot of steps for a deployment tasks I know. However, you need no coding skills for these step. Just copy and paste some configurations and follows exactly what I do.

### 1. Create Redis database

So, the first thing we need to do is that create Redis database. Please go to [use Redis cloud](https://docs.namviek.com/doc/use-redis-cloud) section and follow my instruction. The result of this step is you must to get the redis connection string as follow

```txt
REDIS_HOST=redis://default:ck7VLUkNQ*************GWeD@redis-18732.a293.ap-southeast-1-1.ec2.redns.redis-cloud.com:11077
```

### 2. Create database on Mongodb Atlas

Next, navigate to [Mongodb Atlas](https://account.mongodb.com/account/login) and create your own database as the following [instruction](https://docs.namviek.com/doc/installation#create-mongodb-atlas-database). After completing this process you will obtain the mongodb connection string in the following format.

```txt
MONGODB_URL=mongodb+srv://{user}:{pwd}@cluster0.weszq.mongodb.net/{dbName}?retryWrites=true&w=majority
```

If you want to secure your connection by restricting a specified Ip address, please visit [MongoDb Network Access](https://docs.namviek.com/doc/mongodb-network-access)

### 3. Deploy backend to Render

Now, it's time to deploy backend to Render. Open a new tab and visit [Render.com](https://render.com). Sign up a new account and just leave it. Go to my [repo](https://github.com/hudy9x/namviek?tab=readme-ov-file#deploy) and click on the __Deploy to Render__ button.

You will be redirect to the deployment page as following. Fill your `Blueprint Name` and environment variables.

![render-deploy-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvovpmb8p84bziu2ykho.png)

The env values should be like the below example.

```txt
JWT_REFRESH_KEY=287kjshkjshdf
JWT_SECRET_KEY=12981KJ1H23KJH

JWT_REFRESH_EXPIRED=4h
JWT_TOKEN_EXPIRED=30m
JWT_VERIFY_USER_LINK_TOKEN_EXPIRED=1h

NEXT_PUBLIC_FE_GATEWAY=https://test/v2/234234/clusters

MONGODB_URL=mongodb+srv://<user>:<pass>@cluster0.bswhjt.mongodb.net/demodb?retryWrites=true&w=majority
REDIS_HOST=redis://<user>:<pass>@redis-48362.c345.ap-southeast-1-1.ec2.redns.redis-cloud.com:19729
```

> `MONGODB_URL` and `REDIS_HOST` are important variables. So please input them exactly. The others are up to you.

Click on the `Apply` button to start deploying. 
Wait for Render deploy the app. If nothing wrong the output should look like below. Don't worry about the red line through

![render-deploy-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg6tf3rg1noq77dxwhcb.png)


#### Verify Render deployment process

Right after Render finishs the deployment process we have to verify it whether success or not. Head to __Mongodb Atlas__ > __Database__ > __Cluster__ > __Collections__. And find your database that you've created earlier. If you see a list of collections as the image below then congrats you succeeded.

![render-deploy-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxlj5sfv9w87niqfmqvn.png)



### 4. Deploy frontend to Vercel

Well, the last thing to run `namviek` is to deploy the frontend to Vercel. This will be quick i promise :D. 

Open your browser and go to my [repo](https://github.com/hudy9x/namviek?tab=readme-ov-file#deploy) and click on the `Vercel deploy` button. It will navigate you to the deploy page. Give it a name and press `Create` button. Then fill environment variables and press `Deploy` button.

![vercel-deploy-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rx21m7g33rc7x9gwyiy.png)


If you don't find the `NEXT_PUBLIC_BE_GATEWAY` please go to __Render.com__ and navigate to service's setting. You'll see the domain

![vercel-deploy-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw5ejxsg2oedgluasulm.png)



At last, if you're lucky the below screen will be displayed that means the deployment is success. LOL

![vercel-deploy-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbf083gdupbl44f3bo67.png)


### 5. Integrate Gmail authentication

Follow my instruction [here](https://docs.namviek.com/doc/gmail-auth) to integrate Gmail authentication

## Conclusion

Hope you found something helpful in this post. If you got any issues, please create an PR or go to my Discord server for help. Thank for reading.