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:
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 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.
Getting Started
Requirements:
Before running Reaction services, make sure you have these three things:
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:
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:
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.