Tutorial: How to Set Up Your Dev Environment for Reaction 2.0

Posted 14 Nov 2018

If you're new to Reaction and wondering how to start, don't worry! Getting started with Reaction 2.0 is much easier than previous versions, mainly thanks to the new Reaction Platform. This post will walk you through the steps needed to set up your development environment and start developing with Reaction 2.0.

Reaction Storefront Technology Stack

But first, here's a quick overview of the tech stack we'll be working with. Reaction 2.0 is designed to be used with the new Reaction Storefront Starter Kit, which has been built using a modern technology stack composed of the following projects:

React

A declarative, efficient, and flexible JavaScript library for building user interfaces. React has strong industry adoption and is built and supported by a large community of contributors.

Next.js

Next.js provides a light framework to build fast React server-side rendered applications.

Apollo Client

Apollo Client is a data fetching framework that makes it easy to integrate with Reaction's GraphQL API.

MobX

MobX is a reactive client state management library that is scalable and simple to use.

Getting Started

Requirements:
Before running Reaction services, make sure you have these three things:

Docker and Docker Compose installed and running (Mac | Windows | Linux)
Node.js installed.
A GitHub account with a configured SSH key

Reaction 2.0 is a little different from previous versions in that it's implemented using microservices, with the operator UI, storefront UI, and OAuth server living in their own Docker hosted service. The new Reaction Platform repository includes all of those services, so the biggest step to start developing with Reaction 2.0 is to install Reaction Platform.

Note: Before you get started, make sure that there are no applications running on ports: 3000 and 4000

Note: The Reaction Platform requires Docker to run with at least 4GB of RAM and 2 CPUs. Click here for intructions on allocating resouces for the Docker daemon.

1. Clone Reaction Platform

Execute the following commands in your favorite terminal:

git clone git@github.com:reactioncommerce/reaction-platform.git
cd reaction-platform

The Platform installs and runs the entire suite of Reaction services in these directories:

Directory	Services
`reaction`	GraphQL API, Meteor API, Classic UI, Mongo
`reaction-hydra`	Authentication server, PostgreSQL
`reaction-next-starterkit`	Next.js storefront application

2. Bootstrap all services

Now run this command:

make

This process may take some time. Behind the scenes the make command is:

Checking that dependencies are present
Cloning the sub projects from GitHub: reaction, reaction-hydra, and reaction-next-starterkit
Downloading Docker images
Building custom, project-specific Docker images
Starting services

If the make command fails at some point, you can run or rerun it for a specific service with:

make init-<project-name>

3. Confirm services

You can double-check that all services are up and running by executing the following command:

docker ps -a | less -S

You should see a log of all running containers, similar to this:

CONTAINER ID        IMAGE                             COMMAND                  CREATED              STATUS              PORTS
ad595e794f1c        reaction-next-starterkit_web      "/usr/local/src/reac…"   3 minutes ago        Up About a minute   0.0.0.0:4000->4000
5ea86c98c4ad        reaction_reaction                 "bash -c 'meteor npm…"   18 hours ago         Up 18 hours         0.0.0.0:3000->3000
45e881db6cd9        mongo:3.6.3                       "docker-entrypoint.s…"   18 hours ago         Up 18 hours         0.0.0.0:27017->270
8748effda8a6        ory/hydra:v1.0.0-beta.9-alpine    "hydra serve all --d…"   About a minute ago   Up About a minute   0.0.0.0:4444-4445-
96bc4e0134d5        postgres:10.3                     "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:32769->543

4. Check a specific log

To check the logs of a particular service, execute docker-compose logs -f within the directory of a specific project. For example, to display the reaction logs, execute:

cd reaction
docker-compose logs -f

5. URL list

When all services have finished booting up, they will be accessible at the following URLs:

Directory: Service	URL
`reaction`: GraphQL API	localhost:3000/graphql-alpha
`reaction`: GraphQL API playground	localhost:3000/graphiql
`reaction`: Classic UI	localhost:3000
`reaction`: MongoDB	localhost:27017
`reaction-hydra`: ory/hydra	localhost:4444
`reaction-next-starterkit`	localhost:4000

6. Welcome to Reaction 2.0!

You're now ready to start developing.

For more information, our Docs site is always a good place to start. If you need help with a specific issue, our Gitter channel is filled with helpful, active Reaction users.

Please let us know in the comments below if you've found this tutorial helpful, and check back here on our blog for more "how-to's" in the weeks to come.