My experience on my daily works... helping others ease each other

Wednesday, December 18, 2019

Ionic 4 + React + Capacitor - The right way of building mobile apps with these three

React is supported in Ionic starting from Ionic 4. And this is the issue if you started to develop ionic react apps by running command ionic start [appsname] --types=react.

I started with that command and it becomes issues of which it took me 3 days and still it won't work. Few issues found was:
1. You cannot build or compile into mobile apps with normal ionic cordova add android, etc commands. It will stated that it is a react apps and you need to use capacitor instead.
2. So you start to install capacitor and follow many steps. You will be succeed in building and compiling.
3. But, upon running the apps on emulator or your devices, you'll get blank screen. 

How to solve that? I've followed many steps including changing the default href in index.html, remove and add capacitor and rerun it. Yet it failed. 

How do I solve that? Here is the steps:

1. Remove everything

(base) % npm uninstall -g ionic    
up to date in 0.05s
(base) % npm uninstall -g capacitor
up to date in 0.045s
(base) % npm uninstall -g cordova  
up to date in 0.047s
(base) a% npm cache clean -f        
npm WARN using --force I sure hope you know what you are doing.

2. Update your NPM modules
(base) % npm i -g npm              

3. Install ionic with capacitor
(base) % npm install -g ionic capacitor

4. Create your apps
(base) % ionic start yourapps tabs --type=react

5. Run NPM install to install any modules required upon completed. For any additional modules, run npm install to ensure required modules is updated.
(base) % cd yourapps 
(base) % npm install

6. Run your apps to test it out
(base) % ionic serve

7. After doing your development, build it using npm run build or ionic build
(base) % npm run build

8. Next, build for your platform. Once build is completed, please ensure your www or public folder exist. Then add the required platform. In my case, I'm developing for android.
(base) % ionic cap add android

9. Open IDE. If succeed, proceed with opening the apps on XCode or Android Studio (depend on your chosen platform)
(base) % ionic cap run android

10. Once your IDE is opened, compile/build and run it on emulator or devices.

It shall do it.



Share:

0 comments:

About Me

Somewhere, Selangor, Malaysia
An IT by profession, a beginner in photography

Blog Archive

Blogger templates