Tutorial: How to Set Up Your Dev Environment for Reaction 2.0
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:
Next.js provides a light framework to build fast React server-side rendered applications.
Apollo Client is a data fetching framework that makes it easy to integrate with Reaction's GraphQL API.
MobX is a reactive client state management library that is scalable and simple to use.
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 firstname.lastname@example.org:reactioncommerce/reaction-platform.git cd reaction-platform
The Platform installs and runs the entire suite of Reaction services in these directories:
||GraphQL API, Meteor API, Classic UI, Mongo|
||Authentication server, PostgreSQL|
||Next.js storefront application|
2. Bootstrap all services
Now run this command:
This process may take some time. Behind the scenes the
make command is:
- Checking that dependencies are present
- Cloning the sub projects from GitHub:
- Downloading Docker images
- Building custom, project-specific Docker images
- Starting services
make command fails at some point, you can run or rerun it for a specific service with:
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:
6. Welcome to Reaction 2.0!
You're now ready to start developing.
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.