Using shadow-cljs to compile React Native for iOS on GNU/Linux
Intro
In the previous post I described how to set-up and run an iOS simulator on Linux, using a VirtualBox with and MacOS image. We used Re-Natal as a cli tool to bootstrap the application.
In this post we will look into using shadow-cljs to compile a clojurescript codebase targeting React Native. I find this combo to give a much lighter and snappier workflow, there is also a huge advantage in being closer to the react and npm ecosystem.
Before we begin please make sure you have the following tools set up:
Integration Checkbox
- on the host platform:
- node and yarn
- VirtualBox with MacOS image
- samba server sharing the project folder
- on the guest platform
- socat
- XCode
You can find all the instructions in this post.
Example project
I have created a very basic skeleton app which uses shadow-cljs to compile ClojureScript into JavaScript output, which then React Native turns into a native mobile code. You can find the full source code here.
Clone the project and make sure it is shared with the guest machine.
git clone git@github.com:fbielejec/shadow-cljs-react-native.git
On the host machine
Lets start by installing all the dependencies:
yarn deps
Next start the shadow-cljs watcher:
yarn app:watch
Once it is done compiling, in a separate terminal window start the react-native packager (Metro):
yarn app:packager
It will occupy port 8081
.
On the guest machine
Go to the guest machine running inside a VBox and use socat to start forwarding the port occupied by the Metro Bundler:
socat tcp-listen:8081,reuseaddr,fork tcp:192.168.1.3:8081
Now open the project in XCode and press Build and Run. Once it’s running use special +d to open developer menu on the simulator and make sure Live Reloading and Hot Reloading are both disabled:
If you edit the code on the host the changes are immediately reflected in the simulator running on the guest machine:
REPL
To connect a repl to the running project you can simply use M+x cider-connect
in Emacs.
Choose localhost
and select the port, this will connect you to the clj REPL, from which you can get the cljs REPL with:
(shadow.cljs.devtools.api/nrepl-select :app)
Thanks for reading!