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 automation axum babel bash benchmark blog blog-engine bootstrap buildout c# cache centos chrome ci cinder ckan cli cloud code-review codeplex community config debugger deface dependencies development-environment devices devstack devtime disks django dlr dns docker dockerimage dos easy_install elmah encoding environment-variables error event events everything-as-a-code exception exceptions fabrik firefox flask foreach forms fstab gae gcc gerrit git github go google google-app-engine grep hack hacked hardware headless horizon hound html hugo iaas ienumerable iis internet iptables iron-python ironic iscsi java-script javascript jenkins jquery js jsx kharkivpy kiss kombu kvm kyiv lettuce libvirt linux lio loci logging loopback losetup lvm mac-os macos mercurial microsoft microsoft-sync-framework mobile mono ms-office msbuild networking news nginx npm npx offtopic oop open-source open-xml opensource openstack openvswitch os packages paraller-development patterns-practices performance php pika pip plugins pnp podcast popup postgresql profiler project protocols proxy pycamp pycharm pycon pykyiv pylint pypi python python-3 qcow quantum qumy rabbitmq rar react reactjs refactoring rfc rhel search-engine security selenium server shell silverlight socket software-engineering source-control sourcegear-vault sources sql sql-server sql-server-express sqlalchemy ssh static-site sublimetext svg tests tgt tipfy tornado typescript uapycon ui uneta unit-tests upgrades usability vim virtualenv visual-studio vitrage vm vue.js vuejs web-development web-server web-service web_root webpack webroot windows windows-live word-press x32 x64 xcode xml xss xvfb интернет-магазин книги


Archives

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