Ref: https://ionicframework.com/docs/intro/installation/
Make sure node already installed
|
1 2 |
teddy@teddy:~$ npm -v 5.6.0 |
Installation
|
1 2 3 4 5 6 7 8 9 |
teddy@teddy:~$ npm install -g ionic cordova /home/teddy/.nvm/versions/node/v8.9.4/bin/cordova -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/cordova/bin/cordova /home/teddy/.nvm/versions/node/v8.9.4/bin/ionic -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/ionic/bin/ionic npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/ionic/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) + cordova@8.0.0 + ionic@3.19.1 added 661 packages in 27.424s |
Check the ionic version
|
1 2 |
teddy@teddy:~$ ionic -v 3.19.1 |
Check the cordova version
|
1 2 |
teddy@teddy:~/Documents/node/MyIonicProject$ cordova --version 8.0.0 |
Create a test ionic project
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
teddy@teddy:~$ cd Documents/node/ teddy@teddy:~/Documents/node$ ionic start helloworld blank ✔ Creating directory ./helloworld - done! ✔ Downloading and extracting blank starter - done! ? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes ✔ Personalizing ionic.config.json and package.json - done! > ionic integrations enable cordova --quiet ✔ Downloading integration cordova - done! ✔ Copying integrations files to project - done! [OK] Added cordova integration! Installing dependencies may take several minutes. ✨ IONIC DEVAPP ✨ Speed up development with the Ionic DevApp, our fast, on-device testing mobile app - 🔑 Test on iOS and Android without Native SDKs - 🚀 LiveReload for instant style and JS updates ️--> Install DevApp: https://bit.ly/ionic-dev-app <-- > npm i ✔ Running command - done! > git init 🔥 IONIC PRO 🔥 Supercharge your Ionic development with the Ionic Pro SDK - ⚠️ Track runtime errors in real-time, back to your original TypeScript - 📲 Push remote updates and skip the app store queue Learn more about Ionic Pro: https://ionicframework.com/products ? Install the free Ionic Pro SDK and connect your app? Yes ----------------------------------- > npm i --save -E @ionic/pro ✔ Running command - done! > ionic link Log into your Ionic account If you don't have one yet, create yours by running: ionic signup ? Email: advcha@yahoo.com ? Password: [hidden] [ERROR] Incorrect email or password. |
Run the project
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
teddy@teddy:~/Documents/node$ cd helloworld/ teddy@teddy:~/Documents/node/helloworld$ ionic serve Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser - Ctrl+C to cancel [09:51:13] watch started ... [09:51:13] build dev started ... [09:51:13] clean started ... [09:51:13] clean finished in less than 1 ms [09:51:13] copy started ... [09:51:13] deeplinks started ... [09:51:13] deeplinks finished in 9 ms [09:51:13] transpile started ... [09:51:14] transpile finished in 1.75 s [09:51:14] preprocess started ... [09:51:14] preprocess finished in 1 ms [09:51:14] webpack started ... [09:51:14] copy finished in 1.91 s [09:51:18] webpack finished in 4.06 s [09:51:18] sass started ... Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. [09:51:19] sass finished in 654 ms [09:51:19] postprocess started ... [09:51:19] postprocess finished in 3 ms [09:51:19] lint started ... [09:51:19] build dev finished in 6.52 s [09:51:19] watch ready in 6.55 s [09:51:19] dev server running: http://localhost:8100/ [OK] Development server running! Local: http://localhost:8100 External: http://192.168.1.5:8100 DevApp: helloworld@8100 on teddy [09:51:20] lint finished in 1.44 s ^C |
New Project
ref: https://ionicframework.com/docs/intro/tutorial/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
teddy@teddy:~/Documents/node$ ionic start MyIonicProject tutorial ✔ Creating directory ./MyIonicProject - done! ✔ Downloading and extracting tutorial starter - done! ? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes ✔ Personalizing ionic.config.json and package.json - done! > ionic integrations enable cordova --quiet ✔ Downloading integration cordova - done! ✔ Copying integrations files to project - done! [OK] Added cordova integration! Installing dependencies may take several minutes. ✨ IONIC DEVAPP ✨ Speed up development with the Ionic DevApp, our fast, on-device testing mobile app - 🔑 Test on iOS and Android without Native SDKs - 🚀 LiveReload for instant style and JS updates ️--> Install DevApp: https://bit.ly/ionic-dev-app <-- > npm i ✔ Running command - done! > git init 🔥 IONIC PRO 🔥 Supercharge your Ionic development with the Ionic Pro SDK - ⚠️ Track runtime errors in real-time, back to your original TypeScript - 📲 Push remote updates and skip the app store queue Learn more about Ionic Pro: https://ionicframework.com/products ? Install the free Ionic Pro SDK and connect your app? Yes ----------------------------------- > npm i --save -E @ionic/pro ✔ Running command - done! > ionic link Log into your Ionic account If you don't have one yet, create yours by running: ionic signup ? Email: advcha@yahoo.com ? Password: [hidden] [ERROR] Incorrect email or password. |
Go to the project and run
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
teddy@teddy:~/Documents/node$ cd MyIonicProject/ teddy@teddy:~/Documents/node/MyIonicProject$ ionic serve Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser - Ctrl+C to cancel [09:55:49] watch started ... [09:55:49] build dev started ... [09:55:49] clean started ... [09:55:49] clean finished in 1 ms [09:55:49] copy started ... [09:55:49] deeplinks started ... [09:55:49] deeplinks finished in 13 ms [09:55:49] transpile started ... [09:55:51] transpile finished in 1.76 s [09:55:51] preprocess started ... [09:55:51] preprocess finished in 1 ms [09:55:51] webpack started ... [09:55:51] copy finished in 1.93 s [09:55:55] webpack finished in 4.07 s [09:55:55] sass started ... Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. [09:55:56] sass finished in 674 ms [09:55:56] postprocess started ... [09:55:56] postprocess finished in 3 ms [09:55:56] lint started ... [09:55:56] build dev finished in 6.57 s [09:55:56] watch ready in 6.59 s [09:55:56] dev server running: http://localhost:8100/ [OK] Development server running! Local: http://localhost:8100 External: http://192.168.1.5:8100 DevApp: MyIonicProject@8100 on teddy [09:55:57] lint finished in 1.49 s |