axafrance / react-starter

React Starter application using react-toolkit, react-oidc

Starter kit with the toolkit

Setup

Like any npm project, npm install is used to download all the necessary packages and npm start is used to start the project

Adapt to your own project

The best way to keep the git tree and push this starter on your own repo is to change the remote url (or create a new one). To change the origin remote url use git remote set-url yourNewRepoUrl. After that, you can push this project on your new repository.

What is available ?

This project come with several basics requirements.

Basic template

With a header, a footer, a menu bar and a title bar

Basics pages

A Homepage, a not found page that you can display when you have a 404 for example and a server error page that you can display when you have a 500 for example.

A router

A formatting service

Project structure

├─── src
│   ├─── context
│   ├─── Home
│   ├─── layout
│   └─── services

context

Contains context initialization and an example for an action and a reducer

Home

Home is a page example

layout

The layout folder your components like Header, Footer, or even the Router

services

Services is a more generic folders. The goal is to keep in the same place all the reusable pure feature.

react-starter's Issues

Discuss about debugging tool (VS Code & Browser)

Would be great to package a debugging profile in VSCode / IntelliJ
Also, what about tools used in browsers (e.g. Chrome Extensions)

Remove --env=jest-environment-jsdom-sixteen with CRA 4.*

Avec CRA et Jest 24.9 on est obligé d'ajouter

--env=jest-environment-jsdom-sixteen

Aux tests pour que le waitFor marche sur RTL

CRA 4.0 va sortir avec Jest 26, il faudra supprimer ça à la suite.

facebook/create-react-app#8362 (comment)

Discuss about Linter/Prettier

J'ai regardé un peu ES Lint, et je me demande si un petit tour d'horizon peut etre fait la dessus.

Quels plugin/Regles etc.

Unable to start project

Issue and Steps to Reproduce

Clone the repository.

First, npm install.

Then, npm start

Versions

0.1.0 (current "master" branch)

Screenshots

Expected

The application is displayed.

Actual

Unable to launch project :

prototype.js:1 Uncaught Error: Cannot find module './locale'
at webpackMissingModule (prototype.js:1)
at Module../node_modules/moment/src/lib/moment/prototype.js (prototype.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../node_modules/moment/src/lib/moment/moment.js (moment.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../node_modules/moment/src/moment.js (moment.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../node_modules/react-datepicker/es/index.js (index.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/@axa-fr/react-toolkit-form-input-date/dist/CustomDate.js (CustomDate.js:23)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/@axa-fr/react-toolkit-form-input-date/dist/DateInput.js (DateInput.js:27)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/@axa-fr/react-toolkit-form-input-date/dist/index.js (index.js:7)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/@axa-fr/react-toolkit-all/dist/index.js (index.js:22)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../src/layout/Header/Header.js (Header.container.js:9)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../src/layout/Header/index.js (index.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../src/layout/App/App.js (index.js:14)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../src/layout/App/index.js (index.js:1)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Module../src/index.js (reducer.js:16)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object.0 (index.js:1)
at webpack_require (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

Additional Details

• Installed packages

Discuss about which testing Library between Testing Library and Enzyme

Ici nous pouvons discuter sur ce qui doit être choisi entre testing Library et Enzyme.

Make it more explicit how to start

Issue and Steps to Reproduce

Right now you have to guess that in order to use that starter kit, you need to clone it.
It would be great to see steps to get started, and also precisions to remove git metadata if you clone this inside an existing project:
You have an existing repo with your application, with that tree structure:

└── /
    ├── client/
    │   └── frontendapp1
    └── server/
        ├── backend1
        └── backend2

You want to start a new project inside /client/frontendapp2. You cannot just clone and change origin. You need to remove the git folder.

One solution is to

git clone --depth=1 --branch=master https://github.com/AxaGuilDEv/react-starter.git frontendapp2
rm -rf ./frontendapp2/.git

depth=1 to avoid copying too much history, then remove the .git folder

The other is to recommend downloading an archive (not great imo)

Cleanup

Also, there is a lot of clutter after clone (all the .MD files). Would be great to have a nice way to get rid of them!

Add additionnal linters

In my mind :

• CommlitLint
• SonarLint in the IDE