Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Lab 0: Setup & Verification of Final Demo Application
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
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
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:
$ ./ngrok http 9090 --host-header=localhost --region=eu
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!
If you have a ngrok subscription and are logged in with your user, make sure to log out first. Some subscriptions only allow a single active tunnel at a time.
4. Launch Client
Before starting the client please make sure to update the
apiUrl found in
environment.prod.ts in the Angular client to match your public ngrok HTTPS URL for your API. You can find the config file in
client/src/environments. Make sure that the
apiUrl ends with
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
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:
$ ./ngrok http 4200 --host-header=localhost --region=eu
ngrok http 4200 --host-header=localhost --region=eu
Use the public HTTPS URL shown by ngrok to launch the demo application on your mobile device.
6. Try It Out
⌘and click here to open the demo application in a new tab.
Open the Developer Tools by pressing
+button in the lower right corner of the screen
Enter a TODO item and press
- 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: