Vue3 (Vite) + Django 5 DevOps Boilerplate Template for Gitlab CI/CD

electrocnic — Mon, 01 Jan 2024 14:35:08 +0000

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

Vue Django Development and Continuous Integration and Continuous Deployment (CI/CD for Vue+Django)

electrocnic — Wed, 11 Mar 2020 21:50:16 +0000

So I made a gitlab repo which has some basic code for a Vue frontend and a Django backend. CI/CD is the focus of this setup. If you are looking for a way to be able to develop such an app on your local machine, but still deploy it regularly with docker, isolated from your local machine, and maybe also run tests on a gitlab CI pipeline, you might be interested in my repo: https://gitlab.com/electrocnic/vue-django-ci-cd-boilerplate

It is for users who are just starting with a new project.

It has still quite some room for improvements, for example, the secrets could be passed with the new docker feature --secret.

Also, it needs the privileged mode and produces quite large docker images in quite a lot of build-time. This could be improved.

If you are fine with that though, you can fork it, experiment with it, have fun with it. However, I do not guarantee for anything, this is just a project for my personal requirements, but I thought, it could be helpful for others as well.

The app supports to deploy multiple different apps on the same server, when they are all based on this boilerplate template.

It is based on https://github.com/NdagiStanley/vue-django and makes use of some third-party repos like https://github.com/nginx-proxy/nginx-proxy and https://github.com/nginx-proxy/docker-letsencrypt-nginx-proxy-companion and https://github.com/zenhack/simp_le

The first-time setup of your own gitlab ci/cd pipeline after you forked it, will take approximately 1 hour, due to the fidely work with the variables in the gitlab settings and badge-links.

Have fun!

Forem: electrocnic

Vue3 (Vite) + Django 5 DevOps Boilerplate Template for Gitlab CI/CD

Vue Django Development and Continuous Integration and Continuous Deployment (CI/CD for Vue+Django)