ripple.fm web

The web interface for ripple.fm

Table of Contents

• Prerequisites
• Technologies
• Development
  • Formatting
  • Setting up your environment
  • Extra configuration
  • Starting the services
• Production
  • Deploying
  • Notes on configuration

Prerequisites

• yarn or npm
• docker and docker-compose

Technologies

This project was built with:

• Server side rendered React with next.js
• Styled components with react-emotion
• Ant Design

Development

Formatting

This project uses Prettier for formatting. It's recommended to configure your editor to work with prettier using the editor integrations.

Formatting is checked when Travis CI runs a build and can be checked locally using the one of the following commands:

$ yarn lint

or

$ npm run lint

Setting up your environment

We must first set the environment variables defined in .env.example. The variables include comments and are marked optional. NOTE: Most variables are not required to run the basic development environment.

The steps for defining your environment variables:

1. Copy .env.exmaple to .env
2. Update values for the variables
3. Source the environment using source .env

Extra configuration

This section is optional.

Changing the preset stations created for the core api

In order to improve the development experience, the core api is seeded with preset stations that will auto play tracks. This is helpful when working with the UI for stations because it removes the need to manually manage stations.

We can alter the preset stations by changing the templates located here prior to starting our services.

If you've already started the services you can simple restart the api service using the following command:

$ docker-compose restart api

Changing the docker-compose configuration

You can take a look at docker-compose.yaml to see the service definitions and variables. You can change values directly in the docker-compose.yaml file but it's recommended to create a docker-compose.override.yaml file and put your changes there. An example of using docker-compose.override.yaml is available here.

Some of the configurations you may want to change include:

• The port on which the services are running (default is 3000)
• The image tags for services (useful when testing a dev version)

Starting the services

Now that we loaded the environment variables we can start the services using docker-compose

To start we run:

$ docker-compose up

To stop:

$ docker-compose down

Then, we can start the web service locally using the following command:

$ yarn dev

Once started, we can access the services at the following URLs:

• Web: http://localhost:3000
• Auth: http://localhost:3001
• Core API: http://localhost:4000

Production

Deploying

Travis CI will automatically build and push tagged commits (matching the version in package.json) to the docker image repository.

After an image is built and pushed, update the helm chart for ripple.fm to set the updated tag for the web service.