Step One: Make sure you have your dependencies installed
You can use Ionic on any operating system you like, whether that is Mac OSX, Linux, or Windows. There are certain dependencies I already had installed on my machine (Windows 8) that made the Ionic installation simple. Here’s a list of what I recommend:
Download and install node.js here.
Download and install npm here.
Git: One thing I notice on every installation I run from the terminal is that most pull from source code on Github. This is because the majority of tools that I use are free and/or open-source, including Ionic. Without Git, running certain npm, gulp, or bower tasks may also fail since they are dependent on them. You should install it for this reason.
Download and install Git here.
With these two installed, I recommend you now create a project folder for your app where you would like it located. I ran a mkdir command in the terminal and called my folder “Full Stack WebDev”, which now hoses 4 different projects I created for the specialization and all my tools. Within my master project folder, I created a subfolder called “Ionic” to house my app. Keep your terminal open, cd into the app project folder, and run these npm commands to get the rest of dependencies. Please note: use $ sudo prefix if working with a Mac. Also, -g stands for global, as in a global install:
1. Gulp, a build system used for running tasks within an app. You can also use Grunt if you prefer:
npm install gulp
2. Bower, a package manager. It’s like npm for front-end work:
npm install bower
3. Cordova, a tool that acts as a native container for mobile apps built with Ionic:
npm install -g cordova
4. Ionic, the mobile framework tool I’m using for my app:
npm install -g ionic
5. JSON-server, a temporary node module server used to locally host data needed for my app until deployment:
npm install json-server -g
Depending on how fast your processor is, running these installations could take anywhere from 0-2 minutes each.
Step Two: Set up, start, and run your app
To set up and start your first app with Ionic, cd into the “Ionic” sub project folder you created in step one and run the following command: ionic start <appname> sidemenu. The name of my app is called conFusion, named after the restaurant it’s for, so my command looked like this:
ionic start conFusion sidemenu
Breaking down the vocabulary, a sidemenu refers to a navigation menu that can be accessed by dragging content from side to side. I included this gif below from the Ionic framework documentation as an illustration of sidemenu:
Running this command also provides an app with a variety of contents, including the dependencies needed, and templates you can customize and use in your app:
Starting your app with the sidemenu command provides you with templates located in the “www” folder. These templates include sidebar, menu, login, and others that has Ionic component code provided for you. If you don’t care for the templates, and want to start your app from scratch, you run this command in your terminal for a blank project:
ionic start todo blank
Go through your project folder and examine the contents. To run your app to see what it looks like so far, run the following command in your terminal:
In addition to installing Codova, Ionic, and initiating a starter app, you will also have to add iOS and Android platforms to deploy your app. In our course, Prof. Muppala saved this step until we finished configuring our apps and provided it as an optional step. I’m happy he did, as getting the emulators to work properly proved to be a headache for me. Thankfully, adding the platforms only have to be done once, so I won’t explain the how-to here. For those who are interested, I provided the Cordova guide for Android and iOS here and here. Using Android Studio is also a great option for saving time if you plan to stick to mobile development.
In my post for Day 28, I’ll discuss more about Ionic components and syntax used for code to create your own templates.
*** Day 27 Update ***
- Finished module 4 of the Multiplatform Mobile App Development with Web Technologies course.
- Added a bio section to the Services page in the Bootstrappin’ Portfolio project. Code available at the #100DaysOfCode GitHub repo here.
- Finished week 2 of London U’s MOOC on web design and passed the quiz. See code I worked on here.