dpcunningham / process-spinup-devenv-ionic4-ng-on-linux

Process: Spin Up a Development Environment for Ionic 4 (default Angular) Apps
0 stars 0 forks source link

exercise 1: A basic Ionic4 "hello world" starter PWA (no IDE required) #7

Open dpcunningham opened 4 years ago

dpcunningham commented 4 years ago

Following the steps in the "official" guide: Get started with Ionic

Note that no IDE is required to finish this exercise.

Let's just make sure we're ready first, and we have a good place to work...

$ cd ./projects/ionic4.demos/
$ ls -la
drwxr-xr-x 2 dpc dpc 4096 Dec 20 13:20 .
drwxr-xr-x 4 dpc dpc 4096 Dec 20 13:21 ..

$ node --version
v12.14.0
$ npm --version
6.13.4

This is kind of a shitty guide. They say, in a very blasรฉ/sanguine tone...

First, install Node.js. Then, install the latest Ionic command-line tools in your terminal. Follow the Android and iOS platform guides to install required tools for development.

They don't bother to mention that these platform guides (from Apache Cordova) lead into pretty significant complexities around tool & component & workflow configuration.

We'll fix that later -- with much better content from other folks.

Let's just see what we run into below...

dpcunningham commented 4 years ago

First Lie (errr.... ummm.... insufficient documentation):

$ npm install -g ionic
npm WARN deprecated superagent@4.1.0: Please note that v5.0.1+ of superagent removes User-Agent header by default, therefore you may need to add it yourself (e.g. GitHub blocks requests without a User-Agent header).  This notice will go away with v5.0.2+ once it is released.
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dpc/.npm/_logs/2019-12-20T21_32_12_712Z-debug.log

I'm gonna guess this is a sudo fixable problem...

$ sudo npm install -g ionic
[sudo] password for dpc:                  
npm WARN deprecated superagent@4.1.0: Please note that v5.0.1+ of superagent removes User-Agent header by default, therefore you may need to add it yourself (e.g. GitHub blocks requests without a User-Agent header).  This notice will go away with v5.0.2+ once it is released.
/usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic -> /usr/local/lib/nodejs/node-v10.16.3-linux-x64/lib/node_modules/ionic/bin/ionic
+ ionic@5.4.13
added 33 packages from 22 contributors, removed 18 packages, updated 67 packages and moved 1 package in 10.198s

I'm guessing I can ignore the WARN above & press on?

Some Qs (for a veteran):

  1. Was sudo-ing my way out of this not a great thing to do?
  2. Should I not have installed Node.js/npm (way back whenever I did it) with what likely was a sudo-ish approach (which I probably had to to create dirs in places like /usr/lib)?
    • $ sudo apt-get install approaches would seem to lag way behind the LTS version(s).
  3. Is there any more "modern" approach based on Docker, etc?
dpcunningham commented 4 years ago

AYFKM?

$ ionic start myApp sidemenu

Command 'ionic' not found, did you mean:

  command 'sonic' from deb sonic
  command 'ionice' from deb util-linux
  command 'ironic' from deb python-ironicclient
  command 'ironic' from deb python3-ironicclient

Try: sudo apt install <deb name>

$ node --version
v12.14.0
$ npm --version
6.13.4

Looking more closely at the result from the previous step...

$ ls -l /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic
lrwxrwxrwx 1 500 500 35 Dec 20 13:34 /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic -> ../lib/node_modules/ionic/bin/ionic

The natural Q is: WTF is my ionic instance link buried back in the node 10x version?

dpcunningham commented 4 years ago

Well, this is BS. Let's try to brute force our way out of it...

Let's re-link that shit...

$ ls -l /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic
lrwxrwxrwx 1 500 500 35 Dec 20 13:34 /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic -> ../lib/node_modules/ionic/bin/ionic

$ sudo ln -s /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic /usr/local/bin/ionic
[sudo] password for dpc:                  
$ ls  -l /usr/local/bin/ionic 
lrwxrwxrwx 1 root root 55 Dec 20 14:00 /usr/local/bin/ionic -> /usr/local/lib/nodejs/node-v10.16.3-linux-x64/bin/ionic  

Action Items:

  1. Review this solution.
  2. Resolve WTF this happened in the first place?
dpcunningham commented 4 years ago

Let's try a build, shall we?

$ ionic start myApp sidemenu

Pick a framework! ๐Ÿ˜

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular
โœ” Preparing directory ./myApp - done!
โœ” Downloading and extracting sidemenu starter - done!

Installing dependencies may take several minutes.

  โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€

         Ionic Advisory, tailored solutions and expert services by Ionic

                             Go to market faster ๐Ÿ†
                    Real-time troubleshooting and guidance ๐Ÿ’
        Custom training, best practices, code and architecture reviews ๐Ÿ”Ž
      Customized strategies for every phase of the development lifecycle ๐Ÿ”ฎ

                        ๐Ÿ‘‰  https://ion.link/advisory  ๐Ÿ‘ˆ

  โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€

> npm i
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@3.1.4 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/myApp/node_modules/@angular-devkit/build-angular/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/myApp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> @angular/cli@8.1.3 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/myApp/node_modules/@angular/cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Googleโ€™s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/karma/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/@angular/compiler-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1098 packages from 1051 contributors and audited 17247 packages in 44.886s

16 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
> git init
Initialized empty Git repository in /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/myApp/.git/
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'dpc@LT3-Insp17-2017.(none)')
[WARN] Error encountered during commit. Disabling further git operations.

[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
       - Run your app on a hardware or virtual device: https://ion.link/running-docs
dpcunningham commented 4 years ago

Let's try to run this beast...

$ ionic serve
> ng run app:serve --host=localhost --port=8100
[ng] Browserslist: caniuse-lite is outdated. Please run next command `npm update`
[ng] โ„น ๏ฝขwds๏ฝฃ: Project is running at http://localhost:8100/webpack-dev-server/
[ng] โ„น ๏ฝขwds๏ฝฃ: webpack output is served from /
[ng] โ„น ๏ฝขwds๏ฝฃ: 404s will fallback to //index.html
[ng] chunk {common} common.js, common.js.map (common) 24.8 kB  [rendered]
[ng] chunk {core-js-js} core-js-js.js, core-js-js.js.map (core-js-js) 78.7 kB  [rendered]
[ng] chunk {css-shim-206ea950-3169f23e-js} css-shim-206ea950-3169f23e-js.js, css-shim-206ea950-3169f23e-js.js.map (css-shim-206ea950-3169f23e-js) 21.9 kB  [rendered]
[ng] chunk {dom-96781eef-a2fb04dd-js} dom-96781eef-a2fb04dd-js.js, dom-96781eef-a2fb04dd-js.js.map (dom-96781eef-a2fb04dd-js) 19.8 kB  [rendered]
[ng] chunk {dom-js} dom-js.js, dom-js.js.map (dom-js) 20.2 kB  [rendered]
[ng] chunk {focus-visible-70713a0c-js} focus-visible-70713a0c-js.js, focus-visible-70713a0c-js.js.map (focus-visible-70713a0c-js) 2.15 kB  [rendered]
[ng] chunk {hardware-back-button-5afe3cb0-js} hardware-back-button-5afe3cb0-js.js, hardware-back-button-5afe3cb0-js.js.map (hardware-back-button-5afe3cb0-js) 2.06 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 6.68 kB  [rendered]
[ng] chunk {index-69c37885-js} index-69c37885-js.js, index-69c37885-js.js.map (index-69c37885-js) 37.7 kB  [rendered]
[ng] chunk {input-shims-a4fc53ac-js} input-shims-a4fc53ac-js.js, input-shims-a4fc53ac-js.js.map (input-shims-a4fc53ac-js) 13.5 kB  [rendered]
[ng] chunk {ios-transition-504cdd09-js} ios-transition-504cdd09-js.js, ios-transition-504cdd09-js.js.map (ios-transition-504cdd09-js) 26.4 kB  [rendered]
[ng] chunk {list-list-module} list-list-module.js, list-list-module.js.map (list-list-module) 5.7 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 25.1 kB [initial] [rendered]
[ng] chunk {md-transition-fea2bbfb-js} md-transition-fea2bbfb-js.js, md-transition-fea2bbfb-js.js.map (md-transition-fea2bbfb-js) 3.91 kB  [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 278 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 9.74 kB [entry] [rendered]
[ng] chunk {shadow-css-4889ae62-23996f3f-js} shadow-css-4889ae62-23996f3f-js.js, shadow-css-4889ae62-23996f3f-js.js.map (shadow-css-4889ae62-23996f3f-js) 14.8 kB  [rendered]
[ng] chunk {status-tap-32c72c43-js} status-tap-32c72c43-js.js, status-tap-32c72c43-js.js.map (status-tap-32c72c43-js) 1.79 kB  [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 109 kB [initial] [rendered]
[ng] chunk {swipe-back-35ad8e37-js} swipe-back-35ad8e37-js.js, swipe-back-35ad8e37-js.js.map (swipe-back-35ad8e37-js) 2.68 kB  [rendered]
[ng] chunk {swiper-bundle-ccdaac54-js} swiper-bundle-ccdaac54-js.js, swiper-bundle-ccdaac54-js.js.map (swiper-bundle-ccdaac54-js) 176 kB  [rendered]
[ng] chunk {tap-click-ca00ce7f-js} tap-click-ca00ce7f-js.js, tap-click-ca00ce7f-js.js.map (tap-click-ca00ce7f-js) 6.37 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.82 MB [initial] [rendered]
[ng] Date: 2019-12-20T22:15:59.087Z - Hash: 0d5e9030064921791ad9 - Time: 11020ms

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[INFO] ... and 78 additional chunks
[ng] โ„น ๏ฝขwdm๏ฝฃ: Compiled successfully.
dpcunningham commented 4 years ago

Et... voila!

http://localhost:8100/home:

ionic4 starter sdemenu

keppel2 commented 4 years ago

Was sudo-ing my way out of this not a great thing to do?

For npm, you shouldn't have to use sudo. I'm on Mac, and didn't have any problems. Note that apt-get does require sudo.

keppel2 commented 4 years ago
Should I not have installed Node.js/npm (way back whenever I did it) with what likely was a sudo-ish approach (which I probably had to to create dirs in places like /usr/lib)?
$ sudo apt-get install approaches would seem to lag way behind the LTS version(s).

Best would be to apt-get to get the initial npm (which should bring in node with it). You can update npm with npm install -g npm, and shouldn't need sudo. For updating node, you'll need sudo.