How to Deploy Your First Full Stack App: Complete Guide
By Braincuber Team
Published on April 11, 2026
Building a full stack application is no small endeavor, and deploying it comes with its own host of things to consider. Whether you are using MEVN (MongoDB, Express, Vue, Node.js), MERN (MongoDB, Express, React, Node.js), or any other technology stack, moving from development to production requires careful planning. This complete tutorial walks you through the three key considerations before deploying your first full stack application, with practical examples and step-by-step guidance.
What You'll Learn:
- How to decide between combined or separate frontend/backend deployment
- Step by step guide to modifying code for production environment
- Beginner guide to configuring environment variables
- Complete tutorial on choosing deployment platforms
- How to handle CORS in production deployments
- Best practices for full stack app deployment
Frontend and Backend Deployment Options
One of the first questions you will face when considering production deployment is how to deploy the frontend and backend of your application. Should the client (or static files) live in the same place as the server and database? Or should they be separate, with the frontend making HTTP requests from elsewhere to the backend using CORS?
For better or worse, there is no one-size-fits-all solution to this question, as it will depend on your app's architecture and complexity.
Option 1: Deploy Frontend and Backend Together
If you have a simple application, you can deploy the whole stack in a single environment. For example, with a Heroku dyno, you can have the entire stack running with the following folder structure:
Single Folder Structure
All frontend and backend files live in the same location, with the Vue/React client built for production in a /dist folder.
Express Static Serving
Use Express middleware to serve static client files from the same server that handles API requests.
In Express, you can serve static client files from a particular folder with this configuration:
// Serve static frontend files
server.use(serveStatic(__dirname + "/client/dist"));
Option 2: Deploy Frontend and Backend Separately
Depending on your project's complexity, you may need to separate the frontend and backend and treat them as distinct applications. Your frontend can make calls to static API endpoints handled by the server:
getQuests: function () {
axios
.get('https://your-app.herokuapp.com/quests')
.then(response => (this.questData = response.data))
}
Technically, your client could be making those requests from anywhere, even a static GitHub Pages site. This separation can help you tackle each part as distinct entities.
CORS Note
If you are making cross-origin HTTP requests from a client on a separate domain from the API, you will need to configure CORS (Cross-Origin Resource Sharing) on your server.
Code Changes for Production Environment
When you are deep in the development process, it can be easy to lose track of how much of your code depends on local files or other local data. Your code will need to change to support a production environment.
Configuring Port Numbers
Consider the following in a locally-running server. On a local machine, the code asks the server to listen on a specific port:
server.listen(3000, () => console.log("Server started!"));
In a production environment, the server has no concept of where the "localhost" should be, or to whose port 3000 it should be listening. You will need to change your code:
const port = process.env.PORT || 3000;
server.listen(port, () => console.log("Server started!"));
The above instructs the server to listen at port 3000 of the process that is currently running, wherever that might be.
Fixing Module Import Paths
If you have modules that need to be imported by one another, you will need to use absolute paths in production. For example, if you have a router that needs to import a Mongoose schema:
const Quest = require('../models/quest');
In production, your server will not know where to find the root directory. Change your code to use path.join:
const path = require('path');
const Quest = require(path.join(__dirname, '../models/quest'));
Building for Production
You will want to build your frontend for production to optimize it for deployment. If you are using a bundler like webpack, Vite, or your framework's CLI, run the build command to generate optimized static files:
Build Frontend for Production
Run your bundler's build command (npm run build or similar) to generate optimized static files ready for deployment.
Configure Environment Variables
Set up environment variables for production database connections, API keys, and other sensitive configuration using process.env.
Test Production Build Locally
Before deploying, test your production build locally to catch any issues with the optimized version of your app.
Choosing a Deployment Platform
If you have deployed a frontend website or static app before, you might be familiar with just pushing your files to a remote repository. Deploying a full stack app is more complex. You will need a dedicated server, or something that emulates one, to respond to HTTP requests and work with an online database.
There are several services available, ranging based on price, scalability, complexity, and other factors. Here are the main options to consider:
| Platform | Best For | Complexity |
|---|---|---|
| Heroku | Small projects, learning deployment | Low |
| AWS | Career in DevOps, scalable apps | High |
| Docker/Kubernetes | Container orchestration, microservices | Very High |
| Azure | C#/.NET developers, Microsoft ecosystem | Medium-High |
Platform Details
Heroku
If you have a small project or just want to learn about deployment, Heroku is a good first step. It simplifies the process with easy Git integration and managed infrastructure.
AWS, Docker, Kubernetes
If you are seeking a career in full stack web development or DevOps, familiarize yourself with Amazon Web Services and container platforms like Docker and Kubernetes.
Azure
If you are a C# or .NET developer, Azure appears to be a seamless way to deploy apps without leaving the Microsoft ecosystem.
Database Addons
Consider any addons necessary to replicate your app's functionality. For example, use MongoDB Atlas or mLab for MongoDB databases in production.
Key Takeaway
Your app's success, as well as your own progress as a full stack web developer, depends on your ability to consider deployment options and create a successful pipeline for production.
Frequently Asked Questions
Should I deploy frontend and backend together or separately?
For simple apps, deploying together on platforms like Heroku works well. For complex applications, separating frontend and backend allows better scalability and maintenance. Choose based on your app's architecture needs.
What code changes are needed for production?
Key changes include using environment variables for port configuration (process.env.PORT), fixing module import paths to use absolute paths with path.join, and building your frontend for production.
What is the easiest platform for first-time deployment?
Heroku is the easiest platform for beginners. It offers simple Git-based deployment, free tier options, and handles much of the server configuration automatically.
Do I need to set up CORS for production?
Yes, if your frontend and backend are deployed on different domains. You will need to configure CORS on your server to allow requests from your frontend domain.
How do I handle database configuration in production?
Use cloud database services like MongoDB Atlas for MongoDB, or managed database services from your hosting provider. Store connection strings as environment variables, never in code.
Need Help with App Deployment?
Deploying full stack applications can be complex. Our experts can help you navigate deployment options, configure production environments, and set up your CI/CD pipeline for smooth deployments.