Help hosting backend and frontend on same project

Hello, my github repo is https://github.com/luckycdev/housing

GitHub - luckycdev/housing: Website to display Hypixel Housing info

Website to display Hypixel Housing info. Contribute to luckycdev/housing development by creating an account on GitHub.

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

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.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

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

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:

https://vercel.com/docs/monorepos

vercel.com

Using Monorepos

Vercel provides support for monorepos. Learn how to deploy a monorepo here.

https://vercel.com/changelog/sync-projects-with-vercel-related-projects

Please let me know if you have any other questions!

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

For the domain, you could use this setup: https://vercel.com/guides/vercel-reverse-proxy-rewrites-external#reverse-proxying-with-rewrites

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.