It’s easy to get started. Note that all code referenced in this guide can be .

Download/install these right away to ensure an optimal Ionic development experience:

  • Git for version control.
  • Node.js for interacting with the Ionic ecosystem. .
  • A code editor for… writing code! We are fans of Visual Studio Code.
  • Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For Mac/Linux users, virtually any terminal will work.

Run the following in the command line (you may need to prepend “sudo” on a Mac):

Next, create an Ionic v4 app using our “Tabs” app template:


This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

“Install the free Ionic Appflow SDK and connect your app?”

Log into your Ionic Account

Sign in now to easily access awesome features like building native apps in the cloud and Live Deploys later in this tutorial.

What would you like to do?

Choose “Create a new app on Ionic Appflow.”

Which git host would you like to use?

Choose “Ionic Appflow.”

“How would you like to connect to Ionic Appflow?”

  • Choose “Automatically setup a new SSH key pair for Ionic Appflow” if you haven’t used SSH before.


That’s it! Now for the fun part - let’s see it in action.

  1. ionic serve


And voilà! Your Ionic app is now running in a web browser. Most of your app can be built right in the browser, greatly increasing development speed.

There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!

Before and after going through this tutorial

Open the photo-gallery app folder in your favorite code editor of choice, then navigate to /src/app/tab2/tab2.page.html. We see:


represents the top navigation and toolbar, with "Tab 2" as the title. We put our app code into ion-content. In this case, it’s where we’ll add a button that opens the device’s camera and shows the image captured by the camera. But first, let’s start with something obvious: renaming the Tab Two page:

  1. <ion-title>Photo Gallery</ion-title>


Next, open . Change the label to “Gallery” and the icon name to “images”:


Now, back up your changes to Ionic Appflow:

  1. $ git add .
  2. $ git commit -m "converting tab2 page to photo gallery"


That’s just the start of all the cool things we can do with Ionic. Up next, we’ll deploy the app to iOS and Android, then continue building the photo gallery.