Skip to content

Lab 0: Setup & Verification of Final Demo Application

Jump to bottom
Christian Liebel edited this page Feb 1, 2018 · 5 revisions

1. Prerequisites

Make sure that you have installed all the prerequisites and performed the setup steps described here. We recommend using the versions noted there.

Before we start, please make sure you have the latest version of the repository. To ensure this, open a terminal/command line and navigate to the repository folder. Then run:

$ git pull

Open two terminals/command lines and navigate to the client or api subdirectories, respectively. In both windows, run:

$ npm install

2. Launch API

Once all the npm is are completed, you can launch the demo application client and API. In the API window, run:

$ npm start

The API runs on http://localhost:9090.

3. Run on Your Device: Part 1

To access your application on your device, we’ll use ngrok, an easy-to-use tunneling tool for exposing localhost ports via public URLs. ngrok is available for free - however, when using the free version we have to deal with some limitations, e.g.:

  • Each and every time you start ngrok for a tunnel it will generate new public URLs for you

OK - so now, open one more terminal, navigate to the folder where you downloaded the ngrok executable (or put it into your PATH) and run:

macOS/Linux

$ ./ngrok http 9090 --host-header=localhost --region=eu #for the API

Windows

ngrok http 9090 --host-header=localhost --region=eu

The tool will establish a tunnel to your local servers and makes them available using a public hostname, via HTTP and HTTPS. Note: always use the HTTPS URLs!

4. Launch Client

Before starting the client please make sure to update the apiUrl found in environment.prod.json in the Angular client to match your public ngrok HTTPS URL for your API. Make sure that the apiUrl ends with /api/: https://********.eu.ngrok.io/api/

Once the API has started and you've updated the configuration file, switch to the client app window and run:

$ npm run start-prod

After successfully compiling the client application via the Angular CLI you can open up a browser at http://localhost:4200.

5. Run on Your Device: Part 2

Once the client has started we want to test it on our mobile devices. Like the API we will use ngrok to achieve this. Open a new terminal/command line and run:

macOS/Linux

$ ./ngrok http 4200 --host-header=localhost --region=eu #for the client app

Windows

ngrok http 4200 --host-header=localhost --region=eu #for the client app

Use the public HTTPS URL shown by ngrok to launch the demo application on your mobile device.

6. Try It Out

  • Press Ctrl/⌘ and click here to open the demo application in a new tab.
  • Open the Developer Tools by pressing F12 (Windows/Linux) or ⌥⌘I (macOS).
  • Press the + button in the lower right corner of the screen
  • Enter a TODO item and press Return
  • Click SYNC
  • The application should sync without any errors (check the Console tab in Developer Tools), and you should have three items on your list

If everything worked out fine, the application should look as follows:

Clone this wiki locally