zero-one-group / ionic-react-native-flutter

Comparison of Ionic, React Native, and Flutter in one monorepo because why not?

This project was generated using Nx.

Nb. I have not installed nx cli locally, just using npx only. So in this Readme doc I will explain like in my local machine.

Table of Contents

• Setup NX Workspace
• Setup Ionic React
• Setup Flutter
• Setup React Native
• Running Applications
  • Run Ionic App
  • Run Flutter App
  • Run React Native App

Setup NX Workspace

If you wanna to initiate application similarly to these repository, you can following few steps below. If don't, you can skip to Running Applications.

To start initiate workspace you can run the following command.

npx create-nx-workspace examples

• Then choose an empty workspace

Setup Ionic React

Follow these commands to setup in ionic react.

yarn add @nxtend/ionic-react
yarn nx generate @nxtend/ionic-react:init
yarn nx g @nxtend/ionic-react:application profile-ionic

Or you can more explore in the Nx Ionic React Documentation

Setup Flutter

Please to ensure, you have been installed flutter on your local machine!. If don't please follow this official guideline to install it.

Then Follow these commands to setup in flutter.

yarn add @nxrocks/nx-flutter
yarn nx g @nxrocks/nx-flutter:create profile-flutter

You also can more explore at Nx Flutter Documentation

Setup React Native

Please to ensure, you have been installed React Native Environment on your local machine! If don't please follow the official guideline to setup it.

Then Follow these commands to setup in flutter

yarn add @nrwl/react-native
yarn nx g @nrwl/react-native:app profile-react-native

More details can read at Nx React Native Documentation

Running Applications

To running these applications perfectly, you must installed anything environment needed as mentioned above.

Also, since we are building hybrid mobile application. Ensure, you have been installed Node.js correctly.

# Install all dependencies
yarn

Run Ionic App

You can simply execute this command to run Ionic Application in your default browser.

yarn start:ionic

But, if you prefer to run it on your Android emulator, you can running this command:

yarn start:ionic-android

The command above will opened your Ionic Android codebase in you Android Studio. Then you can run it over there.

Run Flutter App

You can run with command below or simply press either F5 (Windows) or fn+F5 (Mac) in your VSCode (runing your emulator first)

yarn start:flutter

Run React Native App

# to run react native app in default browser
yarn start:rn-web

# To run react native app in android emulator
yarn start:rn-android

# To run react native app in XCode emulator
yarn start:rn-ios