The Different Types of Ionic 5 Starter Template

The Multiple Types of Ionic 5 Starter Templates and What They Do

Thomas George
Jun 8 · 4 min read
Image for post
Image for post

For the developers in the room who have already created a few applications using Ionic, this article will be boring and dull as attending a 2-hour Zoom conference call. I would suggest for the more advanced people to get ahead to the next article.

For the developers in the room that are wanting a quick introduction into the pages of Ionic, how the look, and what they come with without actually having to install, open, and run each of them separately, this is the article for you!

What is Ionic?

What are Progressive Web Apps?

Blank Template

Image for post
Image for post
GIF by Ionic Templates

I know this may be difficult to grasp, but running the below command creates… you guessed it… a blank template. Of course, where it has <YOUR_APP_NAME> that’s where you place the name of your project.

ionic start <YOUR_APP_NAME> blank
ionic serve --lab

Tabs Template

Image for post
Image for post
GIF by Ionic Templates

This template creates a starter Ionic app that has 3 different tabs at the bottom of the screen for a user to click and be able to switch between pages.

ionic start <YOUR_APP_NAME> tabs
ionic serve --lab

Super Template

Image for post
Image for post
GIF by Ionic Templates

The Super Template includes everything but the kitchen sink (although I believe they’re adding that in the next update 🤔). I would not suggest starting with this one as your first dive into Ionic because it comes PACKED.

ionic start <YOUR_APP_NAME> super
ionic serve --lab

Side-Menu Template

Image for post
Image for post
GIF by Ionic Templates

In the Side-Menu Template, you see just how having a sidebar would work inside an Ionic application. The cool part of this template is that it will still work even outside the mobile view in Desktop Mode! The only thing that will change is that the side-menu will become static and you will always be able to view the menu.

ionic start <YOUR_APP_NAME> sidemenu
ionic serve --lab

Conference Template

Image for post
Image for post
GIF by Ionic Templates

I truly love what the Ionic Team makes and they’re keen eye for detail when it comes to documentation and examples. They have set the bar high for future frameworks and software applications. The conference app shows just how much care and detail they put into everything by giving the developer a running example of a mobile application that might possibly be used for a conference.

ionic start <YOUR_APP_NAME> conference
ionic serve --lab

“My First App” Template

Image for post
Image for post
GIF by Ionic Templates

The “My First App” template provides a working mobile application that shows you many different elements that an Ionic application can come with. As well as how to set up each element!

ionic start <YOUR_APP_NAME> my-first-app
ionic serve --lab

— References

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store