In today’s modern software development world, it’s nearly impossible to avoid the command line. Sure, various graphical tools exist to make things easier, but the real power lives in the command shell. In this course, you will explore the Ionic CLI.
Since its inception, the Ionic Framework has included a rudimentary command line interface. Though only a few years old, it has matured into a powerful tool that should be part of every developer’s toolbox. This course, Ionic CLI, will start at the top and explore the Ionic CLI. First, you'll see how to create projects and components. Next, you will learn how to build and serve apps. Finally, you'll discover how to share projects with others, and even integrate with other build tools. Whether you’re just starting to explore Ionic, or have been using it since its pre-beta days, there is something here for you. By the end of the course, you’ll have the confidence to use the Ionic CLI as part of your everyday Ionic development.
Software developer / Tech Lead with more than twenty years of professional software development experience, primarily in Microsoft and Linux environments, the past decade of which has been spent assembling, mentoring, and leading development teams.
Course Overview Hi everyone. My name is Mike Callaghan, and welcome to my course on the Ionic CLI. When I studied computer science in college in the 1980s, graphical user interfaces like the Macintosh and Windows barely existed. Most of us back then learned software development exclusively with the command line, bland text editors, and even make files. In the 90s, modern IDEs entered the scene and everything changed. Sometimes though, it feels like the entire industry goes in circles. Thirty years later, the command line seems to be reemerging in both prominence and importance. If you don't want to get left behind, you owe it to yourself to embrace the command line and use it to enhance your day-to-day development experience. In this course, we will be all about the command line, even forgoing some UIs in favor of the command-line version. Don't worry though. I'll be here to guide you every step of the way. Some of the major topics we'll cover include starting new Ionic apps from scratch with the Ionic start command, various ways to view your app in a browser or mobile device, building up your app using Ionic Generate, I'll show you how to share your masterpiece with others outside the major app stores, even enhancing the Ionic CLI functionality with NPM scripts. By the end of this course, you should be confident in your ability to use the iconic CLI to supercharge your Ionic development without always having to lean on a graphical interface. Ideally, before starting the course, you should be familiar with the basics of web development using HTML5, TypeScript, and maybe a little Angular. It will also help if you've already done a few of the Ionic tutorials. I hope you'll join me on this journey to learn more about the power of the command line with the Ionic CLI course, at Pluralsight.
Ionic CLI Setup and Introduction With the major prerequisites out of the way, it's time to install the Ionic CLI and take a quick tour. Hi. This is Mike Callaghan. In this module, we will ensure that everything is installed correctly, show you how to get more info, view the online documentation, and discuss setting up an Ionic Pro account. The primary purpose of this module is to get you up and running and to ensure that you know where to turn when you need help. To that end, I'll show you how to install the latest version of Ionic framework and use the Ionic info command to get a snapshot of your installation at any time. If you get stuck, the Ionic docs command will take you to the official online documentation. I'll also walk you through Ionic optional pro signup procedure. We'll wrap things up with a look at creating a new Ionic project with the Ionic start command. You're probably eager to do something cool and interesting, so let's get started. Let's first make sure that the Ionic framework and its CLI are installed on your system. It's really easy to do, simply install the Ionic Command-line tools with the command shown here. If you haven't used npm before, it's a package manager for Node. js. Ionic and all of its tools are provided as npm packages. Here we are telling npm to install Ionic from the global public npm registry. The -g parameter tells npm to install the Ionic tools globally, which means they can be accessed outside of a given project.
Generating a New Ionic App We've spent a little bit of time setting the foundation and now you're probably eager to build something tangible. Hi. This is Mike Callaghan, and in this module, we're going to do just that. We'll use the ionic start command to generate a few different Ionic projects based on the various available starter templates. When building a new software application, it's often difficult to know where to start. You're given an empty folder, an empty code editor, what have you. From there, it's all up to you. To fill that emptiness, at least where the Ionic team is concerned, they have created a set of commands to ease that terrible burden from our shoulders. To that end, we'll take a look at the Ionic start command. We'll explore some of the more common templates available to us, discuss some of the command's options and when you'd want to use them, and finally, we'll build some projects using those options to see how they're organized. At the end of this module, you should be comfortable starting a brand new Ionic project and understanding which options you want to use.
Viewing Your Application Once you have an application, you'll want to see it running somewhere. Much of your Ionic development will probably be done in the browser. The Ionic CLI makes it quick and easy to do that providing a reasonable approximation of the various mobile platforms. There is even a convenient way to see your app running directly on a mobile device during development. Hi. This is Mike Callaghan. In this module, I'll show you everything you need to see your application running in both a browser and a mobile device. Ionic provides multiple convenient ways for you to see your app in action. We'll start with Ionic Serve, which we briefly saw in the previous module. Ionic serve is the first and simplest to use and understand. It provides most of what you need to get up and running quickly. It provides a live reload feature so the changes you make in your source code are reflected almost immediately. We'll look at that one, as well as some other common Ionic serve options. We'll finish with Ionic DevApp in case you want to see your app on a real device, yet still get the benefits of live reloading. When this module is done, you'll be ready to start bringing your app ideas to life.
Generating Pages and Code By now, you should know how to start a new Ionic application and display it both in a web browser and on mobile devices. Now it's time to add some content. Hi. This is Mike Callaghan, and in this module, we're going to go over some of the various code generators provided by the Ionic CLI and build a sample demo app. There are lots of generators available to the Ionic developer with more being added all the time. The generators that are available for your project depend on what type of project you have. For this module, I'm going to stick to the Angular project, the newer one, as that's the one I think will be the most popular. We'll start by looking at an overview of the ionic generate command. Then we'll review some of its options that apply to most project types. We'll initialize a Git repository to make it easier to see the changes made by Ionic generate. Finally, we'll build a modest sample application that will use a few of the more common templates. I won't go over all of the available templates, there's a lot of them, and the mechanics are similar for each of them. The primary difference is what they do internally and that's beyond the scope of this course. What's our demo app going to be? Do you remember mad libs from the 70s? Well, apparently, they're still around. We're not going to do that. Instead, our demo app will be very poor imitation of this where we replace some text with a custom HTML tag that will communicate with a custom service to display a random word and hopefully make us chuckle. More on that when we get there though. First, we're going to need to go over the basics.
Sharing Your App with the World So far in this course, everything you've done has been local and anonymous. If you want to share what you've written with a wider audience before publishing a production version, the Ionic CLI lets you upload a test version of your app that you can then give to others. Hi. This is Mike Callaghan, and in this module, I'll demonstrate how to use a local project and link it to an existing Ionic Pro application and then share it with other for testing and feedback. First thing I'll need to do is provide a brief introduction to the Ionic Pro itself. We won't go too deep, just enough to show you the integration points with the Ionic CLI. Next, I'll show you how to link your app to Ionic Pro. Then we'll use the Ionic CLI to upload your code to Ionic Pro. Once that's done, we'll download the Ionic View app to both iOS and Android devices and show you how to share your masterpiece with others. Finally, we'll take a look at the Ionic Build command, which is required if you want to deploy your app to a web server or mobile device. That's a lot to do in a short period of time, so let's get started.
Advanced Topics In the prior modules of this course, we covered a lot of pieces of the Ionic CLI, but there are some items that didn't feel like they quite fit. Hi. This is Mike Callaghan. In this final module, we'll look at some of the more advanced parts of the Ionic CLI that go above and beyond creating applications, generating components, viewing the app, and so forth. Many of the topics in this module didn't really fit anywhere else, but I'm going to try to present them here in a logical manner showing you how they relate to each other where possible. We'll take a look at Ionic Build. To prepare your app for final submission to an app store or uploading it to a web server, the Angular CLI is underneath just about everything the Ionic CLI does. NPM is highly configurable and scriptable and I'll show you how to customize some of those scripts in this section. The Ionic Doctor command can be used to identify common issues in your Ionic project. Ionic config provides a way to edit two prominent Ionic configuration files safely. If you run into issues with your SSH keys at Ionic Pro, the Ionic SSH command can help you resolve them. Ionic currently supports two different types of integrations, Capacitor and Cordova. To help you build hybrid mobile applications, Ionic integrations helps you set that up. Finally, I'll give you a sneak peek at running your Ionic application on the desktop using Electron. That's a lot to do so let's get going.