Help Automating Vue App Deployment to Prod/Dev

Hey all, I could really use some help!

I’ve been coding for a while now, but I’ve always manually deployed to production and development environments. I’d love to automate this process if possible.

Here’s the situation: I’m working with a Vue front-end and regularly push updates to a Git repo. I’ve got two branches—Main and Dev. When I want to deploy, I run the build command, grab the contents of the dist folder, and upload it to my webhost.

I’ve set up subdomains: app.domain.com for production and dev.domain.com for dev, and so far, this method has worked well.

Now, what I’d love to figure out is how to get the web server to automatically copy the dist folder content from the Git repo to the webhost. That way, I can just focus on coding and pushing changes. Any ideas on how I can get this automated?

Thanks in advance!

7 Likes

Hey, sounds like you’re looking for a CI/CD pipeline! You can use something like GitLab CI or GitHub Actions to automate the whole process. Every time you push to your Main or Dev branch, the pipeline can trigger a build, and once that’s done, it can deploy directly to your server. Check out the docs for either platform, it should have everything you need!

4 Likes

If you’re already hosting on a web server, setting up something like Rsync + cron jobs could work too. Basically, you’d configure a cron job to run at certain intervals, and Rsync will sync the content from your Git repo’s dist folder to the server. Easy and low-maintenance!

4 Likes

Another option to consider is FTP with Git hooks. You can create a post-push hook that automatically uploads the dist folder contents via FTP to your hosting whenever you push to the Main or Dev branch. It’s an older method, but still gets the job done.

4 Likes

If you’re up for using Docker, you could containerize your app and use something like Docker Swarm or Kubernetes to manage deployments. Every time you push to Main or Dev, you’d trigger a new build and the container would be automatically deployed to your server. Docker might add a little complexity, but it’s super powerful once you get the hang of it.

4 Likes

Why not use Netlify or Vercel for deployment? They automatically deploy from your Git repo when you push changes. It’s especially easy for front-end projects like Vue. You can link both your production and dev branches to their respective subdomains, and boom—automated deployment!

3 Likes

Take a look at PM2 for deployment automation. You can set up a simple script using PM2 to handle deployments for your Vue app. Combine that with a webhook from Git to trigger the deployment when changes are pushed, and you should be golden.

2 Likes

Wow, thank you so much for all the suggestions, everyone! I didn’t even think about CI/CD pipelines, and Rsync with cron jobs sounds like a simple way to handle it. I’ll definitely check out PM2, and maybe even explore Docker when I have more time.

Y’all have given me a lot to think about. Thanks again!