Cómo configurar la integración continua con Circle CI, EmberJS y GitHub

¿Qué es la Integración Continua y por qué deberíamos hacerlo?

La Integración Continua (CI) es el proceso de automatizar la construcción y prueba de código. Esto sucede cada vez que un miembro del equipo del proyecto confirma cambios en el control de versiones.

Por ejemplo, realiza cambios en el código de su repositorio de GitHub y envía ese cambio a la rama maestra. Esto desencadena un proceso de CI para crear un entorno virtual y ejecutar comandos. Los comandos configuran el entorno como si estuviera en un servidor de producción. Luego, ejecutan el conjunto de pruebas automatizado que escribió para probar su código.

La CI se utiliza a menudo para:

  • validar ramas separadas en las que está trabajando un desarrollador. Las sucursales se prueban bien antes de fusionarse en la rama principal del proyecto.
  • para validar e implementar las últimas versiones de un proyecto a medida que las ramas pasan la validación.

Tener el código continuamente integrado en el proyecto y probarlo reduce:

  • fusionar conflictos
  • difícil de corregir errores
  • estrategias de código divergentes
  • esfuerzos duplicados

Mantiene limpia la rama maestra. Lea más sobre la integración continua aquí.

Objetivos del tutorial

Este es su primer paso en el proceso de Integración Continua. Entonces, mantengamos las cosas muy simples. Nuestro objetivo es crear un repositorio en GitHub y ejecutar CI en ese repositorio cada vez que se envía una nueva confirmación. También mostraremos una insignia que indica el estado de nuestra compilación actual.

Las herramientas que usaremos para esta demostración:

  • GitHub
  • CircleCI
  • EmberCLI

Ahora comencemos.

Configurar una cuenta de Github

Si aún no tiene una, obtenga una cuenta de GitHub gratuita.

A continuación, diríjase a la configuración de facturación e ingrese su información de pago. No se preocupe por que le cobren. Tendremos 1000 minutos mensuales de minutos de construcción gratuitos con la opción que elegiremos (Circle CI). Eso es más que suficiente para este proyecto de demostración.

Finalmente, cree un nuevo repositorio llamado ci-ember-demo . No lo inicialices.

Crea una aplicación básica de Ember

Instalar Ember CLI

Usemos NPM para instalar Ember CLI. Incluye las herramientas que necesitamos para generar un proyecto básico.

npm install -g ember-cli

Crea un proyecto Ember

Creemos un proyecto llamado ci-ember-demo usando Ember CLI:

# cd into the desktop cd ~/desktop/ # create a new project ember new ci-ember-demo # cd into the directory cd ci-ember-demo # run the server ember s

Ahora, dirígete a //localhost:4200y deberías ver esta pantalla:

El proyecto base de Ember se está ejecutando como se esperaba. Puede apagar el servidor con ctrl+C.

Compruebe que las pruebas predeterminadas estén pasando

Ahora en la terminal ejecutemos las pruebas que se generaron con el proyecto:

npm test # alternatively ember test

Debería ver una serie de seis pruebas predeterminadas ejecutadas. Todos deberían pasar.

La idea es que estas y otras pruebas que escriba a medida que desarrolle su proyecto se ejecuten continuamente a medida que inserte cambios en el repositorio.

Envía tu proyecto a Github

Dirígete a la carpeta del proyecto ci-ember-demo para editar el README.mdarchivo. Reemplace lo que hay allí con algo como:

## ci-ember-demo
This is a basic Ember CI demo application. Check out the tutorial: 'First Step into Continuous Integration with Circle CI'.

Obtenga su URL remota y configúrela

Regrese a su repositorio de GitHub y tome la URL remota que debería verse así:

[email protected]:username/repo_name.git

Dentro de la carpeta ci-ember-demo, inicialice el repositorio:

git init

Luego agregue la URL remota para que Git sepa dónde estamos enviando nuestros archivos:

git remote add origin [email protected]:username/repo_name.git # check that it's been set, should display the updated origin git remote -v

Es hora de enviar nuestro código a Github:

# add all changes git add . # create a commit with a message git commit -m "[INIT] Project" # push changes to the repo's master branch git push origin master

El repositorio remoto de Git se actualiza con los cambios que hemos introducido:

Now we have a main project directory and a repository. It’s time to set up the CI platform.

Setup CircleCI — A continuous integration and delivery platform

CircleCI will be our tool of choice for Continuous Integration. It’s straightforward, popular, and comes with 1000 free monthly build minutes.

Head over to GitHub’s marketplace and set up a plan.

Select the Free plan.

Next head over to CircleCI and login with your GitHub account:

Once you’re in, go to the Add Project section. You’ll see a list of all your GitHub repositories.

Click Setup Project on our ci-ember-demo.

Then select Linux as our operating system and Node for language.

Click Start Building. The project will attempt to build and do what continuous integration processes do.

Since we have no configuration settings the process will almost immediately fail.

Head over to the Builds tab that lists any Jobs that ran, you should see that failure like so:

This is what we expected. Nothing really works because the CI process isn’t configured.

Configure CI in the Ember Project

Get the markdown to display our project’s CI status

CircleCI provides embeddable status badges. They display the status of your latest build. Before we go let’s get the markdown for a status badge.

Go to Settings → Projects → ember-ci-demo’s settings → Status Badges.

Copy the embed code in Markdown.

In the ci-ember-demo's README.md file, paste the embed code under the title. It will look something like this:

## ci-ember-demo [![CircleCI](//circleci.com/gh/username/ci-ember-demo.svg?style=svg)](//circleci.com/gh/username/ci-ember-demo) ...

Add the CI configuration

In the root of ember-ci-demo create a folder named .circleci and create a file called config.yml. This is where all of our configuration settings will go. Add the following:

version: 2 jobs: build: docker: - image: circleci/node:7.10-browsers environment: CHROME_BIN: "/usr/bin/google-chrome" steps: - checkout - run: npm install - run: npm test

Let’s stop and take a look at what’s happening here.

# set the version of CircleCI to use. # we'll use the latest version. version: 2

Next, we’ll set up jobs to run when the CI is triggered.

jobs: # tell CI to create a virtual node environment with Docker # specify the virtual image to use # the -browsers suffix tells it to have browsers pre-installed build: docker: - image: circleci/node:7.10-browsers # use Google Chrome to run our tests environment: CHROME_BIN: "/usr/bin/google-chrome"

Finally, let’s tell it what to do once the environment is setup:

steps: - checkout # install the required npm packages - run: npm install # run the test suite - run: npm test

Push the changes to the master branch.

Review your changes and push them up to the master branch of the repository.

Now, head back to CircleCI and check out the Jobs tab. You’ll now see a passing build. It was able to take the settings from config.yml, set up the correct virtual environments, and run our tests just as we did locally when we first generated the project.

If you look at the repository on GitHub, you’ll see the CircleCI status badge in green. This indicates again that the latest build is passing.

Conclusion

That’s it! Now whenever you create a new pull request or push any changes to master, the CI will run all the tests. The status of that job will be displayed in CircleCI and the badge on your repository. Pass or fail, you get the right information you need to develop well.

Congratulations on taking your first steps into Continuous Integration!

Sources

What is Continuous Integration? — Sam Guckenheimer