Upgrade Your Express.js App: Add a Frontend Seamlessly with Genezio

In this short guide, you’ll learn how to add a frontend to your Express.js app with Genezio Cloud in a few easy steps.

Express.js is widely used by developers for building APIs and backend services due to its simplicity and flexibility. However, as applications grow, managing servers and scaling them efficiently becomes a challenge. This is where serverless architecture shines—by offloading server management to the cloud, it allows you to focus on building features while platforms like Genezio handle scalability, performance, and costs automatically.

When it comes to adding a frontend, the traditional approach can be tricky. Setting up separate servers for backend and frontend, managing CORS policies, and coordinating deployment pipelines can slow you down. But with Genezio, you can easily deploy both the frontend and backend as part of the same project. This seamless integration improves your development workflow, making it easier to focus on building features rather than managing infrastructure.

Alright, let’s get started.

Prerequisites

To start this tutorial, make sure you’ve downloaded and installed the following tools:

• Node.js
• Npm

Note: we recommend you use NVM to manage NodeJs and NPM versions. After installing nvm, you can quickly get any node version by running nvm install <node_version>.

Create a demo Express.js application

If you already have an Express.js application, you can skip this step.

First, let’s deploy an Express Getting Started template using this link . We recommend deploying it using your GitHub account so that Genezio can create a repository for your project.

Once the application is deployed, clone it locally:

npm install genezio -g
git clone https://github.com/<your_id>/express-getting-started
cd ./express-getting-started

Prepare the project folder structure

Create a new folder for the backend and move all the backend-related files into it.

Here’s how you can do this from the command line, though feel free to use your preferred IDE:

mkdir backend
mv index.mjs package.json package-lock.json ./backend

Create the frontend application

For this tutorial, we’ll create a basic Rect Application with Vite. Learn more .

You can use the following command:

npm create -y vite@latest frontend -- --template react-ts

This will generate a TypeScript-based React frontend in a frontend directory.

Update the genezio.yaml configuration file

We need to modify the genezio.yaml file - add the frontend application and update the path to the backend application.

After the changes, your configuration should look like this:

name: express-getting-started
region: us-east-1
yamlVersion: 2
backend:
  cloudProvider: genezio-cloud
  functions:
    - entry: index.mjs
      handler: handler
      name: express-getting-started-function
      path: ./
      type: aws
  language:
    name: js
    packageManager: npm
  path: ./backend # We changed the path to point to the backend folder
  scripts:
    deploy:
      - npm install
    local:
      - npm install
# We added the frontend configuration
frontend:
  # Environment variables for the frontend
  environment:
    # The URL of the backend API
    VITE_API_URL: ${{ backend.functions.express-getting-started-function.url }}
  path: ./frontend # path to the frontend folder
  publish: dist # Path to the build folder within the frontend folder
  # Scripts to build and deploy the frontend
  scripts:
    build: npm run build
    deploy:
      - npm install
    start:
      - npm install
      - npm run dev

• The backend path is set to ./backend.
• The frontend path is set to ./frontend.
• We also added a VITE_API_URL environment variable to connect the frontend to the backend.

Test your full-stack project locally

With everything set up, you can now take advantage of Genezio’s smooth local development experience. Running both your frontend and backend simultaneously is as easy as one command:

genezio local

You should see the output with URLs like this:

• Backend URL: http://localhost:8083/.functions/function-express-getting-started-function
• Frontend URL: http://localhost:5173/

Deploy your project

To deploy the full-stack project to Genezio, simply push your changes to the GitHub repository:

git add .
git commit -m “Added frontend to my backend project”

Genezio will automatically create a new deployment when you push the changes to the Github repository of the project. You can find the link to your deployed frontend in the Genezio Dashboard once the deployment is finished.

Next steps

Now that your full-stack project is up and running, you can start building awesome features. Genezio also provides other useful services like user authentication, cron jobs, and database management, which you can integrate into your project seamlessly.

Conclusion

By using Genezio Cloud, you’ve not only added a frontend to your Express.js app effortlessly, but you’ve also unlocked a serverless platform that scales with your needs. From seamless integration to automatic deployment, Genezio makes full-stack development faster and easier. So go ahead, push your code to the next level, and explore the endless possibilities with Genezio.

Happy coding, and good luck with your future projects!