Giter Club home page Giter Club logo

fulcro-native-template's Introduction

Fulcro Native Template

This repository is a work-in-progress.

This is a project that could be used as the basis for a full-stack Fulcro native+web project where the logic of the web and native apps is shared as much as possible.

This particular example shares login logic among the web and native UIs, along with some basic routing.

In the interest of time, a tour of this project is available on YouTube.

Basic Usage

Important
By default native app will try to connect to Electron Fulcro Inspect. You may comment out the app.inspect-native-preload in shadow-cljs.edn to disable this.
Note
Logging errors in the Native env will show an error screen on the app. Just press ESC to continue in the simulator if that happens.

In one terminal, start up CLJS build:

$ yarn
$ npx shadow-cljs server

Go to http://localhost:9630/dashboard and click on Builds, and check the native and web builds (you should see both of them build).

Make sure you have the clojure CLI tools installed, and in a 3rd terminal start a REPL:

$ clj -A:dev
user=> (restart)

You should see a message about starting.

Open http://localhost:3000. This is the webapp.

For mobile version In another terminal, start up expo:

$ cd mobile
$ yarn
$ npx expo start

Go to the Expo terminal window and press 'i' (requires XCode and Simulator to be installed).

An iPad/Phone simulator should start with the app.

There is a demo login account of "user"/"letmein".

Usage on Android

If using Android you must use a patched version of sente and specify the host for Electron Fulcro Inspect.

Update deps.edn to use the patched version of sente

org.clojars.currentoor/sente        {:mvn/version "1.14.1-SNAPSHOT"}
com.fulcrologic/fulcro              {:mvn/version "3.1.8"
                                    :exclusions  [com.taoensso/sente]}

Update shadow-cljs.edn to connect to inspect on the host machine which is always 10.0.2.2 on the Android Studio emulator

:closure-defines  {'goog.DEBUG                  true
                                             app.client-native/SERVER_URL "http://10.0.2.2:3000/api-native"
                                             com.fulcrologic.fulcro.inspect.inspect_ws/SERVER_PORT 8237
                                             com.fulcrologic.fulcro.inspect.inspect_ws/SERVER_HOST "10.0.2.2"}

Debugging mobile app

Just start fulcro electron app, after running your mobile app. It should work out of the box. If you have problem connecting try "r" in expo mobile app menu or restarting the mobile simulator

For react-native in separate tab run: yarn run react-devtools

And hit "r" in expo menu to refresh app and after that press "m" for debug options. This should connect react-devtools to your app.

Possible problems

If you are getting errors while starting expo app make sure that mobile/app directory exists. If not, running npx shadow-cljs server and building should help.

Iphone simulator is black: Just close iphone simulator device and hit "i" in expo menu to reopen iphone (sometimes works after third try)

Warn/error when opening expo app on mobile simulator / Can’t see the app Click Minimize to see the application.

WARN [taoensso.sente] - Chsk is closed: will try reconnect This happens when fulcro-inspect-electron is not connected As stated above: You may comment out the app.inspect-native-preload in shadow-cljs.edn to disable this.

fulcro-native-template's People

Contributors

awkay avatar kaspazza avatar fjolne avatar alidcast avatar bbss avatar evelant avatar

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.