Conquering Deployment with Nest.js and React

Hi folks! Today, I'm thrilled to share the tale of my latest side project, a harmonious blend of Nest.js and React, running seamlessly and, believe it or not, entirely free of charge! With a dash of spare time and a sprinkle of ingenuity, I crafted this leveraging Nest.js's backend prowess and React's dynamic frontend capabilities.

App Overview

But let's dive into the heart of the matter, the app itself. Picture this: users can register via Google authentication, create organizations, invite employees, and seamlessly book meeting rooms within said organizations. And here's the kicker each booking automatically syncs with Google Calendar and generates a Google Meet link. It's a meeting room management marvel, powered by Supabase underneath.
Repositories are both on GitLab!

Now, let's talk deployment.

Deployment Chronicles: Nest.js on Render.com

Deploying Nest.js on Render.com was a breeze. I simply registered, clicked "Add New," selected "Web Service," connected my GitLab repo, and voila! With a few configuration tweaks—setting the build commands, environment variables, and opting for the free plan—the deployment commenced. And guess what? It was smooth sailing from there. With each Git push to the main branch, Render.com triggers a build and deploys my Nest.js backend effortlessly. Plus, it even provides a handy domain associated with the web service—perfect for API usage in my React app!

Deployment Chronicles: React with React Router on GitLab Pages

Now, deploying React on GitLab Pages wasn't quite as straightforward as Nest.js, but fear not! With a bit of configuration in project settings specifying environment variables and the new URL associated with my Nest.js backend on Render.com I was ready to roll. After clicking "Deploy" and selecting "Pages," I set up my .gitlab-ci.yaml file to ensure that every Git push triggers the pipeline and deploys the artifact. Voila! My React frontend was up and running, with GitLab Pages providing a URL for easy access.

Here the yaml file I configured:

# The Docker image that will be used to build your app
image: node:18.19.0
# Functions that should be executed before the build script is run
build:
  stage: build
  script:
    - npm install
    - npm run build  # Generate production build
  artifacts:
    paths:
      - build/

pages:
  script:
    - cp -r build/* public/
    - cp public/index.html public/404.html # Required for React Router 
  artifacts:
    paths:
      # The folder that contains the files to be exposed at the Page URL
      - public
  rules:
    # This ensures that only pushes to the default branch will trigger
    # a pages deploy
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

And there you have it, the tale of my side project's triumphant journey from development to deployment, all without spending a dime! With Nest.js and React leading the charge, the possibilities truly are endless. Happy coding! 🚀

Photo by 夜 咔罗 on Unsplash