With things like homebrew you kind of forget that you’re not on Linux, and some things might actually work differently. Trying to connect to a host database server from the container using 172.17.0.1 didn’t work out.
After few hours, figuring out that everything’s setup right, you’re not going crazy, you stumble upon this note:
The host has a changing IP address (or none if you have no network access). From 18.03 onwards our recommendation is to connect to the special DNS name host.docker.internal, which resolves to the internal IP address used by the host. This is for development purpose and will not work in a production environment outside of Docker Desktop for Mac.
The gateway is also reachable as gateway.docker.internal.
[root@e70e59cdb3c3 /]# ping host.docker.internal
PING host.docker.internal (192.168.65.2) 56(84) bytes of data.
64 bytes from 192.168.65.2 (192.168.65.2): icmp_seq=1 ttl=37 time=0.951 ms
[root@e70e59cdb3c3 /]# mysql -u root -h host.docker.internal -p
Welcome to the MariaDB monitor. Commands end with ; or \g.
Your MariaDB connection id is 350
I’ve never being a fan of keeping backend and frontend codebase together, though some of the well known project achieve it quiet well like Discourse.
I spent half a day trying to figure out the ways how you can use symlinks to pick local packages to work in dummy VueJS app, but no luck. Both for yarn and npm. There’ve been a long story of resolving these issues for numerous packages like here, or here.
Simple solution with mocking an App behaviour with a sprinkle of chokidar package solves this problem. Well, at least to some extend:
You can independently develop Vue Components as plugins
From the box testing
Once e2e and unit tests are done, you can publish and integrate these plugins in to your application.
Hot Reload for Development environment
First things first – tools being used:
node: v10.16.0 (LTS)
yarn|npm: whatever make you happy!
Build instructions are split in 3 parts (base, dev, prod). I’m using webpack-merge to overwrite base with required instructions, depending on the yarn command:
//package.json part with live reload instructions
"serve": "webpack-dev-server --config ./build/webpack.dev.config.js --hot --progress -d",