re-natal/README.md

159 lines
5.2 KiB
Markdown
Raw Normal View History

2015-11-20 19:07:09 +00:00
# Re-Natal
2015-11-21 09:42:24 +00:00
### Bootstrap ClojureScript-based React Native apps with Reagent and re-frame
2015-08-30 04:01:40 +00:00
[Dan Motzenbecker](http://oxism.com), MIT License
2015-11-21 09:42:24 +00:00
[@dcmotz](https://twitter.com/dcmotz)
2015-08-30 04:01:40 +00:00
---
2015-11-20 19:07:09 +00:00
This project is a fork of [dmotz/natal](https://github.com/dmotz/natal) with
the goal of generating skeleton of native app for iOS and Android based on
[Reagent](https://github.com/reagent-project/reagent)and[re-frame](https://github.com/Day8/re-frame).
Re-Natal is a simple command-line utility that automates most of the process of
2015-11-21 09:42:24 +00:00
setting up a React Native app running on ClojureScript with Reagent an re-frame.
2015-08-30 04:01:40 +00:00
It stands firmly on the shoulders of giants, specifically those of
[Mike Fikes](http://blog.fikesfarm.com) who created
[Ambly](https://github.com/omcljs/ambly) and the
2015-10-04 23:29:36 +00:00
[documentation](http://cljsrn.org/ambly.html)
2015-08-30 04:01:40 +00:00
on setting up a ClojureScript React Native app.
2015-11-21 09:42:24 +00:00
Generated project works in iOS and Android devices.
2015-08-30 04:02:14 +00:00
## Usage
Before getting started, make sure you have the
[required dependencies](#dependencies) installed.
2015-11-21 09:42:24 +00:00
Install[React Native](https://facebook.github.io/react-native/docs/getting-started.html#content)CLI:
```
npm install -g react-native-cli
```
Then, install the CLI using npm:
2015-08-30 04:02:14 +00:00
```
2015-11-20 19:07:09 +00:00
$ npm install -g re-natal
2015-08-30 04:02:14 +00:00
```
2015-11-20 19:07:09 +00:00
To bootstrap a new app, run `re-natal init` with your app's name as an argument:
2015-08-30 04:02:14 +00:00
```
2015-11-20 19:07:09 +00:00
$ re-natal init FutureApp
2015-08-30 04:02:14 +00:00
```
2015-10-17 17:17:29 +00:00
If your app's name is more than a single word, be sure to type it in CamelCase.
2015-08-30 04:02:14 +00:00
A corresponding hyphenated Clojure namespace will be created.
2015-11-21 09:42:24 +00:00
Re-Natal will create a simple skeleton based on the current
2015-11-20 19:07:09 +00:00
version of [Reagent](https://github.com/reagent-project/reagent) and [Day8/re-frame](https://github.com/Day8/re-frame).
If all goes well your app should compile and boot in the iOS simulator.
2015-10-04 23:29:36 +00:00
From there you can begin an interactive workflow by starting the REPL.
```
$ cd future-app
2015-11-20 19:07:09 +00:00
$ re-natal repl
```
2015-11-14 23:42:31 +00:00
If there are no issues, the REPL should connect to the simulator automatically.
To manually choose which device it connects to, you can run `natal repl --choose`.
2015-10-04 23:29:36 +00:00
At the prompt, try loading your app's namespace:
```clojure
(in-ns 'future-app.core)
```
2015-10-04 23:29:36 +00:00
Changes you make via the REPL or by changing your `.cljs` files should appear live
in the simulator.
Try this command as an example:
```clojure
(swap! app-state assoc :text "Hello Native World")
```
2015-10-04 23:29:36 +00:00
When the REPL connects to the simulator it will print the location of its
compilation log. It's useful to tail it to see any errors, like so:
```
$ tail -f /Volumes/Ambly-81C53995/watch.log
```
2015-11-21 09:42:24 +00:00
## Running in Android
Connect your device or start a simulator
```
$ cd future-app
$ re-natal run-android
```
This will build and run app in Android.
To enable live coding
bring up the menu in Android app, go to "Dev Settings" and enable
"Auto reload on JS change"
Then run Leiningen build
```
$ lein cljsbuild auto android
```
Changes in .cljs files should be reflected in running application.
2015-08-30 04:02:33 +00:00
## Tips
2015-10-04 23:29:36 +00:00
- Having `rlwrap` installed is optional but highly recommended since it makes
the REPL a much nicer experience with arrow keys.
2015-08-30 04:02:33 +00:00
- Don't press ⌘-R in the simulator; code changes should be reflected automatically.
2015-10-04 23:29:36 +00:00
See [this issue](https://github.com/omcljs/ambly/issues/97) in Ambly for details.
- Running multiple React Native apps at once can cause problems with the React
Packager so try to avoid doing so.
- You can launch your app on the simulator without opening Xcode by running
`natal launch` in your app's root directory.
- By default new Natal projects will launch on the iPhone 6 simulator. To change
which device `natal launch` uses, you can run `natal listdevices` to see a list
of available simulators, then select one by running `natal setdevice` with the
index of the device on the list.
- To change advanced settings run `natal xcode` to quickly open the Xcode project.
2015-08-30 04:02:33 +00:00
2015-10-05 00:55:16 +00:00
- The Xcode-free workflow is for convenience. If you're encountering app crashes,
you should open the Xcode project and run it from there to view errors.
2015-08-30 04:02:51 +00:00
## Dependencies
As Natal is the orchestration of many individual tools, there are quite a few dependencies.
If you've previously done React Native or Clojure development, you should hopefully
have most installed already. Platform dependencies are listed under their respective
tools.
- [npm](https://www.npmjs.com) `>=1.4`
- [Node.js](https://nodejs.org) `>=4.0.0`
- [Leiningen](http://leiningen.org) `>=2.5.3`
- [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/index.html)
- [CocoaPods](https://cocoapods.org) `>=0.38.2`
- [Ruby](https://www.ruby-lang.org) `>=2.0.0`
- [Xcode](https://developer.apple.com/xcode) (+ Command Line Tools) `>=6.3`
- [OS X](http://www.apple.com/osx) `>=10.10`
- [Watchman](https://facebook.github.io/watchman) `>=3.7.0`
2015-08-30 04:02:51 +00:00
## Aspirations
2015-10-04 23:29:36 +00:00
- [x] Xcode-free workflow with CLI tools
2015-10-31 19:07:53 +00:00
- [x] Templates for other ClojureScript React wrappers
2015-11-21 09:42:24 +00:00
- [ ] Automatic wrapping of all React Native component functions for ClojureScript
2015-08-30 04:02:51 +00:00
- [ ] Automatically run React packager in background
- [ ] Automatically tail cljs build log and report compile errors
2015-10-27 01:04:17 +00:00
- [ ] Working dev tools
2015-10-04 19:20:13 +00:00
- [ ] Automatic bundling for offline device usage and App Store distribution
2015-10-12 23:52:07 +00:00
- [ ] Android support
2015-08-30 04:02:51 +00:00
Contributions are welcome.
2015-10-17 17:17:29 +00:00
For more ClojureScript React Native resources visit [cljsrn.org](http://cljsrn.org).