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:
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!
Article contents
Subscribe to our newsletter
Genezio is a serverless platform for building full-stack web and mobile applications in a scalable and cost-efficient way.
Related articles
More from Tutorials
How to Use Genezio with Express for Easy and Error-Free API Management
Bogdan Vlad
Apr 10, 2024