Tutorial that guides the user in building a full stack tutorial
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend build a CRUD backend Jan 31, 2019
frontend connect everything Jan 31, 2019
res Basic tutorial markdown and resources for tutorial Jan 31, 2019
tutorial_sections use ref link in all markdowns Feb 4, 2019
.gitignore Basic tutorial markdown and resources for tutorial Jan 31, 2019
LICENSE.md Add MIT License Feb 1, 2019
README.md use ref link in all markdowns Feb 4, 2019
arch.png

README.md

Full Stack Tutorial

Build a Todo App with Serverless & React

Usually, React tutorials focus on getting a frontend running on your local machine. This React tutorial leverages serverless to build a complete todo list app. By the end, we will have built both a frontend and a backend, running in a scalable production-ready cloud environment. No credit card required.

Learn more about serverless here. Learn more about Binaris here.

Steps

You can fast forward and start at any step. Each step contains the necessary code and instructions to catch up with previous steps.

  1. Develop a Frontend on Your Local Machine 🕐 30 minutes

  2. Serve the Frontend from a Function 🕐 10 minutes

  3. Set Up a Redis Datastore 🕐 5 minutes

  4. Build a CRUD Backend with Functions 🕐 30 minutes

  5. Call the Backend Functions from the React Frontend 🕐 10 minutes

Or, follow the simple steps below and skip it all

Skip to "Just do it for me"

Download assets and get started

Setup Your Binaris Environment

For the next section you will need a Binaris account, if you already have one skip the following four steps.

  1. Visit signup
  2. Follow the instructions and create your new Binaris account
  3. Install the CLI via npm
    npm install binaris -g
  4. Use bn login to authenticate with your newly created Binaris account
  5. (Optional) visit our getting started page to learn the basics

Setup Redis

If you already have a Redis account, you can use either a new or pre-existing Redis instance from your account. Otherwise, you have to go through the account and instance creation flow described here.

$ export REDIS_HOST=<YOUR_REDIS_HOST> REDIS_PORT=<YOUR_REDIS_PORT> REDIS_PASSWORD=<YOUR_REDIS_PASSWORD>

Setup everything

$ cd backend
$ npm install
$ npm run deploy
$ cd ../frontend

Add a "homepage" so that React routing uses your account specific function URL. Make sure to replace <ACCOUNT_ID> with your specific Binaris account ID. Assuming you successfully ran bn login, your account ID can be found in ~/.binaris.yml.

Note: Your Account ID will always be a unique number, 10 digits in length.

> frontend/package.json
---
 "private": true,
-"homepage": "https://run.binaris.com/v2/run/<ACCOUNT_ID>/public_serve_todo",
+"homepage": "https://run.binaris.com/v2/run/1234******/public_serve_todo",
 "dependencies": {

Export the root endpoint environment variable (using your personal ACCOUNT_ID)

$ export REACT_APP_BINARIS_ROOT_ENDPOINT="https://run.binaris.com/v2/run/1234******/"
$ cd serve_todo
$ npm install
$ cd ../
$ npm install && npm run build && npm run deploy

Navigate to the URL provided in the output dialog to view your app.

Architecture

Our app has four parts:

  1. React frontend running in the browser
  2. A serverless function serving the frontend
  3. Serverless CRUD backend running on Binaris
  4. Data stored in Redis

Dependencies

  • NodeJS
  • npm