Let's get started with the actual code now. On your machine where you have installed all your dependencies, create a new folder named SmartExchange. Open Command Prompt or Terminal inside that folder. Navigate to https://github.com/PacktPublishing/getting-started-with-google-cloud-ai-services and you should find a folder in this repository named Chapter 2codesmart-exchange-base.
If you would like, you can download the entire repository that consists of completed code chapter by chapter, or you can explicitly download the code of one folder using a service such as GitZip. To use GitZip, head over to http://kinolien.github.io/gitzip/ and paste https://github.com/PacktPublishing/Getting-Started-with-Google-Cloud-AI-Services/tree/master/Chapter%202/code/smart-exchange-base%20 in the text box at the top right-hand corner. This will download only the smart-exchange-base folder.
Once you have successfully downloaded the smart-exchange-base folder, cd into thesmart-exchange-base folder from your Command Prompt / Terminal. We have a package.json file at the root of the smart-exchange-base folder. This file has all the required dependencies listed. We would need to install them to get started. Run the following command:
$ npm install
or
$ yarn install
This will install all the dependencies listed. Next, open the entire application in your favorite editor, and then open README.md. This file gives you a quick overview of this app.
As it states here, the base template is created by Davide Violante (https://github.com/DavideViolante) and I have customized it for this book. The original repoistory can be found here: https://github.com/DavideViolante/Angular-Full-Stack. This is one of the latest repositories I have found that has all the key ingredients for developing a production grade application. I have added a bunch of things on top of it to make it a bit more robust.
Once the installation is completed, let's actually set up the Database connection URL. Open .env file present at the root of the folder and update the MONGODB_URI value to the connection string that you have created, the one from mLab. We will walk-through the code in a few moments, which will explain where which value is used. If you leave the connection string as is, you will see an error, as my database no longer exists.
Once you have updated the connection, head back to Command Prompt / Terminal and run the following:
$ npm run dev
or
$ yarn dev
This will concurrently start the Angular CLI server with a proxy to 3000 port on the same machine, which is where our Express server is running, run the TypeScript compiler on the server folder, and execute the app.js present in the dist/server folder on port 3000.
Once the command has finished executing, it will launch the application on your default browser at http://localhost:4200/ and will serve the home page. If everything goes well, we should see something such as this:
Note, if you would like to use a local instance of MongoDB instead of mLab, you can update MongoDB URI as follows:
MONGODB_URI=mongodb://localhost:27017/smart-exchange
Use the following command:
$ npm run dev:local
or
$ yarn dev:local
This script will start the local MongoDB instance as well, along with other initializations. Now that we have set up the project and run it to see the output, lets walk through the code.