cra-template-pelago v1.0.0

pelago-graphql-apollo-starter

The aim of this repo is to serve as a base template for any new webapp built at Pelago.

The idea uses the Custom templates feature of Create React App, which enables us to select a template to create a project, while still retaining all of the features of Create React App.

Usage

• Go to the desired location where you want to create your new project

• Run the standard create react app scaffold command for the new project and add the respective template and scripts overrides as follows:

     npx create-react-app pelago-{APP_NAME} --template cra-template-pelago --scripts-version pelago-react-scripts

     // Standard CRA scaffold script
     npx create-react-app pelago-{APP_NAME} 
     
     // Override the std CRA template with Pelago's
     --template cra-template-pelago
     
     // Override the std CRA react-scripts package with Pelago's
     --scripts-version pelago-react-scripts 

  Why pelago-react-scripts ?

• Follow the README.md in the newly created project to get things up and running

Frameworks / Components Baked-in

• Apollo-GraphQL:

  • All graphql-client code can be found under the Gql folder which has examples for queries and mutations used in the code
  • All graphql-server code can be found under the proxy folder which houses a node server to serve dummy APIs and hosts the schema, resolvers and related code. DISCLAIMER: The actual BE setup will not be in this repo

• React-router:

  • Base routing setup done with 2 example pages and an Auth wrapper to handle logged in vs logged out states

• Antd:

  • We will be using AntD design and components to power our views till we have a better alternative in-house.

• Localisation setup done using a simple implemenatation that depends on the locale present in the url. This implementation can be removed and the locale/en.json file can be used as it is if the app doesn't see a future with localisation.

• Custom UI components have been built (powered by Antd) to fit some base usecases. Currently the following components are included:

  • Header
  • Spinner
  • Page: Layout wrapper for each page
  • FormSection: Layout wrapper for forms

• Styling:

  • We will be going with CSS Modules along with SCSS for handling styles.
  • Using rem to manage style property values

• A sample deployment script has been added under the .circleci folder

• Relevant config files have been added to standardise dev workflow across apps:

  • .eslintrc.json: Houses the lint config for the app that extends eslint-airbnb.
  • .jsconfig.json: Setup for allowing absolute imports in the app
  • .huskyrc.json, .lintstagedrc.json: handle pre-commit linting and auto fixing for some cases

• Testing: TBD