Internet Health Report 2018

The Internet Health Report is a Mozilla's "initiative to document and explain what’s happening to the health of the Internet combining research from multiple sources".

This repository contains the code for the report of the year 2018.

Development

Setup

In order to run this project on your machine, you need the following programs:

• Yarn
• Docker

Here are the steps to run the project for the first time:

1. Clone the repository: git clone git@github.com:Vizzuality/internet-health-report.git
2. Go to the folder: cd internet-health-report
3. Install the dependencies: yarn
4. Copy .env.sample, rename the copy .env and set the variables (see below)
5. Build the project: yarn build
6. Build and run the Docker image in a terminal: docker-compose -f docker-compose.yml build && docker-compose -f docker-compose.yml up
7. Run the development server in another: yarn dev
8. Go to http://localhost:3000 and create an account in Wordpress
9. Change the theme to "Internet Health Report 2018"

Later on, you just need to run these steps:

1. Run the image in a terminal: docker-compose -f docker-compose.yml up
2. Run the development server in another: yarn dev
3. Go to http://localhost:3000

Development workflow

The package.json file contains 3 scripts:

• yarn dev: run a proxy server with Browsersync, listen to changes in the files and compile/transpile them
• yarn build: build the project for production
• yarn test: run the linter on the Javascript files

The source files are located in /src and the output folder is /www/wp-content/themes/ihr-2018. The development server runs a proxy of the Docker one to allow refreshes of the page whenever a file of the source folder is modified. The Sass files are compiled in a CSS stylesheet, the ES6 files transpiled into an ES5 script, the PHP files are just copied to the destination folder and the images are minified and also copied to the destination. By default, the Javascript code is not minified and the source maps are enabled.

When running yarn build, the same process is run but the JS files are minified and no source map is generated. Note that there is no server in this case.

Environment variables

A .env file is located at the root of the project. It contains the environment variables the Javascript code needs. Here is a list of them:

• No variable yet

License

MIT