This project was bootstrapped with Create React App.
Be sure Node and NPM are installed.
We also use Yarn, but you could use NPM instead.
If you work on multiple projects we recommend you to use NVM to manage different node version. Since this project has a .nvmrc file, you can just run npm use to be sure to use the right version of Node.
git clone git@github.com:proustibat/lbc-messages.git
cd lbc-messages
yarn
This will clone the repository then it will install needed packages and will make the web app ready to run for development.
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
We use react-i18next, a powerful internationalization framework for React / React Native which is based on i18next.
You can find translation files in ./public/locales.
With i18next-browser-languagedetector we set the browser language as the default app language. You can run the app in another language by adding ?lng=XX, for example: https://messages.surge.sh/?lng=en or https://messages.surge.sh/?lng=fr.
This repo is Commitizen-friendly. It means you'll be prompted to fill out any required commit fields at commit time. Learn more about commitizen cli.
Husky is used to enable prepare-commit-msg git hook. So you can just use git commit then follow the prompt of your terminal.
By using pretty-quick we run Prettier on changed files before each commit (on the pre-commit git hook).
We added Prettier to the default linter used by create-react-app which is ESLint. Our configuration of Prettier allows ESLint to be used with Prettier because of eslint-prettier.
If you wanna run the linters by your own, you can run yarn lint that will run Prettier.
Please, be sure you also configured your IDE correctly.
yarn tdd
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
We use Storybook for UI development. It makes development faster and easier by isolating components.
Run it in watch mode in order to develop UIs:
yarn storybook
Then open http://localhost:6006 to view it in the browser.
You can write any stories file you want by writing them in a file with the .stories.tsx extension.
yarn build-storybook create a minified app ready to be deployed in storybook-static directory.
Our CI/CD run the build then deploy its content during the deployments job for the main branch on https://storybook-messages.surge.sh.
For other branches or pull requests, built storybook is in artifacts.
yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
We use CircleCI to run jobs during the git flow.
The config is in the .circleci/config.yml.
The pipelines' history of the current project is available on this dashboard.
The main workflow runs 6 jobs:
prepare: installs node modules and save it to the current workspaceunit-testing: requires prepare job, runs testssonar: requires unit-testing, runs sonar-scannerbuild-app: requires prepare jobbuild-storybook: requires prepare jobdeployments: runs different steps that require different build workflows.
| Main workflow on the main branch | Main workflow on a pull request |
|---|---|
 |
 |
We use Surge to host our web app, a tool for static web publishing for frontend developers. CircleCI deploys the app on https://messages.surge.sh after each push on the main branch.
Note that you can deploy manually by running yarn deploy.
Then you'll need to define your own domain.
A surge token has been added to the CircleCI variables environment in order to deploy on our demo domain.
Note the predeploy and postddeploy scripts. It's used to make the react routing compliant with the surge config.
Since testing job runs at each pull request or at each push on master, the job save junit report and coverage reports as artifacts.
Here is how it looks like on CircleCI dashboard:
 |
 |
|---|
For the main branch, the coverage reports will be deployed on https://coverage-messages.surge.sh by the CI/CD.
As mentioned in the Storybook section, the design system is deployed at https://storybook-messages.surge.sh.
We use Sonarcloud to detect code quality issues, the maintainability, reliability and security of the code. Visit the public dashboard of the project. The CI/CD runs the sonar scanner on each push.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.