Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(docs) Add detailed "slow-start" for new folks #264

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,13 @@ cd react-sketchapp/examples/basic-setup && npm install
npm run render
```

## Slow start 🐢

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)**

Next, <a href="https://github.com/airbnb/react-sketchapp/tree/master/examples">check out some more examples!</a>


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

[![npm](https://img.shields.io/npm/v/react-sketchapp.svg)](https://www.npmjs.com/package/react-sketchapp)
Expand Down
Binary file added docs/assets/ex1.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 108 additions & 0 deletions docs/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

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

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)**

### [Basic setup](https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup)
![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)

Expand Down Expand Up @@ -32,3 +34,109 @@
### [Basic setup w/ Typescript](../examples/basic-setup-typescript)
![typings](./assets/tooling-typings-vs-code.png)
![examples-basic](https://cloud.githubusercontent.com/assets/591643/24778192/1f0684ec-1ade-11e7-866b-b11bb60ac109.png)


## Running the examples from scratch


### Step 0: Gather all your tools

Before getting started with react-sketch-app you should have all the following tools installed and ready to go:

- [ ] 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)

- [ ] Sketch

- [ ] 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)

- [ ] 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)

- [ ] 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))

### Step 1: Clone react-sketchapp

Assuming all your tools are installed/working, we're ready to get started by getting ```react-sketchapp``` onto your machine

- [ ] 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)

- [ ] You now can clone or download react-sketchapp to the directory from the step above by copying the following command into your terminal:

```sh
git clone https://github.com/airbnb/react-sketchapp.git
Copy link
Collaborator

@mathieudutour mathieudutour Feb 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a bit going against the instructions given in each examples: curl each example separately so the people are not scared by all the other files

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose it does break the convention slightly, however, my sense is that just to get them up and running it's a much cleaner approach to pull in the entire repo. Each of the individual examples have a line that say "Download the example or clone the repo" and the distinction might be lost on new folks. If they run through the instructions they'll probably pick up how to navigate with the command line and can jump off from there.

Then individual clone commands with pipes to things like | tar -xz --strip=2 or curl would make more sense

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mathieudutour What are you thinking?

```

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


### Step 2: Run the first example, "basic-setup"

- [ ] Now that ```react-sketchapp``` is on your machine move the terminal into the folder you just cloned down by typing the following command:

```sh
cd react-sketchapp
```

- [ ] From the ```react-sketchapp``` directory, move into the examples folder and then move into the basic-setup folder by typing the following commands:

```sh
cd examples
cd basic-setup
```

(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```)

- [ ] Install the dependencies/helper-files by typing the following command:

```sh
npm install
```

(If you see wall of text zoom down your screen that means [npm](https://www.npmjs.com/) is working as expected)

- [ ] 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)

- [ ] 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)

- [ ] Once the ```npm install``` command completes start the example by entering the following command inside the basic-setup folder:

```sh
npm run render
```

If everything is working correctly when you edit the file my-command.js and save, Sketch should automatically reflect your changes:

![HMR](./assets/ex1.gif)




### Step 3: Run other examples!

- [ ] Press CTRL-C to exit the tool and use ```cd ..``` to move back into the examples folder

- [ ] See that folder or review the list at **[the top of this page](#examples)** for other examples to try

- [ ] For each example from its directory you should run ```npm install``` and then ```npm run render```


That should get you started-- now that you're up and running see the [docs folder](./README.md) for advanced usage of ```react-sketchapp```


## Halp!

|Scenario | The fix |
|--|--|
|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|
| 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 |
| 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```|