Sharan Panthi

Developing full-stack applications often involves running both backend and frontend projects simultaneously. For developers using Windows Subsystem for Linux (WSL), managing these processes efficiently can be a challenge, especially when you want your apps to start automatically and run reliably in the background.

In this article, we'll walk through setting up a Django backend and a React frontend (built with Vite) to run as background services using systemd on WSL. This setup ensures your applications launch on system startup and stay running without manual intervention — making your development environment more seamless and production-like.

Whether you’re building APIs with Django or modern UIs with React, this guide will help you automate your workflow and better manage your full-stack projects on WSL.

1. Understanding the Need for systemd Services on WSL

Why manage your apps with systemd?

Systemd is a system and service manager for Linux systems. It allows you to manage processes (like your Django and React apps) as services, which means they can start automatically when your system boots and restart if they crash. This is particularly useful in a development environment where you want your applications to be always available without manually starting them each time.

Benefits of running Django and React as services

Automation: Services start automatically on system startup.
Reliability: Systemd can restart your services if they fail.
Background operation: Your apps run in the background, freeing up your terminal for other tasks.
Production-like environment: Mimics how applications are managed in production, making it easier to transition from development to deployment.

2. Preparing Your Environment

Before setting up the services, ensure your WSL environment is ready.

Installing Python venv and Node.js tools on WSL

Update your package list:
```
sudo apt update
```
Install Python virtual environment tools:
```
sudo apt install python3-venv
```
Install Node.js and npm (if not already installed):
```
sudo apt install nodejs npm
```

Organizing project directories

For this guide, we'll assume your projects are organized as follows:

Django backend: ~/projects/drf-blog
React frontend: ~/projects/drf-blog-frontend

Make sure your projects are placed in these directories or adjust the paths accordingly in the steps below.

3. Setting Up the Django Backend Service

Creating and activating a virtual environment

Create a virtual environment for Django:
```
python3 -m venv ~/.venvs/django
```
Activate the virtual environment:
```
source ~/.venvs/django/bin/activate
```

Installing dependencies

Navigate to your Django project directory:
```
cd ~/projects/drf-blog
```

Install the required dependencies:

pip install -r requirements.txt  # or manually install django gunicorn

Testing Gunicorn manually

Before setting up the service, test Gunicorn to ensure your Django app runs correctly:

gunicorn blog_backend.wsgi:application --bind 0.0.0.0:8000

If successful, you should see output indicating the server is running. Stop the server with Ctrl+C after testing.

Creating a systemd service file for Django

Create a new service file:

sudo nano /etc/systemd/system/django.service

Paste the following configuration:

[Unit]
Description=Django Application
After=network.target

[Service]
User=<WSL username>
Group=<WSL username>
WorkingDirectory=/home/<WSL username>/projects/drf-blog
ExecStart=/home/<WSL username>/.venvs/django/bin/gunicorn blog_backend.wsgi:application --bind 0.0.0.0:8000
Restart=always

[Install]
WantedBy=multi-user.target

Starting and enabling the Django service

Reload systemd to recognize the new service:

sudo systemctl daemon-reexec
sudo systemctl daemon-reload

Enable the service to start on boot:
```
sudo systemctl enable django.service
```
Start the service:
```
sudo systemctl start django.service
```
Check the service status:
```
sudo systemctl status django.service
```
You should see the service is active and running.

4. Setting Up the React Frontend Service with Vite Preview

Installing npm dependencies

Navigate to your React project directory:
```
cd ~/projects/drf-blog-frontend
```
Install the required dependencies:
```
npm install
```

Building the React app

Build your React app for production:

npm run build

Running Vite preview manually to verify

Update your package.json to allow Vite preview to bind to all interfaces:
```
"scripts": {
  "preview": "vite preview --host"
}
```
Test the preview manually:
```
npm run preview
```
You should see output like:
```
➜  Local:   http://localhost:4173/
➜  Network: http://<your-ip>:4173/
```
Stop the preview with Ctrl+C after verifying.

Creating a systemd service file for the React app

Create a new service file:

sudo nano /etc/systemd/system/react.service

Paste the following configuration:

[Unit]
Description=React App Production Preview
After=network.target

[Service]
User=<WSL username>
Group=<WSL username>
WorkingDirectory=/home/<WSL username>/projects/drf-blog-frontend
ExecStart=/usr/bin/npm run preview
Restart=always
Environment=NODE_ENV=production
Environment=PATH=/usr/bin:/usr/local/bin

[Install]
WantedBy=multi-user.target

Enabling and starting the React service

Reload systemd to recognize the new service:

sudo systemctl daemon-reexec
sudo systemctl daemon-reload

Enable the service to start on boot:
```
sudo systemctl enable react.service
```
Start the service:
```
sudo systemctl start react.service
```
Check the service status:
```
sudo systemctl status react.service
```
Ensure the service is active and running.

5. Testing and Verifying Both Services

Checking open ports

Verify the Django backend is listening on port 8000:
```
ss -tuln | grep 8000
```
Verify the React frontend is listening on port 4173:
```
ss -tuln | grep 4173
```

Accessing apps via browser

Access the Django backend:
- Open your browser and go to http://localhost:8000 or http://<your-wsl-ip>:8000.
Access the React frontend:
- Open your browser and go to http://localhost:4173 or http://<your-wsl-ip>:4173.

Debugging common issues

Service not starting: Check the service logs with sudo journalctl -u <service-name>.
Port conflicts: Ensure no other processes are using ports 8000 and 4173.
Permission issues: Verify that the user specified in the service files has access to the project directories.

6. Next Steps and Best Practices

Serving React with Nginx for production: For a production environment, consider serving your React app with a web server like Nginx for better performance and security.
Proxying frontend and backend under one domain: Use a reverse proxy (e.g., Nginx) to serve both the frontend and backend under a single domain, simplifying API calls and improving user experience.
Automating with Docker (optional): Docker can further streamline your development and deployment process by containerizing your applications, making them easier to manage and deploy.

By following these steps, you’ve successfully set up your Django backend and React frontend to run as background services on WSL using systemd. This setup not only automates your development workflow but also provides a more reliable and production-like environment for your full-stack projects.