LSD Project Frontend | SSR & REST API

Large System Development, fall 2020

Stephan Duelund Djurhuus

Content

• Components
• Setup
  • Dependency Installation
  • Environment Configuration
• Source Structure
• Usage
  • Development
  • Production
  • Testing

Components

• Backend, Handles Database Management.
• Frontend, Handles REST API and Server Sided Rendering.
• Contract, Handles Contract Interface & Data Transfer Objects.
• Project Wiki, Assignments & Descriptions

Setup

Dependency Installation

# bash
yarn install

If the contract isn't installed add it with yarn.

# bash
yarn add Fraqs/LSD-Project.Contract

Contract Documentation

Environment Configuration

Create a .evn file in the root of the project containing the content below.

NODE_ENV=development
RPC_HOST=http://localhost:3000

Source Structure

src ┐
    ├ contract/     # the rpc contract and contract mock.
    ├ routes/       # the views route and api route.
    ├ views/        # ejs views.
    ├ static/       # static files for ejs - scripts, styles and images.
    ├ test/         # test files.
    └ index.ts      # main file.
...                 # configuration files

Usage

This frontend application uses to main routes, one for generated EJS Views and the another for a REST API.

Target	Route
EJS Views	http://localhost:4000
REST API	http://localhost:4000/api

changing the port in .evn will result in different routes.

Development

The development environment uses a ContractMock. This is used when the backend isn't connected to the frontend.

Development environment can be set in the .evn as NODE_ENV=development.

# bash
yarn dev

Production

The production environment uses the RPC Contract. This is used when the backend is connected to the frontend.

Production environment can be set in the .evn as NODE_ENV=production.

# bash
yarn start

Testing

The test is handled by the test framework Jest.

# bash
yarn test

Software Development @ Copenhagen Business Academy, Denmark 2020