Skip to content

Commit 7b02273

Browse files
committed
(docs) Add detailed "slow-start" for new folks
1 parent 537ced5 commit 7b02273

File tree

3 files changed

+113
-0
lines changed

3 files changed

+113
-0
lines changed

README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,13 @@ cd react-sketchapp/examples/basic-setup && npm install
1919
npm run render
2020
```
2121

22+
## Slow start 🐢
23+
24+
If any of the above looks confusing to you or something isn't working, try following the steps **[here](./docs/examples.md#running-the-examples-from-scratch)**
25+
2226
Next, <a href="https://github.com/airbnb/react-sketchapp/tree/master/examples">check out some more examples!</a>
2327

28+
2429
![readme-intro](https://cloud.githubusercontent.com/assets/591643/24777148/e742cd0e-1ad8-11e7-8751-090f6b2db514.png)
2530

2631
[![npm](https://img.shields.io/npm/v/react-sketchapp.svg)](https://www.npmjs.com/package/react-sketchapp)

docs/assets/ex1.gif

1.14 MB
Loading

docs/examples.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
`react-sketchapp` is bundled with lots of examples!
44

5+
If you're having trouble running the examples or are new to the command line, see the **[detailed setup instructions below](#running-the-examples-from-scratch)**
6+
57
### [Basic setup](https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup)
68
![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)
79

@@ -32,3 +34,109 @@
3234
### [Basic setup w/ Typescript](../examples/basic-setup-typescript)
3335
![typings](./assets/tooling-typings-vs-code.png)
3436
![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)
37+
38+
39+
## Running the examples from scratch
40+
41+
42+
### Step 0: Gather all your tools
43+
44+
Before getting started with react-sketch-app you should have all the following tools installed and ready to go:
45+
46+
- [ ] A terminal program (if you are not very comfortable using the command line, [this guide](http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/) should teach you most of the basic commands to get up and running)
47+
48+
- [ ] Sketch
49+
50+
- [ ] A Text editor ([Atom](https://atom.io/) or [Sublime Text](https://www.sublimetext.com/) are straightforward choices with which to start and both have many of tutorials available online)
51+
52+
- [ ] A recent version of NodeJS/NPM (If you type ```node -v``` in your terminal and do not see a version number go ahead and install it from the official [Node.js® website](https://nodejs.org), the button with "LTS" should be exactly what you need)
53+
54+
- [ ] Git (If you type ```git --version``` in your terminal and do not see a version number go ahead and install git for your operating system from the [git website](https://git-scm.com/downloads))
55+
56+
### Step 1: Clone react-sketchapp
57+
58+
Assuming all your tools are installed/working, we're ready to get started by getting ```react-sketchapp``` onto your machine
59+
60+
- [ ] Open a terminal and change the directory into a folder where you want react-sketchapp to live (if you're not sure or don't really care, an easy choice is to put it right on your desktop. You can move your terminal inside there by typing ```cd ~/Desktop``` & verify you're inside that directory by typing ```pwd``` to see the full path. ```cd ..``` will move you back one folder)
61+
62+
- [ ] You now can clone or download react-sketchapp to the directory from the step above by copying the following command into your terminal:
63+
64+
```sh
65+
git clone https://github.com/airbnb/react-sketchapp.git
66+
```
67+
68+
Note: This should take a couple seconds and once it's finished you can type ```ls -1``` in your terminal to see an alphabetized list of all the folders & ```react-sketchapp``` should be one of them
69+
70+
71+
### Step 2: Run the first example, "basic-setup"
72+
73+
- [ ] Now that ```react-sketchapp``` is on your machine move the terminal into the folder you just cloned down by typing the following command:
74+
75+
```sh
76+
cd react-sketchapp
77+
```
78+
79+
- [ ] From the ```react-sketchapp``` directory, move into the examples folder and then move into the basic-setup folder by typing the following commands:
80+
81+
```sh
82+
cd examples
83+
cd basic-setup
84+
```
85+
86+
(Again you can see the terminal's current location by typing ```pwd``` and also list all the files inside that directory by typing ```ls -1```)
87+
88+
- [ ] Install the dependencies/helper-files by typing the following command:
89+
90+
```sh
91+
npm install
92+
```
93+
94+
(If you see wall of text zoom down your screen that means [npm](https://www.npmjs.com/) is working as expected)
95+
96+
- [ ] While it's installing, take a break from the terminal and open Sketch and select "New Document" (note that Sketch should be open to an empty file before running any of the examples)
97+
98+
- [ ] Open the folder ```react-sketchapp``` in your text editor and drill down to react-sketchapp -> examples -> basic-setup -> src -> my-command.js (no need to do anything with it yet)
99+
100+
- [ ] Once the ```npm install``` command completes start the example by entering the following command inside the basic-setup folder:
101+
102+
```sh
103+
npm run render
104+
```
105+
106+
If everything is working correctly when you edit the file my-command.js and save, Sketch should automatically reflect your changes:
107+
108+
![HMR](./assets/ex1.gif)
109+
110+
111+
112+
113+
### Step 3: Run other examples!
114+
115+
- [ ] Press CTRL-C to exit the tool and use ```cd ..``` to move back into the examples folder
116+
117+
- [ ] See that folder or review the list at **[the top of this page](#examples)** for other examples to try
118+
119+
- [ ] For each example from its directory you should run ```npm install``` and then ```npm run render```
120+
121+
122+
That should get you started-- now that you're up and running see the [docs folder](./README.md) for advanced usage of ```react-sketchapp```
123+
124+
125+
## Halp!
126+
127+
|Scenario | The fix |
128+
|--|--|
129+
|When I run ```npm run render``` I see an error that says something about *'Looks like we can't find Sketch.app.'*"" | - Tell the tool where Sketch is located on your machine<br>- You'll need to find where Sketch.app is located on your system<br> - You can get the full path to Sketch by dragging and dropping Sketch into your terminal from whatever folder Sketch.app is located in to find the full path)<br>-Ex. If your username is "bongo" and Sketch.app is located in your Downloads folder, you would type the following (single line):<br>```echo "sketchPath: /Users/bongo/Downloads/Sketch.app" > ~/.skpmrc```<br>-Replace "/Users/bongo/Downloads" with your full path to Sketch.app|
130+
| When I run ```npm run render``` there is an error about "TypeError: null is not an object (evaluating 'context.document.currentPage')" | - CTRL-C to shut off the tool and open Sketch to an empty file BEFORE re-running ```npm run render``` from the folder |
131+
| Sketch isn't updating when I change the code! | - Make sure you ran ```npm install``` and ```npm run render``` in the example folder<br> - Verify you're editing the correct example file<br> - Verify that the terminal is inside the correct example directory, press CTRL-C to turn off the tool if it's on and enter ```pwd``` to make sure the terminal is in the right place <br> - Open a new document in sketch and re-run ```npm run render```|
132+
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+

0 commit comments

Comments
 (0)