Skip to content

Commit f9bd6db

Browse files
authored
Add links and clarify instructions in installation.md
1 parent 0df9082 commit f9bd6db

File tree

1 file changed

+18
-8
lines changed

1 file changed

+18
-8
lines changed

contributor_docs/installation.md

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
1414
$ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
1515
```
1616

17-
4. If you are using nvm, run `$ nvm use` to set your Node version to 16.14.2
17+
4. If you are using nvm, run `$ nvm use 16.14.2` to set your Node version to 16.14.2
1818
5. Ensure your npm version is set to 8.5.0. If it isn't, run `npm install -g npm@8.5.0` to install it.
1919
6. Navigate into the project folder and install all its necessary dependencies with npm.
2020

@@ -27,12 +27,14 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
2727
* For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
2828
8. `$ cp .env.example .env`
2929
9. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
30-
10. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
31-
11. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
32-
12. `$ npm start`
33-
13. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
34-
14. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
35-
15. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
30+
* See the [GitHub API Configuration](#github-api-configuration) section for information on how to authenticate with Github.
31+
* See the [S3 Bucket Configuration](#s3-bucket-configuration) section for information on how to set up an S3 bucket
32+
11. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
33+
12. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
34+
13. `$ npm start`
35+
14. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
36+
15. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
37+
16. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
3638

3739
## Docker Installation
3840

@@ -50,6 +52,8 @@ Note that this takes up a significant amount of space on your machine. Make sure
5052
4. `$ docker-compose -f docker-compose-development.yml build`
5153
5. `$ cp .env.example .env`
5254
6. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
55+
* See the [GitHub API Configuration](#github-api-configuration) section for information on how to authenticate with Github.
56+
* See the [S3 Bucket Configuration](#s3-bucket-configuration) section for information on how to set up an S3 bucket
5357
7. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` - note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
5458
8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
5559

@@ -94,9 +98,15 @@ In this application, GitHub credentials are used for:
9498

9599
If you are working on a part of the application that requires one of the above uses, then you will need to get GitHub API credentials.
96100

97-
When you go to the Developer settings in your GitHub account, you will see that you can create two types of Apps: `GitHub Apps` and `OAuth Apps` ([differences between GitHub Apps and OAuth Apps](https://docs.github.com/en/free-pro-team@latest/developers/apps/differences-between-github-apps-and-oauth-apps)). This project requires you to make an `OAuth App`. After clicking on "New OAuth App", you will need to fill in the following fields:
101+
When you go to the (Developer settings)[https://github.com/settings/developers] in your GitHub account, you will see that you can create two types of Apps: `GitHub Apps` and `OAuth Apps` ([differences between GitHub Apps and OAuth Apps](https://docs.github.com/en/free-pro-team@latest/developers/apps/differences-between-github-apps-and-oauth-apps)). This project requires you to make an `OAuth App`. After clicking on "New OAuth App", you will need to fill in the following fields:
98102
- **Application name**: `p5.js Web Editor - Local`
99103
- **Homepage URL**: `http://localhost:8000`
100104
- **Authorization Callback URL**: `http://localhost:8000/auth/github/callback`
101105

106+
Once you've created a new OAuth app, update your `.env`:
107+
```
108+
GITHUB_ID={GITHUB_ID}
109+
GITHUB_SECRET={GITHUB_SECRET}
110+
```
111+
102112
If you would like to learn more about what you can do with the GitHub API, you can look at the [API documentation](https://developer.github.com/v3/).

0 commit comments

Comments
 (0)