# cra-template-pelago

> The base template for Pelago Create React App.

Latest version **1.0.0** (published 2020-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install cra-template-pelago
pnpm add cra-template-pelago
yarn add cra-template-pelago
bun add cra-template-pelago
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-11 |
| First published | 2020-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 72.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | saipelago123 |
| Keywords | react, create-react-app, template |

## Links

- npm: https://www.npmjs.com/package/cra-template-pelago
- npm.io page: https://npm.io/package/cra-template-pelago

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-05-11
- 0.1.4 — 2020-05-08
- 0.1.3 — 2020-05-08
- 0.1.2 — 2020-05-08
- 0.1.1 — 2020-05-08
- 0.1.0 — 2020-05-08

## README

# 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](https://create-react-app.dev/docs/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](https://github.com/V287/pelago-create-react-app/tree/master/packages/react-scripts) ?
  
- Follow the README.md in the newly created project to get things up and running

## Frameworks / Components Baked-in

- **[Apollo-GraphQL](https://www.apollographql.com/)**: 
  - 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](https://reacttraining.com/react-router/web/guides/quick-start)**:
  - Base routing setup done with 2 example pages and an Auth wrapper to handle logged in vs logged out states

- **[Antd](https://ant.design/)**:
  - 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](https://github.com/css-modules/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

---
_Source: https://npm.io/package/cra-template-pelago · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._