This project is the front-end application for the GCTools Directory
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:
You need nodejs, yarn and ideally docker-compose
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
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.
docker build --tag gctools/directory .
docker run -p 5000:5000 gctools/directory
|-/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
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.
Learn about how to leverage Apollo Client for react to handle queries and mutations.
Localization is set up and configured with this I18N translation webpack plugin and it's React Helper package.
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);
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.