JHipster React Native Demo

Jon Ruddell — Fri, 12 Feb 2021 13:36:24 +0000

JHipster React Native is now available as a JHipster Blueprint. Previously known as ignite-jhipster, the latest version brings many changes and improvements to the developer experience. With full Expo support (including Web and PWAs), building and deploying the application is easier than ever. For a full changelog, see the Github release.

In this demo, we will generate a React Native application. Next, we will launch the React Native app locally on iOS, Android, and Web. To finish up, we will build and deploy the applications, and demonstrate over-the-air updates.

This blog post is also available in a short 6-minute video format.

Environment Setup
Generating the React Native Client
App Config
Running the App
Building and Deploying
Updating Over the Air

Environment Setup

Make sure to have an LTS version of NodeJS, then install the JHipster React Native Blueprint and Expo CLI:

npm i -g generator-jhipster-react-native expo-cli

Also make sure to register an Expo account at https://expo.io/signup if you do not already have one.

In this demo, we will be using the rnhipster command, which functions similarly to jhipster --blueprints react-native. The key difference is rnhipster uses its own version of JHipster rather than the globally installed version, preventing version mismatches. This allows developers with older JHipster versions such as v6 to use the latest blueprint improvements in JHipster v7.

Generate the React Native Client

Because the React Native blueprint is designed to communicate with a JHipster backend, we'll use an existing application. We want to use the entities and config from that application to generate our React Native app.

The repository for the demo backend is located on Github at ruddell/jhipster-sample-app-react-native-backend and on Heroku at https://jh-sample-app-react-native-api.herokuapp.com/. To get the config and entities, we will be using JDL, a JHipster-specific domain language to describe applications and entities. The backend JDL can be viewed here.

Make a new directory for generating the client and import the JDL.

mkdir ../client && cd ../client
rnhipster jdl https://raw.githubusercontent.com/ruddell/jhipster-sample-app-react-native-backend/main/jhipster.jdl

Enter a name for the application, enable E2E Detox Tests if desired, and wait for npm install to finish.

Tip: If you prefer not to use JDL, run rnjhipster to use the prompts. Specify the local path to the backend folder and pass the --with-entities flag to also generate the backend entities.

App Config

The API URL is configured in app/config/app-config.js. When deploying the app, whether to an App Store or a CDN, it is required to set the apiUrl to a deployed URL of the backend.

For this demo, set the apiUrl to https://jh-sample-app-react-native-api.herokuapp.com/.

Tip: If you are using OAuth 2.0 for the authentication type, see the docs for a guide to Okta and Keycloak configuration.

Running the App

To start the app, run npm start in the client directory.

There are multiple ways to launch the application directly on a specific platform:

Running On	Command
On Device	Scan the QR Code with your device
Web Browser	`npm start -- --web`
iOS Simulator	`npm start -- --ios`
Android Simulator	`npm start -- --android`

Once the packager is started, you can also launch other platforms. Press w for web, i for iOS, or a for Android.

For iOS and Android Simulator setup, follow the platform-specific instructions for Android and iOS.

Building and Deploying

Building Web

Run npm run build:web to build a production deployment of the web client in web-build.

Tip: If you want to enable the PWA, set offline: true in webpack.config.js.

Deploying Web

Once the web client is built, you can preview it with npx serve web-build. If everything looks good, upload the web-build folder to a static site host or CDN of your choice.

Building iOS and Android

You will only need to submit a new build of the app to the App Store for review when you update the Expo SDK in your project. Otherwise no native code changes, so the Javascript bundle can be updated over-the-air without going through the review processes again.

iOS and Android apps are built through the expo build command. The actual compilation of the app happens in the cloud on Expo's build servers, then the packaged application is available for download. The build process does take several minutes, but you rarely need to update the Expo SDK.

For more information on expo build, see the Expo docs on Building Standalone Apps.

iOS

To build your iOS app, run npm run build:ios. Choose an iOS bundle identifier, then choose either archive or simulator.

An Apple App Store developer account is required for the archive option, which is later uploaded to your iOS App Store builds. You can start a build for the Simulator without a developer account.

Android

To build your iOS app, run npm run build:ios. Choose an Android package name, then choose either apk or aab.

An apk builds an application that you can directly install on any device. An aab builds an optimized build of your app for deployment through the Google Play Store.

Deploying iOS and Android

You can deploy your apps built in the previous step to the App Stores with expo upload:ios and expo upload:android. You will need a developer account for both App Stores to submit an app for listing.

For information on expo upload, see the Expo docs on Uploading Apps to the Apple App Store and Google Play.

Updating Over the Air

Once your apps have been deployed to the App Stores, you can release new updates with the expo publish command. The next time a user loads the application, the latest client will download and prepare itself. On the second launch, the new client is displayed with any updates.

Web updates are not currently supported, so you will still need to deploy those changes manually.

For information on OTA Updates, see the Expo docs on Configuring OTA Updates.

Summary

In this post, we demonstrated how to generate the app, make changes, configure a backend, build native/web apps, release over-the-air updates, and run E2E tests.

Any questions, comments, improvements, issues, and pull requests are welcome over at the JHipster React Native Github page.

DEV Community: Jon Ruddell