Directory Front End

This project is the front-end application for the GCTools Directory

Motivation

The front end app is a stand alone app and requires our account and profile as a service apps in order to fully work. This is intended to work in our micro service architecture as shown here:

Installation

You need nodejs, yarn and ideally docker-compose

Install for Dev

If you have an account and profile service spun up you can make the connections in scripts/start.js

# scripts/start.js

# your dev url
const BASE_URL = "http://localhost:3000";
# profile service endpoint
if (!process.env.REACT_APP_GQL_ENDPOINT)
  process.env.REACT_APP_GQL_ENDPOINT = 'https://paas.beta.gccollab.ca/';
# account service endpoint
if (!process.env.REACT_APP_OIDC_AUTHORITY)
  process.env.REACT_APP_OIDC_AUTHORITY = 'https://dev.account.gccollab.ca/openid';
# account client ID
if (!process.env.REACT_APP_OIDC_CLIENT_ID)
  process.env.REACT_APP_OIDC_CLIENT_ID = 123;

After you config the start script with your end points:

yarn install
yarn start

Developing with Docker

If you do not have these services spun you can create a full end to end environment through docker-compose.

docker-compose up will deploy and configure to work together the following services:

• Directory-fe on port 8008
• Profile service
• Notification service
• Search
• RabbitMQ
• Account on port 8080

cd docker-e2e
docker-compose up

You can hook up your yarn start dev instance to these local services by copying the environment variables set for the directory-fe container in docker-e2e/docker-compose.yaml into the respective variables in scripts/start.js as mentioned above.

Deploying

Deploy with Docker

docker build --tag gctools/directory .
docker run -p 5000:5000 gctools/directory

Features

Project Structure 📁

|-/config/
|-/docker-e2e
|-/docker
|-/i18n/  # Translations
|-/kubernetes/
|-/public/
|-/scripts/
|-/src/
|  |-/assets/
|  |  |-css # A place for additional styling
|  |  |-imgs  # Image / graphic assets
|  |-/components/
|  |  |-/core/  # Components used in multiple places
|  |  |-/page_or_feature_specific/ # Create folders for each page
|  |-/conatiners/ # Top level page containers
|  |-/gql/ # GraphQL queries and mutations in one place to be leveraged througout the app

Component Library and Styling 🎨

We leverage the Aurora Design system which is a theme based on Bootstrap. The app comes already packaged with the Aurora stylesheet and Reactstrap to help you build components quickly.

Apollo Client and GraphQL

Learn about how to leverage Apollo Client for react to handle queries and mutations.

I18N 🌎

Localization is set up and configured with this I18N translation webpack plugin and it's React Helper package.

How to use it

import React from 'react';
import LocalizedComponent
  from '@gctools-components/react-i18n-translation-webpack';

class MyComponent extends React.Component {
  render() {
    <p>{__('this is translated text')}</p>
  }
}

export default LocalizedComponent(MyComponent);

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

This project was bootstrapped with Create React App.