Running our Application

Next, we will look into the run option. This option allows us to run our application, and it provides us with an option to create a productive development environment by specifying the --watch option, which configures a watcher to detect changes in our source code and update our browser automatically. This cool feature is known as browser-sync or auto-refresh.

The run command also allows us to specify the environment where we want to execute our application; these are the default environments: dev, stage, and prod. By default, the CLI will run our application using the dev environment. Use the --env flag to change it.

What means exactly each environment? Well, in software development, commonly when you are writing your application you test your code on you local development environment (dev). Once you think its complete, you send it to a Quality Assurance area to test your application, this tests won't be performed on your machine so you need to export your application and deploy it on another server, it will be called the test environment. Finally, once the QA people gives his approval, you code will be deployed in the real world environment (prod). Of course, this is a very basic scope, you will find many more environments in other companies such UAT (User Acceptance Test).

For example, let's get into our application (cd command) and execute the following command:

cd my-app
au run --watch --env prod

The following is the output that has two URLs where we can see our application up and running:

Open the http://localhost:9000 URL in your favorite web browser, and you should see the following:

Pay attention to the last two lines in the console. Those tell you in which port is running your application, it could be different depending on your operating system and which port you have available.

Now, let's test how auto-refresh works, remember that this feature is enabled by adding the --watch option in the au run command.

Open the app.js file located in the src folder and change the 'Hello World!' string to 'Hola Mundo!':

export class App {
  constructor() {
    this.message = 'Hola Mundo!';
  }
}

Save it and go back to your browser; the CLI will detect the change you made in the app.js file and will refresh your browser automatically.

To be more productive, you can use two displays—the first with your application running in the browser and the second with your source code editor.