3 ms·

Does anyone have a solution for a situation where I have a Django backend and a VueJS front end and want to run the Vue build step before deploying? Currently d

Does anyone have a solution for a situation where I have a Django backend and a VueJS front end and want to run the Vue build step before deploying? Currently doing this with Git hooks and committing the resultant build, but that is bad for a number of reasons. This is running on Heroku. Would their release phase allow for this without significantly slowing things down? Would it deal with npm installs?

drdaeman 9y ago
We have this with GitLab CI, although with React and not Vue (but I don't think this matters). We have two stages, `build-assets` and `build-app`, first one runs Webpack etc, and the second one copies the build artifacts into a Docker image with Django and finalizes the image with collectstatic. We're using Docker, but I'm sure the same approach can be used with simple tarballs, OS packages (.debs, etc) or deploy-specific git repo (for Heroku)
tarr11 9y ago
You do not need to commit your build to git if you are using heroku. If you add the nodejs buildpack to your heroku project, it should detect and build your package.json automatically on heroku. Works with both yarn and npm. You just need to make sure to set NODE_ENV=production in your heroku config. https://devcenter.heroku.com/articles/nodejs-support#build-behavior https://devcenter.heroku.com/articles/nodejs-support#build-b...
simonw 9y ago
You might be able to solve this using a bin/post_compile script - most standard Heroku buildpacks will run these as part of the build step, and they can be used to run commands that generate files which will then be included in the compiled app that gets deployed to Heroku. Here's an example that might be useful: https://github.com/nigma/heroku-django-cookbook/blob/master/bin/post_compile https://github.com/nigma/heroku-django-cookbook/blob/master/...
acejam 9y ago
I've done this for several apps. We have a large Jenkins 2 cluster and use declarative Jenkinsfile's. For Jenkins, you can accomplish this by simply setting up a Jenkinsfile that has an agent defined in each stage. Build your VueJS app in the first stage with a NodeJS container, and build the second stage with a Python container. Bonus points for building an actual Docker image as your artifact that has Django inside of it with Apache or nginx serving the VueJS bits too.

drdaeman 9y ago

We have this with GitLab CI, although with React and not Vue (but I don't think this matters). We have two stages, `build-assets` and `build-app`, first one runs Webpack etc, and the second one copies the build artifacts into a Docker image with Django and finalizes the image with collectstatic. We're using Docker, but I'm sure the same approach can be used with simple tarballs, OS packages (.debs, etc) or deploy-specific git repo (for Heroku)

tarr11 9y ago

You do not need to commit your build to git if you are using heroku. If you add the nodejs buildpack to your heroku project, it should detect and build your package.json automatically on heroku. Works with both yarn and npm. You just need to make sure to set NODE_ENV=production in your heroku config. https://devcenter.heroku.com/articles/nodejs-support#build-behavior https://devcenter.heroku.com/articles/nodejs-support#build-b...

simonw 9y ago

You might be able to solve this using a bin/post_compile script - most standard Heroku buildpacks will run these as part of the build step, and they can be used to run commands that generate files which will then be included in the compiled app that gets deployed to Heroku. Here's an example that might be useful: https://github.com/nigma/heroku-django-cookbook/blob/master/bin/post_compile https://github.com/nigma/heroku-django-cookbook/blob/master/...

acejam 9y ago

I've done this for several apps. We have a large Jenkins 2 cluster and use declarative Jenkinsfile's. For Jenkins, you can accomplish this by simply setting up a Jenkinsfile that has an agent defined in each stage. Build your VueJS app in the first stage with a NodeJS container, and build the second stage with a Python container. Bonus points for building an actual Docker image as your artifact that has Django inside of it with Apache or nginx serving the VueJS bits too.