Deploying a Vue app on Digital Ocean
I have a Vue app using Manifest for the backend. I want to deploy it on my DigitalOcean droplet.
I have got the codebase on my droplet, and when i run
npm run start:prod I am able to access the admin panel. However, I am not sure if Manifest is also supposed to start the Vue app? I have the PUBLIC_FOLDER env value set to ./dist, so I am not sure what else to do or where else to look.
Any help is appreciated, thanks!7 Replies
Hello @silkydaboi yes you can install the frontend and backend on a Digital Ocean droplet.
I guess you have a monorepo where you have your Manifest backend in a folder and probably your Vue frontend in another.
What do you usually use for deployment on those droplets ? Docker ? A PaaS like Coolify ? Or you setup manually GIT / NGINX and so on ? Depeding on that answer I will be able to answer
Right now I am just doing things manually with Git, but I would also consider Docker if that makes things easier. I have attached an image of my top-level folder structure to help calrify things
@brunobuddy if it is any help, i also have a rails app running on the same droplet using kamal
Understood.
First of all I recommend to distinguish between the Manifest and the vue app. If you want to keep them in the same repo you can create "server" and "client" folders (or anything you want: backend/frontend...). You can use the
npx create-manifest@latest server for your app root to create the server folder and install Manifest in it, then you can copy your manifest.yml file.
Then you need to serve Manifest to a port. You can change the port number using PORT=4000 for example in your .env file.
Last but not least you will need a webserver like nginx to set the URL for each of your different apps. You may find it easier to deploy with DockerOk, thanks for letting me know! I'm going to move the Manifest app to another directory and let you know if I need more help. In the docs I saw that I could run
npx add-manifest to add it to an existing front-end app, so that is what I did. maybe i did something wrong along the way?@silkydaboi yes this was the old command, I see that there is still some occurrences on the docs, I am going to remove it
for my vue app, should i put all of the Vue code into the client folder, or can i just treat the
dist folder as the client folder?