/expo-cljs-template

Expo template for Clojurescript React Native

Primary LanguageClojureEclipse Public License 1.0EPL-1.0

Clojars Project

Expo

Create React Native apps in Clojurescript with Expo. Impress your friends and build truly native apps across iOS and Android in a sane language!

Status

+ [expo "34.0.3"]
+ [org.omcljs/om "1.0.0-beta1"]
+ [reagent "0.8.1"]
+ [re-frame "0.10.8"]
+ [rum "0.11.1"]
- [boot *broken*]

Pull requests welcome! I don't know enough about Boot (or have enough time to learn) to support them!

Features

  • Reusable codebase for iOS and Android
  • Fast development feedback loops with REPL live coding (via Figwheel)
  • Easily test and publish your apps without installing XCode or Android Studio
  • Source map support when debugging Clojurescript
  • Supports React wrappers Reagent and Om.Next

Need help?

Dependencies (install these first)

Usage

1. Create your project

lein new expo your-project +reagent
lein new expo your-project +om
lein new expo your-project +rum

2. Change into your project's directory

cd your-project

3. Install npm dependencies

yarn install

4. Start figwheel

To auto-compile Clojurescript code and provide a development REPL

lein figwheel

5. Start expo and open the project's directory

$ expo start

From here you can Publish, Share, or run the app on a device. See Expo's documentation for more info.

6. [optional] Set lan-ip option via file:

Create file named .lan-ip with your ip. This ip will be used by figwheel to connect via websockets. If this file is not present it gets the ip from the system.

In linux you can execute the following line to create the file.

source lan-ip.sh

If this doesn't work (arch and ubuntu confirmed not to work), manually put your computer's IP address in .lan-ip and open firewall ports 19000, 19001. If you use Cncomplicated Firewall, it's sudo ufw allow 19000/tcp

To add new assets or npm modules

  1. Just js/require it somewhere in your code:
    (def cljs-logo (js/require "./assets/images/cljs.png"))
    (def FontAwesome (js/require "@expo/vector-icons/FontAwesome"))
  1. Reload simulator or device

Publishing

1. Clean the build directory

lein clean

2. Create a production build

lein prod-build

3. Open Publish with expo

$ expo publish

Externs

Production builds use advanced closure compilation which sometimes cause problems with javascript interop (details). In the past we ran a custom script to try and prepare a proper externs file, but I've found it to be very problematic and am now recommending the following:

  • Try out the :externs-inference setting in the clojurescript compiler. It should be enabled by default in newer versions of this template.
  • Use an interop package like cljs-oops for all js interop as dot references can get mangled (.-property js-object)
  • Add your externs manually to

Upgrading

As this is only an initial template, you'll want to upgrade to newer versions of expo. Honestly, it's usually as easy as reading the latest blog post for the new version and following the upgrade directions at the bottom. It usually comes down to:

  1. Updating the sdkVersion in app.json
  2. Updating the react dependencies in package.json
  3. Deleting your .node_modules directory
  4. Running yarn to install the updated dependencies
  5. Run expo start -c

Sometimes you'll need to upgrade clojurescript rendering dependencies (reagent and om-next), and in that case I recommend checking the issues/commits in this project for solutions.

Tips

  • Make sure you disable "Live Reload" and "Hot Reload" from the Developer Menu. (Figwheel does this better!)

Inspired by

License

Copyright © 2017 Sean Tempesta

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.