Dockerizando Angular con Bulma
Tags: angular, docker, bulma
Published: 2019-09-04 03:48:16

---
published: true
---

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](http://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](https://bulma.io/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](https://github.com/chachan/angular-bulma-scss)

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`

```dockerfile
FROM node:12.9.1

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

- Creamos el contenedor

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

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

```shell
$ 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](https://bulma.io/documentation/customize/concepts/)) 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:

```shell
$ 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:

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

- Instalamos bulma, nuevamente dentro del contenedor hacemos:

```shell
$ 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:

```scss
@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:

```plain
"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:

```html
<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

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

- Visitamos [http://localhost:4200/](http://localhost:4200/)

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