The exercises in this lesson are an extension of the exercises you have already done in the previous course - "Full Stack Apps on AWS". We will use the same "Udagram" project to perform the tasks as mentioned in the project instructions.
Before we get started, confirm that you have installed NodeJs, npm and Ionic Framework by checking the versions:
node --version
npm --version
ionic --version
If you get a not found
message, install the required item:
- Ionic CLI if you don't already have it installed
- Nodejs and npm
Perform the following tasks in the sequence mentioned below:
Clone the course repo and stay on the master
branch.
git clone https://github.com/udacity/nd9990-c3-microservices-v1
cd nd9990-c3-microservices-v1/
git branch
Navigate to the /lesson-1-Best-Practices/exercises/
directory.
For this server to work you'll need to access the AWS RDS database and S3 bucket that you set up in the Full Stack App on AWS Course. Make sure that the RDS instance is running and that you have defined all of the environment variables in your ./profile
file that is called in the config.ts
:
POSTGRESS_USERNAME
POSTGRESS_PASSWORD
POSTGRESS_DB
POSTGRESS_HOST
AWS_REGION
AWS_PROFILE
AWS_BUCKET
JWT_SECRET
If you need a refresher on how to do this, see the Handling Secrets with Environment Variables lesson.
Create (if not exists) a .profile
file in ~
or $HOME
directory to contain the user-specific variables. Follow the below steps:
- In the
~
directory, runecho $PATH
. Copy the output. - Create a new
.profile
file usingtouch .profile
. - Open it up for editing using any editor. Add the copied $PATH variable value, for example:
export PATH=$PATH:/usr/local/mysql/bin/
- Add the value for other variables specific for you:
export POSTGRESS_USERNAME=myusername;
export POSTGRESS_PASSWORD=mypassword;
export POSTGRESS_DB=postgres;
export POSTGRESS_HOST=udagramdemo.abc4def.us-east-2.rds.amazonaws.com;
export AWS_REGION=us-east-2;
export AWS_PROFILE=default;
export AWS_BUCKET=udagramdemo;
export JWT_SECRET=helloworld;
Change the values of the above mentioned variables as applicable for you.
Ionic uses enviornment files located in ./src/enviornments/enviornment.*.ts
to load configuration variables at runtime. By default environment.ts
is used for development and enviornment.prod.ts
is used for produciton. The apiHost
variable should be set to your server url either locally or in the cloud.
We will start the backend first and the frontend later. Open a new terminal and navigate to the /udacity-c3-restapi/
directory. Use npm
to install all dependencies as mentioned in the package.json
:
npm install
source ~/.profile
npm run dev
Next, open another terminal and navigate to the /udacity-c3-frontend/
folder, and use npm
to install all dependencies:
npm install
Ionic CLI provides an easy to use development server to run and autoreload the frontend. This allows you to make quick changes and see them in real time in your browser. Start the Ionic server as follows:
ionic serve
A successful command would automatically start the services at http://localhost:8100/home
.