Prerequisite

First thing's first, we need to install the appropriate libraries and setup our project folders to work in.

Install

This line will install our custom yeoman generator

$ npm i -g yo generator-hexin-node generator-hexin-react

In our setup, we'll use yeoman primarily for initialising projects

Setup

We'll have two projects running, one for back-end (node) and one for front-end (react). Navigate to your project root, and run the following line to create our two sides:

$ mkdir web api

In a real life scenario, you'll most likely first create a repo and clone it to your local disk. In this case, just ensure you have two repos; one for api and one for web. We'll use the name api and web to refer to them in this tutorial.

Node

inside your api folder

$ yo hexin-node {projectName}

After you run the yeoman generator, it'll ask you some questions. For now, we'll answer no for all of them.

Web

inside your web folder

$ yo hexin-react {projectName}

Run

inside api folder

$ npm start

inside web folder

$ npm start

You're ready!

Congratulations! you're ready to start building a project with all the tools needed.