This tutorial is part of a serious of tutorials
Although you can develop mobile apps on any operation system of your choice but for this tutorial I am assuming that you are using Microsoft Windows operation system. To work with Ionic we need to install a few packages and tools such as NodeJS and NPM on our machine. Perhaps you already have these packages installed, so make sure your environment is set up properly and you have upgraded these packages to their latest versions.
NodeJS installer will also install NPM on your machine which is a package manager for managing NodeJS packages and modules. Please keep in mind that npm gets updated more frequently than Node does, so you'll want to make sure it's the latest version. Luckily npm knows how to upgrade itself. Run the following command in command window to upgrade npm.
npm install npm@latest -g
You can now verify the node and npm versions by running following the command in command window.
node -v npm -v
Ionic can be installed as a NodeJS package through the Node Package Manager (npm) directly from the command line. Run the following command in command window to install latest version of Ionic. The -g flag will install Ionic globally so we can access it from anywhere in our machines. It will also add Ionic tools such as Ionic CLI to our Windows operation system PATH so that we don’t need to set the PATH ourselves.
npm install -g ionic@latest
You can verify the Ionic installed version by running the following command in command window.
Ionic comes with tool called Ionic CLI which is a command line interface to perform a lot of Ionic magic. It can be used to create, build, test, and deploy Ionic apps onto any platform. The command line interface can be a little intimidating if you’re used to a GUI (Graphic User Interface) approach, but it’s really super simple once you get the hang of it and you can do some cool stuff with it and save lot of your development time when building Ionic apps.
Create a new directory in your file system and navigate to the directory location in Command Window to create a new Ionic project. Type the following command to create a new Ionic Project with the name food-recipes-app and press Enter. You will be asked to choose one template from the list of ready-made app templates Ionic provides. For this tutorial you can choose sidemenu template.
ionic start food-recipes-app
Once Ionic project is created navigate to the newly created food-recipes-app folder using the following command
We can serve and preview our newly created app in the browser using Ionic CLI serve command.
The command will open up a browser at http://localhost:8100. The browser screen is too large to preview a mobile app and for that reason, Ionic added -- lab as an option to running the app in the browser so as to preview the app better as it would be seen in Android and iOS.
You can find more information about different Ionic CLI commands at following URL:
Off course, you can also use some other editor. Here are some popular options for you.
At first glance, the files inside Ionic project might look scary and overwhelming to you but keep in mind that you will be working on the files in src folder most of the time so initially you can ignore everything else.
Let's have a look at some of the important files and folders created in our project:
|node_modules||Ionic projects use Node package manager (npm) to import modules. All imported modules are placed in this folder.|
|src||The src folder is the most important folder of your Ionic + Angular project. 99% of your work will happen in that folder. It’s the folder that contains all the code you're going to write for the app i.e. the pages and services.|
|www||This folder contains the code that is auto generated by the build scripts out of your application code. Do not change any code inside this folder because the files in this folder will be deleted and regenerated every time your app will be rebuilt and previewed inside your browser.|
|ionic.config.json||This file contains configurations used by the Ionic CLI when executing different commands. This file also contains some basic information about your project and is used if you upload your app to the Ionic.io platform.|
|tsconfig.json||This file is related to TypeScript and contains configurations for the TypeScript compiler so that it can compile TypeScript files accordingly.|
|tslint.json||This file is also related to TypeScript and contains TSLint related options. TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.|
|package.json||This file contains the list of all npm packages that are used in this project.|
In first part of this tutorial series, I have given you overview of Ionic and Angular. I have also explained how to setup development environment by installing NodeJS and Ionic CLI etc. I have also demostrated the process of creating and running a new Ionic project using Ionic CLI commands. We have also learned about role of different folders and files in Ionic project. In Part 2 of this tutorial series, you will learn about Styling Ionic apps using Themes and colors so continue reading this tutorial series by clicking the Part 2 below.
This tutorial is part of a serious of tutorials