Dubai Landmarks

Overview

Example repo using Parse Community Server and Angular. The demo application will be a small showcase of Dubai Landmarks

The frontend was created using as base an open source bootstrap theme (ref1: CleanBlog)

Prerequisites

Environment configuration

The application requires some environment configuration to be present in a form of .env file in the root directory. It is not included in the repo for security reasons, but you can see an example of such a file below:

# Server settings
APP_ID=NqqPKd9Mzzdk0EfhsjfkiuyOXNb4tsqdq6Q8p0cZi
DB_URI=mongodb://localhost:27017/dubai-landmarks
MASTER_KEY=WEwN5oQVcXNff9hVgArtWqJUb8YtJIgFkE3dI4du
PUBLIC_SERVER_URL=http://localhost:1337/parse
SERVER_PROTOCOL=http
SERVER_HOST=localhost
PORT=1337
PARSE_PREFIX=/parse
FILE_KEY=4be8-94b4-a8bc2177-8a21-3d51f7a7b2a5

# Photo settings
PHOTO_WIDTH=250
PHOTO_HEIGHT=250
MAX_PHOTO_SIZE=5000000

# Generic
APP_NAME=DubaiLandmarks
ADMIN_USER=admin
ADMIN_PASSWORD=admin

# Dashboard
PARSE_DASHBOARD_USER_ID=user1
PARSE_DASHBOARD_USER_PASSWORD=pass

Database server

The application requires MongoDB instance to connect to for storing application data. If you have one running, then provide the appropriate connection URI as shown in the above Environment configuration section

If you just need to run one for tests and you have docker installed you can run the following command: docker run -p 27017:27017 mongo which will spin up a mongodb server with its default 27017 exposed on the localhost interface

For easier initialization a database script is provided in scripts/db_seed.sh which can be run to initialize the database with a few reference entities.

It must be given the Database connection URI as well as the File to import and target collection

ex: DB_URI=mongodb://localhost:27017/dubai-landmarks ./scripts/db_seed.sh ./scripts/Landmark.json Landmark

Steps to locally install and run the project

Clone the project using git clone https://github.com/mitsos1os/dubai-landmarks.git
Make sure you have Node V14-latest available. If you don't, then you can install it using nvm or a method of your choice.
Make sure that you provide a .env file in local root directory! (It is also required at build time for client to get built with proper environment information)
Run npm install-build which will install all necessary client-server dependencies and build frontend client
RUN npm start and server will start on configured port where you can visit and test in your browser (default http://localhost:1337)

Testing

The backend is tested with a very high coverage. In order to run the tests run npm test in the root project directory

The frontend is not properly tested. The existing tests are generated by the ng angular cli tool.

Docker build

Due to Parse Client backend being dynamically configured, in all docker builds you have to be careful to set the proper PUBLIC_SERVER_URL environment variable, which will define where the Parse client will connect. For a simple build running locally for docker, this would have to be set up as the Docker Containers IP. ex: 172.17.0.2 (if it is the first container running in a docker network with ip 172.17.0.0)

Also please note that if you make changes to the PUBLIC_SERVER_URL or APP_ID environment variables in .env file, because these files are built into the client, it will need to be rebuilt in order to accept changes properly.

ex: docker-compose up --build

Dockerfile

A Dockerfile is also provided which can be used to create a docker image of the provided repo. In order to build the image you have to run a simple docker build -t <DESIRED_TAG_NAME> . in the root directory of the repo.

In order to successfully run the Docker Image created don't forget that you need to provide either the environment configuration or a .env file mounted in /usr/src/app folder in the docker container which will require all the necessary information ex: docker run -v <PATH_TO_.ENV_FILE>:/usr/src/app/.env <GIVEN_TAG_NAME>

Docker compose

For even simpler all-inclusive installation using Docker Compose you can use the included docker-compose.yml file which can be directly run by issuing docker-compose up in the root directory of the project.

The configuration through .env file is also required here. For convenience (since container ip cannot be known before running the actual container), the docker compose publishes default port 1337 of web app to localhost, so that it can be used in .env file as configuration that will be given to the app.

Taking that into account the .env file should contain the following configuration:

# inner db name in compose network
DB_URI=mongodb://db:27017/dubai-landmarks
# we have publised the server port to localhost in order for the browser to know where to send requests
PUBLIC_SERVER_URL=http://localhost:1337/parse

Production considerations

This is mostly a run-as-is configuration. If we had to discuss about proper production deployment some optimizations should be considered. These would include:

Serving client static files (js, html, css), should in no way be served from the NodeJS application server. A separate proxy server such as Nginx should take care of this optimally
Secure the application using TLS certificate for https browser access
When elements number increase, pagination should be implemented in order to better handle server and client resoures
Email service (verification/forgot password etc...)
Structured logging (Winston/Pino/Bunyan)
Up to date ParseServer and Client versions which could use the latest features such as ClassLevelPermissions setting in SDK and file hooks (ex: beforeFileSave)
Use rendering engine such as pug to write more productive HTML
VERY IMPORTANT write PROPER FRONTEND TESTS!

References

ref1: StartBootstrap clean blog theme

mitsos1os/dubai-landmarks