Vue.js + Python API + Docker in Development Environment

NOTE:

All things described in this post could be not 100% correct. I just described my development environment for a simple project with JavaScript fronted and Python backend. Everything located in the same repository to make example less complicated but it also could work well for small projects and/or when backend and frontend are implemented by the same team. Any contributions are welcome!

Intro

It’s a story about how I tried to create a simple development environment for web project with Python-based backend and frontend written on Vue.js with typescript. Also, there are containers with database and web server.

Why do I need all of these things? The goal is to have a production-like setup which cares about developers needs too. All of these containers are supposed to be started in the following order: database => API => UI => nginx. Let’s describe them one by one.

Database

A MySQL-based container with pre-defined credentials and database. Personally, I prefer PostgreSQL but I had to use MySQL for the project:(. You can easily use it by including official Docker image or build own using this manual.

API

You can have any backend here. I use dummy Flask app just for example. That’s why I didn’t provide a better example with database usage. I didn’t want to introduce Flask or Django here. But I’m too lazy to create an empty application, so I wrote 6 lines of code to get Flask app which returns ‘OK’ every time.

UI

I like Vue.js and TypeScript. I used vue-cli to create a project template. It serves development server on the localhost (127.0.0.1) by default, so I’ve added vue.config.js to configure devserver to run at 0.0.0.0.

Nginx

A piece of production-like environment where both UI and API are located on the same host. It works like a simple proxy between the browser (or any other client) on the one side and UI/API on the other.

tox environments

Nothing special is here. There are pretty common pep8, py36 environments. I use nodeenv to create virtualenv with Node.js to run front end checks.

Docker

I mostly use Docker like virtual environments so these images are not good for production usage but I feel good to use them for development purposes. That’s why:

  • my Dockerfiles are as simple as possible - I don’t care about any kind of optimizations
  • I install development libraries in containers - it allows to get everything up and running faster
  • I install vue-cli and all dependencies in the bootstrap script but not in the single Docker image layer
  • my containers are mutable - it allows to modify sources on your laptop or desktop and all changes will be applied to containers on the fly. It’s great for development to have code auto reload but please, DON’T DO THIS for production.

There is wait-for-it script to check if containers are started.

All sourses are availeble at GitHub: docker-vuejs-python-nginx

Kudos to Pavlo for fixes to docker-compose.yaml and Vlad for enabling wait-for-it.sh and nodeenv. You helped me make these containers better.

Tags

.net .net-framework .net-framework-3.5 agile ajax ajax-control-toolkit ampq ansible apache asp.net asp.net-mvc axum bash benchmark blog blog-engine bootstrap buildout c# cache centos chrome ci cinder ckan cli cloud codeplex community debugger deface development-environment devstack devtime django dlr dns docker dockerimage dos easy_install elmah encoding environment-variables error event events exception exceptions fabrik firefox foreach forms gae gcc git github go google google-app-engine hack hacked hardware headless horizon html hugo iaas ienumerable iis internet iptables iron-python ironic iscsi java-script javascript jenkins jquery js kharkivpy kombu kvm kyiv lettuce libvirt linux lio loci logging mac-os mercurial microsoft microsoft-sync-framework mobile mono ms-office msbuild networking news nginx offtopic open-xml opensource openstack openvswitch os packages paraller-development patterns--practices php pika pip pnp podcast popup postgresql profiler project protocols pycamp pycharm pycon pykyiv pylint pypi python python-3 qcow quantum qumy rabbitmq rar react refactoring rfc rhel search-engine security selenium server shell silverlight socket source-control sourcegear-vault sql sql-server sql-server-express sqlalchemy ssh svg tests tgt tipfy tornado typescript uapycon ui uneta unit-tests usability virtualenv visual-studio vm vue.js vuejs web-development web-server web-service webpack windows windows-live word-press x32 x64 xcode xml xss xvfb интернет-магазин книги

Recent posts

Docker Image Collection

Not a DNS Server for Libvirt

Diskimage-builder in Docker

Everything as a Code

Vue.js, global variables and TypeScript


Archives

2019 (19)
2018 (2)
2017 (3)
2016 (2)
2015 (3)
2014 (5)
2013 (17)
2012 (22)
2011 (35)
2010 (25)
2009 (35)
2008 (32)
2007 (2)