A few years ago, I already published a short article about a Vue+Django boilerplate template for Gitlab CI/CD.
https://dev.to/electrocnic/vue-django-development-and-continuous-integration-and-continuous-deployment-ci-cd-for-vue-django-4e31
This template is all about the DevOps behind your Webapp: Tooling and versioning for the development, debugging and automated testing and deployment. Including SEO stuff like prerender, or nginx configuration for https and even a test domain deployment where you can test your production-ready website on the server, without really releasing it yet.
I updated this Gitlab project to Vue3+Vite+pinia (instead of webpack and vuex), Django 5 and made it a bit less cloaky, utilizing Docker's multistage builds and the new Docker buildx (which is used automatically now on gitlab runners anyways, but made sure that the pipeline still works).
The pipeline is configured in a way, that base docker images are cached and only rebuilt if base dependencies change. My pipe runs through in about 15 minutes, and the website is deployed.
The initial setup and understanding of the repo will take a while. 2 hours is a good amount of time, needed to setup a working fork with your own deploy server and your own domains for your app.
In fact, I had the feeling, that no tutorial ever really talked in depth about the immense workload and knowledge needed for the DevOps setup behind a simple WebApp. It feels like this is 90% of the effort for a small static Vue Website, and probably still 50% of the effort for a middle sized Website with Backend features.
The difficulty comes from the need to be able to:
- Develop:
- On Windows locally
- On Linux locally
- On Windows in Docker
- On Linux in Docker
- Test and Debug locally and on the production server (once served via nginx and https and through the nginx proxy so):
- so you are able to host multiple different apps on the same server but with different domains
- Test in CI/CD
- Test a test-deployment manually, without interfering with the currently hosted production app.
- Deploy automatically.
- Have a reproducible build over years, by fixating all dependencies (now even fixated python, npm, pdm, node versions to be able to rebuild an outdated app after years (hopefully)).
- Have SEO features: Crawlers use the content which they get in the first response of the website. An SPA application like commonly made with Vue will deliver an empty page in the first few milliseconds until Vue injects the actual content live. The crawlers would therefore not index the pages correctly. Prerender is utilized for that. Crawlers will get a statically prerendered version of the website, to index it properly.
Tests are currently deactivated in this repository, I think the experienced user will have no troubles to reactivate and adapt them to their needs on their own.
https://gitlab.com/electrocnic/vue3-django-ci-cd-boilerplate
Top comments (0)