Deployment Guide

Overview

For deployment, it's very simple. This guide will walk you through deploying:

• Frontend: Next.js application on Vercel
• Backend: Node.js server on Railway

These platforms offer a good-to-generous free tier that is perfect for launching your SaaS application while keeping costs low during your initial growth phase. Although you can deploy your node.js backend on Vercel as well but I'd recommend using Railway for the backend.

Vercel and Railway both connect to your github repo and they automatically listen to changes and deploy your application when you push to github.

Frontend Deployment

1. Create a Vercel account

   Visit vercel.com and sign up using your GitHub account.

2. Connect your repository

   Import your repository from GitHub.

3. Configure project

   Select the frontend directory as your project root if your repository contains both frontend and backend.

   Set the root directory to frontend, go to Settings, Build and Deployment, then set the root directory to:

   frontend

4. No need to set environment variables, we don't have any environment variables for the frontend.
5. Deploy

   Click "Deploy" and Vercel will build and deploy your frontend application.

6. Create a custom domain

   Once deployed, Vercel will provide a URL for your frontend, but instead of using a random url, go to Settings then go to Domains and create a custom domain for your frontend yourdomain.com. Use the domain records provided by Vercel to add to your domain provider.

Backend Deployment on Railway

For the node.js backend, go to Railway, create an account, then a new project, and follow the steps to deploy your node.js application.

Railway is a modern platform for deploying Node.js applications with built-in infrastructure, database support, and easy scaling.

Steps to Deploy Backend

1. Create a Railway account

   Visit railway.app and sign up using GitHub.

2. Create a new project

   Click "New Project" and select "Deploy from GitHub repo".

3. Configure project

   Select your repository and set the backend directory as your project root. If you can't set the backend folder as your root directory, you can create a new repo and copy the folders and files inside the backend folder and connect that repo to Railway.

4. Set environment variables

   Add all variables from your backend .env file, click on the backend service instance you created on Railway and then go to Variables and add the variables one by one. Then click on Deploy or Redeploy Button to redeploy your backend with the new variables.

5. Deploy

   With every push to the main branch, Railway will automatically build and deploy your backend application.

6. Update the backend URL

   Once deployed, Railway will provide a URL for your backend, but instead of using a random url, it would be better if we create a custom domain for your backend api.yourdomain.com, using api. subdomain.

   Click on your backend service instance on Railway, then go to Settings then go to Networking section, you will find the random url that points to your backend server. Now create a custom domain with the subdomain api.yourdomain.com and make it point to your backend server. Railway will provide you with the appropriate Domain records to add to your domain provider.

   Once your configured the custom domain, you can now update your frontend backendUrl in configFront.js file to https://api.yourdomain.com in production.

   Make sure to make updates to your configFront.js and configBack.js files in the frontend and backend folders respectively after deploying to production, and then push the changes to the main branch and then they should be automatically updated in production.
   Test your application workflow in production before launching or announcing to the public.

Best Practices

• Test locally before deploying

  Make sure your application works correctly in your local environment first.

• Set up domain names

  Configure custom domains in both Vercel and Railway for a professional appearance.

• Enable logging

  Set up proper logging to help troubleshoot issues in production.