In a recent development endeavor, we embraced the Backend For Frontend (BFF) architecture and discovered a crucial NPM package that became an invaluable asset—details on this gem will follow. Our chosen technology stack included Fastify for our REST API and static file handling, React powered by Vite for front-end development, and Mantine to simplify the complexities of UI design.
We utilized Google App Engine for its deployment capabilities, taking full advantage of its robust features to optimize our workflow. This guide is designed to share insights and provide a detailed walkthrough of the technologies we implemented and the steps involved. Whether you’re a seasoned developer or new to the field, join us as we explore the process of deploying a modern web application.
** First, ensure NodeJS is installed by following the setup instructions for your operating system. **
Creating a FastifyJS Backend Server
Begin by globally installing fastify-cli via npm:
This CLI tool provides a structured and opinionated template for Fastify projects. To create a Fastify application:
Alternatively, install Fastify and organize the application files as you see fit. **
Directories such as ‘plugins’ and ‘routes’ organize server extensions and application routes, respectively. We chose Fastify because it is significantly faster than alternatives like Express or Koa, supports asynchronous functions natively, is well-supported, and offers a plethora of ready-to-use plugins.
Creating a Vite and ReactJS Frontend Application
Initiate your frontend project with:
Select the react-typescript preset when prompted. We use SWC as our bundling and compiling tool due to its efficient performance, thanks to its Rust-based core.
It’s advisable to create a “Components” folder and a “Pages” folder for better organization in SPAs (Single Page Applications). Remove unnecessary files and folders such as “App.css“, “index.css“, and the assets folder. Then, install the necessary dependencies:
Mantine, a comprehensive React component library, accelerates development with its wide range of components and detailed examples. Mantine React Table, built atop TanStack Table, offers extensive features like sorting, filtering, and pagination.
Configuring Vite for Different Environment Builds
Our Fastify server will also serve the static files for our React app, necessitating different configurations for development and production environments. For development:
Create .env.development and .env.production for development and production environments, respectively. The vite.config.js file remains as:
Overview of Mantine React Table
Mantine React Table efficiently handles complex data management needs in admin dashboards, offering functionalities like custom filtering and column visibility:
Using Fastify as a Static File Server for Your React Build
Install and configure fastify-static to serve your React application:
Set a 404 handler to always return the “index.html” file for any unknown routes.
Dockerizing Your Application with Multi-Stage Builds
Our Dockerfile encompasses a frontend build stage, a backend build stage, and a final production stage combining both:
Deploying to Google App Engine
Create an Artifact Registry, configure Cloud Build, and deploy using:
Create an Artifact Registry, configure Cloud Build, and deploy using:
We hope this guide has illuminated the path to deploying a React-NodeJS application using Google App Engine, showcasing the effective use of tools like Fastify, Vite, and Mantine. This journey through setting up, developing, and deploying a full-stack application is just the beginning. Each technology offers extensive capabilities and opportunities for optimization and creativity.
If you’re looking to deepen your understanding or need expert advice on navigating your next project, the Oredata team is here to help. Contact us for more information.
Author: Baran Hacıoğlu, Software Developer at Oredata