Skip to content

Latest commit

 

History

History
executable file
·
87 lines (69 loc) · 2.31 KB

README.md

File metadata and controls

executable file
·
87 lines (69 loc) · 2.31 KB

Baobab Webapp

Front-end web application build using ReactJS and Bootstrap.

Prerequisites

Runnning through Docker.

  • Docker

Running locally.

  • Node version 7 or higher.
  • Yarn.

How to Run

Runnning through Docker.

  • Install Docker
  • Navigate to webapp folder.
  • Build Website Container.
docker build . -t website
  • Run Website Container on port 8080.
docker run -p 8080:80 website

Running locally.

  • Install Node and Yarn.
  • Navigate to webapp folder.
  • Install dependencies.
yarn
  • Run website.
yarn start

Running the tests

Running Locally

  • Run Test
yarn test

Connect to local database

Host: localhost 
Port: 5432
Database: docker  
User: docker Password: docker

Project Structure

  • src
    • images
    • pages
      • components
    • services

Adding Code

Add a new folder for each component/page. Name the folder according to the item/feature you are building. Do not include the item type in the name. Example: Home not HomePage.

In each item folder, create a [item].js, [item].css and __tests__/[item].test.js. Also create a components folder where you will be break up parts of a page into re-usable components. A page should just be a collection of components, with each component (as far as possible) handling its own logic.

When wanting to call a service, create a folder in the services folder with the name of the service and [service].js that handles the service calls.

Adding Tests

We are using Jest + Enzyme as a testing framework. Read this article, which explains how to use jest and enzyme. Note we are not doing snapshot testing - simply testing rendering, props and events.

Example

import React from 'react';
import {shallow} from 'enzyme';
import Home from '../Home.js';

test('Check if Home component renders.', () => {
  // Render Home main component.
  const wrapper = shallow(<Home />);
  expect(wrapper.length).toEqual(1);
});

Styling

We use Bootstrap 4 as a CSS framework.