What the app includes
The Email Clean stack includes:- a frontend on
http://localhost:3000 - a backend API on
http://localhost:3001 - MongoDB on the internal Docker network
/api/v1. In local development, Next.js rewrites forward requests from the frontend origin to the backend, so requests sent to http://localhost:3000/api/v1/* are routed to http://localhost:3001/api/v1/*. Because of that, the preferred local API base URL is http://localhost:3000/api/v1.
In production, the public app URL is https://email-clean.grorapid.com/, and the API base URL is https://email-clean.grorapid.com/api/v1.
Before you start
Make sure you have:- Docker Desktop, or Docker Engine with Compose support
- a prepared
backend/.envfile in the application repository
backend/.env.example.
Prepare your environment
Set the backend env values so the containers can talk to each other correctly:--env-file backend/.env. Compose resolves values like ${DB}, ${DB_USER}, and ${DB_PASSWORD} before the containers start, so this flag keeps backend/.env as the single source of truth.
For Docker runs, the frontend should target the backend through the Docker network:
Install and run in development mode
Use development mode first if you want the full stack with hot reload.Run the production-style stack
Use this mode when you want a production-like local stack.http://localhost:3000, and the backend stays on the internal Docker network.
Verify the installation
After the containers start, check these URLs:- frontend:
http://localhost:3000 - direct backend:
http://localhost:3001 - preferred API base path through the app:
http://localhost:3000/api/v1 - production app:
https://email-clean.grorapid.com/ - production API base path:
https://email-clean.grorapid.com/api/v1
/api/v1. Next.js rewrites will pass that request through to the backend.
You can also call the health endpoint to confirm the API is reachable:
Reverse proxy
If you want to expose the app on a public domain, place Nginx in front of the frontend on port3000. Keep the proxy target on 127.0.0.1:3000, not 3001, so the Next.js app stays the public entrypoint and continues routing /api/v1 requests to the backend through rewrites.
How to add Nginx as a reverse proxy
-
Install Nginx, Certbot, and the Certbot Nginx plugin on your Ubuntu server.
-
Make sure your domain points to the server and that ports
80and443are open in your firewall. -
Create an Nginx site file such as
/etc/nginx/sites-available/email-clean.grorapid.com. -
Add an initial HTTP-only server block like this and update the
server_nameif you are using a different domain: -
Enable the site and reload Nginx. If the default site is enabled, remove it first so it does not conflict.
-
Request and install the TLS certificate with Certbot.
-
After Certbot succeeds, your final config will look similar to this:
-
Open
https://email-clean.grorapid.com/and confirm the app loads through Nginx and that requests to/api/v1still work from the same origin.
Troubleshooting
If port3000 or 3001 is already in use, free that port or update the host port mapping in the relevant Compose file.
If you change dependencies in either app, rebuild the stack before testing again:
