In this tutorial, we are going to walk through how to create an Ionic 4 application. We'll be covering the creation of a basic Ionic 4 application and the folder structure of the generated application.
You need to go through the following steps in order to create an Ionic 4 application.
Install CLI
Note - It's not officially released yet but you can start using the Release Candidate version of it.
You can install Ionic CLI (Release Candidate) by running the following command.
npm i -g ionic@rc
Enable Angular Project Type
ionic config set -g features.project-angular true
Ionic Start
To generate an Ionic app, run the following command in the terminal and it will prompt to enter the project name.
ionic start
I've given the project name as ionic4-demo; you can give it to anything you want and then press Enter.
Choose Project Template Type
Then, it will prompt you to select the project type.
There will be three options as below.
- angular | Ionic Angular v4+
- ionic-angular | Ionic Angular v2/v3
- ionic1 | Ionic1
Select the first option because we are going to create an ionic4 application, and press Enter.
Integration With Cordova
It will start creating the necessary stuff to generate the ionic application and will prompt you to integrate the app with Cordova. You can type y/n based on your need. I am entering "n" and hitting Enter.
Automatic Dependency Installation
Then, it will start installing all the dependencies.
Note
It can fail if it requires administrative permission. In that scenario, you need to install the package by navigating into project folder as following,
cd ionic4-demo npm install
Depending on your setup, you might need to add
sudo in order to work with the permissions.
Run Ionic App
If all packages are installed successfully, then run the Ionic project by executing the following command.
ionic serve
It may throw the following error pointing that it cannot find module 'node-sass'.
That's because your project is missing
node-sass package; you can install it by running the following command.
npm install node-sass
And then, again, run the Ionic project using ionic serve.
That's it. We've created our Ionic4 application successfully. It will generate an application based on what you've selected in project type options.
Project Structure
This structure follows the typical Angular project. If you've ever worked on an Angular project, then you'll be familiar with this structure. We have an src directory that acts as the home for our webapp. This includes the index.html, any assets, environment variables, and any app-specific config files.
Thanks for reading the article.