Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.
This tutorial is based on Fedora 30 distro.
1 2 3 4 5 6 | [root@desk mythcat]# dnf install nodejs Last metadata expiration check: 0:58:43 ago on Mon 12 Aug 2019 10:01:29 AM EEST. Package nodejs-1:10.16.0-3.fc30.x86_64 is already installed. Dependencies resolved. Nothing to do. Complete! |
Let’s see the version for npm and nodejs:
1 2 3 4 | [mythcat@desk ~]$ npm --version 6.9.0 [mythcat@desk ~]$ node --version v10.16.0 |
Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. , see the official webpage.
Ionic has added support for React.
Let’s install this:
1 2 3 4 | [mythcat@desk ~]$ sudo npm install -g ionic [sudo] password for mythcat: ...+ ionic@5.2.4 added 230 packages from 169 contributors in 45.574s |
The next step is create the application react.
I use –type=react to generate a project based on React and select tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | [mythcat@desk ~]$ ionic start myApp --type=react Let's pick the perfect starter template! 💪 Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this prompt next time, supply template, the second argument to ionic start. ? Starter template: (Use arrow keys) ❯ blank | A blank starter project sidemenu | A starting project with a side menu with navigation in the conten t area tabs | A starting project with a simple tabbed interface conference | A kitchen-sink application that shows off all Ionic has to offer ... [INFO] Next Steps: - Go to your newly created project: cd ./myApp - Run ionic serve within the app directory to see your app - Build features and components: https://ion.link/scaffolding-docs - Get Ionic DevApp for easy device testing: https://ion.link/devapp |
Now you can run it:
1 2 3 | [mythcat@desk ~]$ cd ./myApp [mythcat@desk myApp]$ ionic serve ... |
You can see the result into your browser at localhost:8100.
Make your changes and deploy your app to a real device using the Deploying guide for iOS & Android.
You can use third-party API using the Axios client.
Axios is a lightweight HTTP client and can be install with:
1 2 3 4 5 | [mythcat@desk ~]$ npm install axios --save ... + axios@0.19.0 added 5 packages from 8 contributors and audited 5 packages in 5.822s found 0 vulnerabilities |
You can use Cordova command-line:
1 2 3 4 | [mythcat@desk ~]$ sudo npm install -g cordova-res native-run --unsafe-perm [sudo] password for mythcat: ... added 100 packages from 114 contributors and updated 1 package in 92.451s |
You can use Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web:
1 2 3 4 5 | [mythcat@desk ~]$ cd ./myApp [mythcat@desk myApp]$ npm install --save @capacitor/core @capacitor/cli ... added 75 packages from 108 contributors and audited 902480 packages in 108.855s found 0 vulnerabilities |
If you want to use with Ionic new project use this:
1 2 | ionic start myApp tabs --capacitor cd myApp |
In this case I have an project and I used this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | [mythcat@desk myApp]$ ionic integrations enable capacitor ... 🎉 Your Capacitor project is ready to go! 🎉 Add platforms using "npx cap add": npx cap add android npx cap add ios npx cap add electron Follow the Developer Workflow guide to get building: https://capacitor.ionicframework.com/docs/basics/workflow [OK] Integration capacitor added! |
Depending on the requirements of the project you can use other options with Ionic.