Ionic 4 — The First Steps

We will try here to create our first application using the Ionic framework.

First, the version (4) of the Ionic is given by the web components library version built on a given web framework @ionic/angular (there is a different version for React case @ionic/react library). It is not given by the Ionic CLI version — in our case, the CLI version is 5.4.5.

Let's install the latest Ionic version

We want to install Ionicon our machine, and for this, we need to download and install NodeJS first. We have to download (the best idea is to use the LTS — Long Term Support version) from https://nodejs.org and install it on our machine.

After installation we can verify the Node version in our terminal:

node --version

We get:

v10.15.0

Node is coming with a package manager named Npm. We need it for dependencies management of JavaScript libraries and frameworks installed on our machine (the same idea to yum or apt package managers in Linux, or Maven and Gradle dependency management systems in Java). We can also check the Npm version:

npm version

We will get this:

{ npm: '6.4.1',
ares: '1.15.0',
cldr: '33.1',
http_parser: '2.8.0',
icu: '62.1',
modules: '64',
napi: '3',
nghttp2: '1.34.0',
node: '10.15.0',
openssl: '1.1.0j',
tz: '2018e',
unicode: '11.0',
uv: '1.23.2',
v8: '6.8.275.32-node.45',
zlib: '1.2.11' }
tz: '2018e',
unicode: '11.0',
uv: '1.23.2',
v8: '6.8.275.32-node.45',
zlib: '1.2.11' }

Next, we install Ionic CLI (Command Line Interface) using Npm package manager:

npm install -g ionic

We can test now the Ionic framework version of our machine:

ionic info

We get:

Ionic:
Ionic CLI                     : 5.4.5
Ionic Framework               : @ionic/angular 4.1.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics    : 7.2.4
@angular/cli                  : 7.2.4
@ionic/angular-toolkit        : 1.4.0
Cordova:
Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins   : no whitelisted plugins (0 plugins total)
Utility:
cordova-res : not installed
native-run  : not installed
System:
Android SDK Tools : 26.1.1 (/Users/colaru/Library/Android/sdk)
ios-deploy        : 1.9.2
NodeJS            : v10.15.0 (/usr/local/bin/node)
npm               : 6.4.1
OS                : macOS Catalina
Xcode             : Xcode 11.1 Build version 11A1027

Create a new application

Now we are prepared to start our first application using Ionic 4 and its Command-Line-Interface — CLI. We will generate a blank starter application — we will don’t have any side menu or tabs. There are two other alternatives sidemenu and tabs.

cd ~/MVPS/
ionic start thenet blank --type=angular

We used — type=angular flag to create an Ionic project (otherwise, the old Ionic 2 project is generated). The confirmation:

IonicBook:MVPS colaru$ ionic start thenet blank — type=angular
[WARN] Detected locally installed Ionic CLI, but it’s too old — using global CLI.
✔ Preparing directory ./thenet — done!
✔ Downloading and extracting blank starter — done!
? Integrate your new app with Cordova to target native iOS and Android? (y/N)

The Ionic 4 application folders structure

Now, if we look at the structure of generated app:

tree thenet -L 2 | pbcopy

We will see this folders structure:

thenet
├── angular.json
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   └── tsconfig.e2e.json
├── ionic.config.json
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── global.scss
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.ts
│   ├── polyfills.ts
│   ├── test.ts
│   ├── theme
│   ├── tsconfig.app.json
│   └── tsconfig.spec.json
├── tsconfig.json
├── tslint.json

This is a classical Ionic 4 application folder structure.

Test the PWA Web app locally

Now build it and run it:

cd thenet
ionic serve

We will see the Web app as it looks on our browser: