This guide explains how to deploy the Children's Church application with the backend API.
- Frontend: React + Vite (served as static files)
- Backend: Node.js Express API (running on port 3001)
- Database: JSON file-based storage
-
Navigate to the API directory:
cd /home/ishaglcy/public_html/yeladim.church/api -
Create a
.envfile from the example:cp .env.example .env
-
Edit the
.envfile:PORT=3001 NODE_ENV=production CORS_ORIGIN=https://yeladim.church
-
Install dependencies (if not already done):
npm install
-
Start the backend server:
node server.js
Or use a process manager like PM2 for production:
pm2 start server.js --name yeladim-api pm2 save pm2 startup
-
Navigate to the project root:
cd /home/ishaglcy/public_html/yeladim.church -
Install dependencies:
npm install
-
Build for production:
npm run build
-
The production files will be in the
distdirectory. Deploy these to your web server.
Add to your virtual host configuration:
<VirtualHost *:443>
ServerName yeladim.church
DocumentRoot /home/ishaglcy/public_html/yeladim.church/dist
# Proxy API requests to backend
ProxyPass /api http://localhost:3001/api
ProxyPassReverse /api http://localhost:3001/api
ProxyPass /health http://localhost:3001/health
ProxyPassReverse /health http://localhost:3001/health
# Serve React app for all other routes
<Directory /home/ishaglcy/public_html/yeladim.church/dist>
Options -Indexes +FollowSymLinks
AllowOverride All
Require all granted
# React Router support
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</Directory>
SSLEngine on
SSLCertificateFile /path/to/cert.pem
SSLCertificateKeyFile /path/to/key.pem
</VirtualHost>server {
listen 443 ssl http2;
server_name yeladim.church;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /home/ishaglcy/public_html/yeladim.church/dist;
index index.html;
# API proxy
location /api {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /health {
proxy_pass http://localhost:3001;
}
# React Router support
location / {
try_files $uri $uri/ /index.html;
}
}-
Check backend health:
curl http://localhost:3001/health
-
Test API endpoints:
curl http://localhost:3001/api/quiz/questions curl http://localhost:3001/api/notes
-
Visit the site:
https://yeladim.church
To run in development mode:
-
Start the backend:
cd api node server.js -
Start the frontend (in a new terminal):
npm run dev
The Vite dev server will proxy API requests to the backend automatically.