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.
- Environment Setup
- Generating the React Native Client
- App Config
- Running the App
- Building and Deploying
- Updating Over the Air
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.
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.
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
Tip: If you are using OAuth 2.0 for the authentication type, see the docs for a guide to Okta and Keycloak configuration.
To start the app, run
npm start in the
There are multiple ways to launch the application directly on a specific platform:
|On Device||Scan the QR Code with your device|
Once the packager is started, you can also launch other platforms. Press
w for web,
i for iOS, or
a for Android.
npm run build:web to build a production deployment of the web client in
Tip: If you want to enable the PWA, set
offline: true in
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
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.
To build your iOS app, run
npm run build:ios. Choose an iOS bundle identifier, then choose either
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.
To build your iOS app, run
npm run build:ios. Choose an Android package name, then choose either
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.
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.
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.