Getting Started with frontend

We recommmend using VSCode as IDE, however you can also use your favorite IDE.

At this time only the frontend is full Open Source. In the following steps do you learn how to setup the frontend of the Phonebook.

To contribute to the backend please contact one of the contributors.

Quickstart with Node

1. Install the current Version of
   • Node LTS and
   • GIT
2. Optional: If you need to setup Proxies follow the steps below. (You only need to setup proxies if you’re behind a corporate proxy.)

npm config set proxy http://proxy.example.de:8080
npm config set https-proxy http://proxy.example.de:8080
git config --global http.proxy http://proxy.example.de:8080
git config --global https.proxy http://proxy.example.de:8080

1. Setup the Project:

cd /the/place/you/want/to/clone/to

git clone https://github.com/T-Systems-MMS/phonebook

cd phonebook/Phonebook.Frontend

# Install Angular/cli
npm install -g @angular/cli

# Install the project dependencies
npm install

# Pull the docker image for backend mock & run it
docker pull tsystemsmms/phonebook-build:mock-backend
docker run --rm -p 8080:80 -it tsystemsmms/phonebook-build:mock-backend

# Run the project
npm run start -- --open

If you are behind a corporate proxy you also need to set the proxy in your docker settings to pull the mock-backend. A tutorial can be found on the internal page.

If you want to use a different backend server edit the Angular Proxy in the proxy.conf.json.

You’re ready to develop the Phonebook-Frontend application! Start by reading the General Guide to get an overview.

In order to circumvent Bugs coming from unsecured Websites please add the certificate used on the localhost page to your ‘Trusted Root Certification Authorities’. (For Windows: In Chrome just click at the top ‘Not secure’ then click on Certificate, Details, Copy to File, save it anywhere and add the certificate to your ‘Trusted Root Certification Authorities’. )

General concept:

There are two ways you can run the phonebook locally (from the “Frontend” folder), each serving a special purpose:

1. Running “npm run start”: This starts the regular Angular development server you should use primarily for development (you may wanna start the mock backend as well, see the quickstart above on that).
2. Running “docker compose up –build”: This is used to test if the environment variables work correctly. This is not intended to be used for normal development, as it won’t find the mocked backend. However, if you need to test if the enviroment variables work correctly, this is the way to go.

   Head over to localhost:80 to see the result after starting the docker container.
   You’ll find the content of index.html with the replaced variables as a response in the API call to /api/people (after typing any letter into the search bar to trigger the API call.)