Git Product home page Git Product logo

clj-rn's Introduction

CLJ-RN

A utility for building ClojureScript-based React Native apps

Usage

This small lib provides ability to start development with just one command and some basic functionality that re-natal has: enable-source-maps and rebuild-index, which is equivalence of re-natal's enable-source-maps, use-*-device, use-figwheel.

clj -m clj-rn.main help

enable-source-maps  Patches RN packager to server *.map files from filesystem, so that chrome can download them.
rebuild-index      Generate index.*.js for development with figwheel
watch             Start figwheel and cljs repl
help              Show this help

watch has the following options:

clj -m clj-rn.main watch -h

-p, --platform BUILD-IDS [:android]  Platform Build IDs <android|ios>
-a, --android-device TYPE           Android Device Type <avd|genymotion|real>
-i, --ios-device TYPE              iOS Device Type <simulator|real>
    --[no-]start-app               Start `react-native run-*` or not
    --[no-]start-figwheel           Start Figwheel or not
    --[no-]start-cljs-repl           Start cljs repl or not
    --[no-]start-bundler           Start React Native Metro bundler or not
-h, --help

Setup re-natal project

  1. Create deps.edn file and add clj-rn as dependency. More about how to use git libraries here https://clojure.org/guides/deps_and_cli#_using_git_libraries
  2. Create clj-rn.conf.edn. See example clj-rn.conf.example.edn
  3. Run clj -R:dev -m clj-rn.main watch -p ios -i simulator to start Figwheel and cljs repl

Example usage

Run watch task which also starts Figwheel and cljs repl:

clj -R:dev -m clj-rn.main watch -p android,ios -a genymotion -i real

Start React Native bundler react-native start

Now you can run app react-native run-android or react-native run-ios

Possible config options

  • :name Name of your project. The same as in package.json
  • :builds Dev builds. You can copy it from project.clj
  • :js-modules List of all used libraries what is required like this (js/require "...") for ios and android platforms
  • :desktop-modules List of all used libraries what is required like this (js/require "...") for desktop platform
  • :resource-dirs Folders with images and other resources
  • :figwheel-bridge.js" re-natal adds this file when you init project. If you don't have it, you can skip this options
  • :figwheel-options options for fegwheel server. List of all options https://github.com/bhauman/lein-figwheel/blob/0f62d6d043abb6156393fd167f6c1496c5439689/sidecar/resources/conf-fig-docs/FigwheelOptions.txt
  • :run-options Those options will be passed to react-native run-*

Thanks

Special thanks to @psdp for the initial implementation. Awesome job!

License

Licensed under the Mozilla Public License v2.0

clj-rn's People

Contributors

dmitryn avatar endenwer avatar jeluard avatar psdp avatar rasom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

clj-rn's Issues

Do not require local figwheel-bridge.js

In order to hook RN with figwheel re-natal introduces a local figwheel-bridge.js file.

Make sure that this file is not required locally. It should still be possible to make local adaptation, if relevant.

It might be worth looking into how clojurescript handles different targets (nodejs, webworker).

Browser notifications for figwheel compilation

At the moment i have to run tail -F figwheel_server.log to check if figwheel finished with compilation for particular platform or not.

As soon as we would have web dashboard #4
it would be nice to have browser notifications showing figwheel compilation status like "Successfully compiled build ios", "Failed to compile build android", etc.

Improve env abstraction

Current environment abstraction is quite rigid and introduces some duplication.

Introduce a new abstraction that can be programmatically manipulated and hides most a the file to developers.

Bundle the react-native packager

Thank you for the great work and efforts that makes the complex re-natal into a simple handy tool.

Now there's a separate project for React Native packager.
https://github.com/facebook/metro

It will be more convenient if clj-rn can start packager server and simplify basic dev workflow.

The desired workflow may like:

$ npx react-native install    # only once if there's no native code change
$ clj -R repl -m clj-rn.main watch

It has to be clarify how deployment of the app itself is done as it is sometimes necessary to update it (and it's at least needed once).

Specifically both react-native start and react-native run-* should be replaced and made irrelevant.

Some links:

Support platform-dependent modules list in clj-rn.conf.edn

In .re-natal it is possible to list platform-dependent modules to be included in index.platform.js with following syntax:

"platforms": {
    "ios": {
      "host": "localhost",
      "modules": [
        "react-native-image-resizer",
        "react-native-camera",
        "instabug-reactnative",
        "nfc-react-native",
        "react-native-background-timer",
        "react-native-testfairy"
      ]
    },

We use this feature to provide different list of modules for mobile and desktop platforms in status-react.

@jeluard, is the same functionality exists in clj-rn-conf.edn or need to be implemented?
Thanks!

similar build configs in clj-rn.conf.edn and build.clj

In status-react we are using similar build configs in clj-rn.conf.edn and build.clj. The first one seem to be used for the watch task and the second one for compile and test. We should unify both into clj-rn.conf.edn as it seems to be the one used by clj-rn

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.