Dockerizando Angular con Bulma

Requisitos:

• Conocer funcionamiento básico de Docker
• Conocer funcionamiento básico de npm

En mi proceso de aprendizaje de Angular he querido aprovechar la oportunidad de probar un nuevo framework CSS y buscando alternativas conseguí uno que llamó mi atención por su documentación y variedad de componentes, hablo de bulma.io.

Incluir bulma dentro de un proyecto de Angular se puede hacer de varias maneras, e.g. incluir el enlace del CSS directamente del CDN dentro del index.html o usar Bulma start. Otra manera sería incluir el CSS en el proyecto como dependencia y controlar su actualización como si fuese cualquier otra dependencia.

El código final lo puedes conseguir en: chachan/angular-bulma-scss · GitHub

Versiones usadas al momento de escribir esto:
Angular: 8.2.4
bulma: 0.7.5
Node: 12.9.1
Docker: 18.09.2

• Creamos el proyecto de angular. Para evitar instalar dependencias en la maquina de trabajo directamente, suelo usar contenedores. Este sería el Dockerfile. Podemos ubicarlo en ./angular/angular.dockerfile

FROM node:12.9.1

WORKDIR /app
RUN npm install -g @angular/cli

• Creamos el contenedor

$ docker build -t angular:local -f angular/angular.dockerfile ./angular

• Arrancamos y entramos al contenedor para poder crear el proyecto de Angular

$ docker run --rm -it -v $(pwd)/angular:/app -w /app angular:local bash
/app# ng new --defaults --skip-git my-app

Este es un comando de angular-cli que genera la base del proyecto de Angular por nosotros, para el momento en el que escribo esto, la versión actual de Angular pregunta qué pre-procesador queremos usar para nuestros estilos. Para poder aprovechar la flexibilidad de bulma (Concepts | Bulma: a modern CSS framework based on Flexbox) podemos elegir SCSS y que sea esa la sintaxis a escribir dentro del proyecto de Angular.

Si el proyecto de Angular ya existe sólo tienes que definir el pre-procesador por tu cuenta, afortunadamente lo puedes hacer con angular-cli:

$ docker run --rm -it -v $(pwd)/angular:/app -w /app/my-app angular:local \
  ng config schematics.@schematics/angular:component.styleext scss

al final de angular/angular.json deberías poder ver:

"schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
}

• Instalamos bulma, nuevamente dentro del contenedor hacemos:

$ docker run --rm -it -v $(pwd)/angular:/app -w /app/my-app angular:local bash
/app/my-app# npm install bulma

• En angular/my-app/src/styles.scss importamos bulma:

@import '../node_modules/bulma'

• Hay que hacer una pequeña modificación para que no sólo se escuche por localhost ya que el proyecto está dentro de un contenedor. Aseguramos que en angular/my-app/package.json la entrada de scripts.start tenga el siguiente contenido:

"start": "ng serve --host 0.0.0.0",

• Colocamos un HTML de prueba, podemos reemplazar el contenido de angular/my-app/src/app/app.component.html con:

<section class="section">
  <div class="container">
    <h1 class="title">Hello World</h1>
    <p class="subtitle">My first website with <strong>Bulma</strong>!</p>
  </div>
</section>

• Arrancamos el servidor

$ docker run --rm -it -v $(pwd)/angular:/app -w /app/my-app -p 4200:4200 angular:local npm start

• Visitamos http://localhost:4200/

La estructura de directorios definitivamente no es la mejor y sería algo a mejorar.