Frontend Deployment

This guide provides two options for deploying your frontend: using Railway (which deploys frontend, backend, and MongoDB together) or Vercel (frontend-only deployment).

Option 1: Railway

Railway is an all-in-one platform for deploying full-stack applications, including the frontend, backend, and database. You can use the provided template for a seamless deployment experience.

Steps to Deploy

  1. Click the following link to access the pre-configured template:Railway Deployment Template.
  2. Sign in or create an account on Railway.
  3. Fork the template by clicking "Deploy Now."
  4. Disconnect the repo of the frontend service and connect it to your cloned version of MatureStack.
  5. Update environment variables as needed, including MongoDB connection strings for the backend.
  6. Click "Deploy" and wait for the services to be deployed. Railway will automatically deploy the frontend, backend, and MongoDB.

Once deployed, Railway provides a unique URL for your application.

Option 2: Vercel

Vercel is a platform optimized for frontend deployments. It is the simplest way to deploy your Next.js frontend.

Steps to Deploy

  1. Push your frontend code to a Git repository (e.g., GitHub, GitLab, or Bitbucket).
  2. Visit Vercel and sign in or create an account.
  3. Click "New Project" and import your repository.
  4. Configure the build settings (usually nothing to be done):
    # Default build settings for Next.js
    Framework: Next.js
    Build Command: next build
    Output Directory: .next
  5. Set the environment variables required for your frontend (if any):
    NEXT_PUBLIC_API_URL
    NEXT_PUBLIC_APP_URL
    NEXT_PUBLIC_POSTHOG_HOST
    NEXT_PUBLIC_POSTHOG_KEY
  6. Click "Deploy" and wait for the build process to complete.

Once deployed, Vercel will provide a URL for your frontend application, and it will automatically manage previews and production builds for you.

Best Practices

  • Use separate environments (e.g., staging and production) for testing and production-ready deployments.
  • Monitor logs and metrics for both Railway and Vercel deployments to ensure performance and reliability.
  • Regularly update your dependencies and deployment settings for security and compatibility.

For further assistance, refer to the official documentation of Railway and Vercel.

MatureStack LogoBuilt with MatureStack