Help hosting backend and frontend on same project

Help
1

Hello, my github repo is GitHub - luckycdev/housing: Website to display Hypixel Housing info
It has 2 folders: server/ and website/
The website folder should be the root of the domain
Inside of the server folder, .env should be created with a variable, and node server.js should be ran
The reason I want them on the same project is because I want them to be on the same domain. (housing.luckyc.dev as site and then housing.luckyc.dev/api as api)
Here is my current setup with nginx on a VPS:

server {
    listen 443 ssl;
    server_name housing.luckyc.dev;

    ssl_certificate /etc/letsencrypt/live/housing.luckyc.dev/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/housing.luckyc.dev/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

location /api/ {
proxy_pass http://127.0.0.1:3000/api/;
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 / {
root /home/ubuntu/housing/website;
index index.html;
try_files $uri $uri/ =404;
}
}

I would also like to learn how to make it into a deploy button, so users can just click the deploy button, enter their .env api key, and it just works

2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

4

Easiest to run the frontend and backend as their own projects since you’ve already got them split like that.

Some docs and guides to get you started:

Please let me know if you have any other questions!

5

Can they be on the same domain (one using /api) and can I have a deploy button that does everything for the user?

6

For the domain, you could use this setup: Can I use Vercel as a reverse proxy?

You could use a separate deploy button for the frontend and backend projects. Or you could build something custom if your audience needs an all-in-one solution. The API or CLI would help with that.

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.