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

Adds Tour of Ignite documentation, updates other docs #989

Merged
merged 1 commit into from
Apr 24, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
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
13 changes: 12 additions & 1 deletion .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,14 @@ Before submitting a pull request, you will want to make sure that your branch me
* Code is compliant with StandardJS (`npm run lint` or `yarn lint`)
* Branch has already been [synced with the upstream repo](https://help.github.com/articles/syncing-a-fork/) and any merge-conflicts have been resolved.

## Requirements

* Node 7.6+
* NPM 4 (ships with Node 7)

## Getting Started

1. Clone the repo (`git clone git@github.com:infinitered/ignite.git`)
1. Fork and then clone the repo (`git clone git@github.com:<YOURGITHUBUSER>/ignite.git`)
2. CD into the directory (`cd ignite`)
3. Uninstall npm version (`npm u -g ignite-cli && npm u -g react-native-ignite`)
4. Pull all package dependencies (`npm i && npm run bootstrap`)
Expand All @@ -30,10 +35,16 @@ $ ignite --version
2.0.0-beta.x
$ which ignite
/usr/local/bin/ignite
$ ignite new UberForHeadLice
...
```

Now you're ready to check out a new branch and get hacking on Ignite!

## Source Code

To get familiarized with Ignite's source code, read the [Tour of Ignite's source code](../docs/advanced-guides/tour.md).

## How to Build and Run App

Note that if you do not already have the React Native command line tools installed, you should run `npm install -g react-native-cli` or `yarn global add react-native-cli`. For additional information and troubleshooting go to the [React Native Getting Started Guide](https://facebook.github.io/react-native/docs/getting-started.html#content).
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ If you run into problems, first search the issues in this repository. If you don
## :telescope: Where to Go From Here :telescope:

#### [Contribute to Ignite](https://github.com/infinitered/ignite/blob/master/.github/CONTRIBUTING.md) - Getting up and running for your first pull request
#### [Take a tour of Ignite source code](https://github.com/infinitered/ignite/blob/master/docs/advanced-guides/tour.md)
#### [Chat with us on the IR Community](http://community.infinite.red) - Infinite Red devs standing by
#### [Who are We?](https://infinite.red) - Learn More About Infinite Red
#### [Project Web Page](https://infinite.red/ignite/) - Ignite on Infinite Red
Expand Down
175 changes: 0 additions & 175 deletions bin/testRelease.sh

This file was deleted.

1 change: 0 additions & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
* [Creating project plugins](./advanced-guides/creating-project-plugins.md)
* [Creating boilerplates](./advanced-guides/creating-boilerplates.md)
* [Creating generators](./advanced-guides/creating-generators.md)
* [How to Contribute](./advanced-guides/how-to-contribute.md)
* [Using development build](./advanced-guides/using-development-build.md)
* Writing tests for plugins
* Releasing plugins
Expand Down
77 changes: 0 additions & 77 deletions docs/advanced-guides/how-to-contribute.md

This file was deleted.

70 changes: 70 additions & 0 deletions docs/advanced-guides/tour.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Tour of Ignite source code

Ignite's source looks a tad intimidating at first, but it's actually quite straightforward once you get some experience moving around in it. Let's take a tour.

(note in any code examples we're using `yarn` ... you can substitute `npm` alternative commands if desired)

## Lerna & "packages"

Ignite is composed of a few "packages" (in the `./packages` folder). You can think of these packages as mini npm packages, all controlled by a nice tool called [Lerna](https://lernajs.io/). This allows us to split up Ignite into separate packages while not having to coordinate releases across multiple repos and npm versions.

All you really need to know about Lerna for these purposes is that you can run this from the main folder:

```sh
$ yarn run bootstrap
```

![image](https://cloud.githubusercontent.com/assets/1479215/25318334/12209eaa-2841-11e7-926d-f26113dbefb9.png)

This will automatically run `yarn` in each of the separate packages, which each has its own `node_modules` folder.

## gluegun

`ignite-cli` (described [next](#ignite-cli)) uses another Infinite Red npm package called [gluegun](https://github.com/infinitered/gluegun). Gluegun is sort of like [Yeoman](http://yeoman.io/) in that it gives us a bunch of CLI tools, but it's much lighter and doesn't take over your whole CLI.

Whenever you see `context` in `ignite-cli`, it is a gluegun runtime context. This is a JS object that has a bunch of useful functions and properties attached to it, like `print` and `parameters`.

In addition, Ignite adds some of its own Ignite-specific functions and parameters to `context` ... those are found under `context.ignite`.

If you're curious what's in the context object, check out Gluegun's [nice context docs](https://infinitered.github.io/gluegun/#/context-api.md), or just inspect it with `console.dir(context, {depth: 3, colors true})`.
Copy link
Contributor

Choose a reason for hiding this comment

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

woah. i never knew about depth: 3, colors: true.

Copy link
Member Author

Choose a reason for hiding this comment

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

Neither did I. I literally looked up console.dir to find out what the frig it was, since I'd seen you use it a lot.

https://nodejs.org/api/console.html#console_console_dir_obj_options

Lots of cool stuff.

Copy link
Contributor

Choose a reason for hiding this comment

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

What's funny was, I've often wanted a depth setting! I just never had the presence of mind to look up the docs. Nice tip. Thx.


## ignite-cli

This is the CLI part of Ignite which runs under your local node. The `ignite` binary itself is in the `bin` folder and there are some initial scripts that run whenever you invoke `ignite` in the `./src/cli` folder.

#### Commands

The commands you can run with Ignite, such as `ignite add <plugin>`, `ignite doctor`, `ignite new MyApp`, all execute the corresponding JS files under `./src/commands`. Take a peak in each of those files. When you see a function like this:

```javascript
module.exports = async function (context) {
const { print, filesystem, prompt, ignite, parameters, strings } = context
// ...
}
```

... then you're looking at the main function. The `context` object is described above in the [gluegun section](#gluegun). Here, we're destructuring several parts of `context` such as `print`, `filesystem`, etc. Those get used in the main body of the function to perform the various tasks.

#### Extensions

Any file exports in this directory will get automatically added to the `context` object as additional properties. Let's say we wanted a `context.foo()` function. Just add `foo.js` into `./src/extensions` and export a function from there. You'll then be able to access it anywhere as `context.foo()`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe add a note about how we often use extensions for namespacing or organizing?


Notice that there are several functions under the `ignite` extension. For example, `context.ignite.addModule()` is in `./src/extensions/ignite/addModule.js`.

#### Tests

`ignite-cli` tests are fairly straightforward. For any new commands or extensions you might add, we recommend adding tests for them here.

## ignite-dev-screens

This is an [Ignite plugin](./creating-plugins.md) that adds Ignite development screens to your new app (if you choose to). It runs the `./src/plugin.js` file and copies over the files in `./src/templates` to your project. To edit the generated screens, just edit the files in the templates folder.

## Documentation and Github

Github-specific templates and docs are in `./.github`. Other

## CI Tests

In the `./bin` folder, you'll find a few helpful scripts that we run before releasing a new version of Ignite.

_That's it! If you have questions about the structure of Ignite, feel free to open an issue or [join the Infinite Red Community Slack](http://community.infinite.red)._
Loading