Sunday, 23 April 2017

use Angularjs Fullstack with Docker



Ideally, Theoretically:👿

To compile (or set up CI) an Angularjs Fullstack application, below factors you need to take care:
  • source code
  • install node, ruby, and compass
  • install npm packages(labs).  if you need to run tests, Dev packages will need to be considered as well.
  • install grunt cli, install bower
  • bower install
  • grunt build (this has so many complex compile such as minimize html, js and css)
  • run test (if test is needed)

To build a deployable archive for hosting, then you need to :
  • install node
  • install npm in the host machine
  • appy ENVs
  • copy /dist 

CI and CD, ideally, we should compile and test with a CI docker image(a base image with above node, bower, ruby, grunt...) then hold the generated "/dist" and use it for CD (so "/dist" should be a volume). Then in CD, we should have another CD docker image(same base image as CI, but with runtime packages only: node) then COPY "/dist" and other operations as i described above. The whole reason of have a CI docker image and same base CD image is to use CI image for compile and generate"/dist" to avoid to use the "/dist" which is generated by your host machine. Your host machine may use different OS and environment settings so it may generate something funny for your CD docker image. This is less likely because we are compiling front end html, js and css. However above settings is still highly recommended. 


For development, ideally we should use the same Docker image as developing environment in all developers machine for coding. Nobody should use their host machine to run their code.  But i am still struggling with Docker's performance on PCs. Ideally, we should have a docker image run grunt serve and volume to host machine's src folder, the docker node server will automatically detect my code changes and load my new code..... But i never successfully run "grunt serve", i suspect it is due to docker container poor performance.

Realistically:💩

My docker container doesn't have enough power to compile the code. So i have to use the host machine to compile the code, and use /dist in docker later (and run npm again in docker etc. as i describe above)....


Below list explains in detail:
  1. You need to run mongo first and use --link to run Node to link with this mongo instance.
  2.  --link will put a group of ENVs into Node docker, but null of them can be used directly by angularjs fullstack framework (very easy to understand, because docker is not made for nodejs, so database link doesn't follow node/mongo's convention ). In short, you have to change developement.js and production.js in server/config/environment, to change mongo url
  3. Use docker container to run grunt is too heavy to a docker. So some time, run "grunt serve" or "grunt build" failed.(just stop and hang in some stage, never finish)
  4. So i will 
    1. compile (grunt build) on the host machine 
    2. and build a docker image and copy the "output" (/dist) 
  5. I didn't run grunt on the image/container, so it didn't not run local.env.js to setup ENVs, So i have to setup ENVs myself. In docker, you can have a .env file which will be automatically picked by "docker build".
  6. However, can i use Node packages from host machine, the answer is NO. Because Node libs have OS specific implementation. We have to run "npm" again to get right libs for you docker image OS.
  7. Can we use Bower packages? answer is yes. because bower packages are front end js and css which are not OS specific. 
  8. start the container by: 

docker run --rm --link mongo:MONGO \
 --env-file .env \
-p 8080:8080 --name xxx xxx node dist/server/app.js



1 comment: