Serving on Cloud9

Let’s get our Ionic Conference app up and running:

ionic serve --port=8080 --no-open

Here we’re telling the Ionic CLI we want to serve the app over the web. Under the hood, the app uses Angular for the PWA framework, so Ionic CLI delegates its web serving functionality to Angular’s development web server.

Cloud9 has an application preview feature that will let us privately view a running web application as long as it’s served on port 8080. By privately, we mean that as long as you are signed into AWS and are using Cloud9, only you can navigate using a web browser to the underlying EC2 instance through your Cloud9 session, but any other traffic inbound to the Cloud9 EC2 instance will be dropped.

In order to use the Cloud9 preview feature, we need to serve our web app on port 8080, and Cloud9 will handle proxying the traffic, which is exactly what we’re specifying in the Ionic CLI command.

Finally, by default Ionic CLI will try to launch a new web browser with the app as the default URL, but we’ve specified --no-open to prevent that behavior, since we’ll be using Cloud9’s app preview feature instead, which is not quite a fully fledged web browser.

Now let’s preview our app! From the top menu in Cloud9, select “Preview” and then “Preview Running Application”. You should see something like the this:

If you’d like to open the web app in your own browser window, click on the Pop Out button in the upper right corner of the Cloud9 Preview window:

So if you’re using Chrome in your local environment, for example, you’ll see: