Ionic 4: todo App + firebase

7 Running the App in the Browser Building Mobile Apps with I

in this video we are going to learn how we can run our ionic application in the browser we'll be using the ionic CLI to serve the ionic application in the

browser and we'll also learn how the chord changes are reflected in the browser as we make them in visual studio code so here is the project folder opened inside visual studio code and the

first thing I'll do is open up the terminal in visual studio code one of the reasons we chose visual studio code over any other code editor is that visual studio code has a built in

terminal you can open it from the View menu so go to view and select terminal this opens the built-in terminal in Visual Studio code if you prefer using the terminal built

into Mac or command prompt if you are on Windows that's okay too but make sure that the command that we are going to execute is executed inside your project folder so as you can see

that Here I am inside the to-do app folder and the command to run our ionic application in the browser is ionic serve and optionally you can pass in the flag – – L this command spins up a

development server on your system and launches the application in the browser this way you can test your application while you are developing your application inside your code editor the

development server also monitors the project folder for any file changes and as soon as you make a code change in any of your project files the server refreshes the application in the browser

the – – L flag here stands for lab mode and if you pass in the – – L flag you will be able to see how your application looks exactly on an Android n iOS device simultaneously so let's go ahead and run

this command and see what happens so inside the terminal in Visual Studio code inside my project folder I am going to execute the command ionic serve – – L and it prompts me if I want to install

at ionic / lab package this is the package that is required if you want to serve your application in the lab mode since I want to I'll type in y and press enter and in just a few seconds the

compilation of the application will complete and the application will be launched in the browser so here is the browser opened up with my ionic app running inside an iOS and an android

emulator right here in the browser and I can see my application as it would look like on an iOS and an Android device simultaneously now what you see here is the application that was created when

you ran the ionic start command with the blank template to find out what other templates are available head over to ionic framework comm slash Doc's slash CLI slash starters dot HTML

and here you can see that you have a total of seven templates tabs blank which is the one that we used side menu super conference tutorial and AWS feel free to try out these templates all

these templates will result in a very different application out of the box since we want to create our application all by ourselves we'll be using the blank template if you head back to

Visual Studio code you can see that a development server is running and this server is actually monitoring your files and folders for changes let's go ahead and make a small change to a file inside

the SRC folder which stands for source and inside this folder go to the app folder go to home and open up home dot page dot HTML and in this file let's change this title to ionic is wonderful

and as I saved this file you can see that the CLI compiled the application again and if you head back to the browser you can see that the changes are reflected immediately so the application

is refreshed as soon as you save your code changes in your code editor so now that we know how we can run our application in the browser in the next video we'll understand how we can run

our application on real devices or emulators