Cactus Design System Workshop

A workshop to learn the Cactus Design System

Workshop Setup

Steps to follow before the workshop starts.

1. clone this repository
   git clone ssh://github.com/repaygithub/workshop-cactus-ds

2. navigate into the directory

3. Build the docker image with docker-compose build

4. Run the web app docker-compose up web and open a browser to https://localhost:9222

5. Accept the self-signed certificate and you should see "Hello World" printed.

6. See Step 1 - Add Cactus Web

DIY Setup

THESE STEPS ARE FOR POSTERITY ONLY, SKIP AHEAD FOR THE WORKSHOP

1. create project skeleton

# make project directory
mkdir cactus-ds-workshop
cd cactus-ds-workshop

# initialize a yarn project with defaults
yarn init -y

# initialize git
git init

# install dependencies
yarn add react react-dom @repay/cactus-web @repay/cactus-icons @repay/cactus-theme @reach/router styled-components

# install dev dependencies
yarn add --dev @repay/scripts prop-types

# add basic files
touch README.md
echo -e "node_modules\ndist\n*.log\n\n.DS_Store" >> .gitignore
echo -e "node_modules" >> .dockerignore

2. add project commands

{
  "name": "cactus-ds-workshop",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
+  "scripts": {
+    "start": "repay-scripts dev src/index.jsx -p 9000",
+    "build": "repay-scripts build src/index.jsx"
+  },
  "dependencies": {
    "@reach/router": "^1.2.1",
    "@repay/cactus-icons": "^0.6.1",
    "@repay/cactus-theme": "^0.4.4",
    "@repay/cactus-web": "^0.5.3",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@repay/scripts": "^0.3.1",
    "prop-types": "^15.7.2"
  }
}

3. Add Dockerfile (see ./Dockerfile)

4. push initial commit

git add .
git commit -m "init project 🌵"