cet-components-lib v0.0.76

React Site Template

This project is a React template for creating new sites

Change log:

2022-08-24:

• Creating first version

Overview:

Using this project

In order to use this project as a boilerplate for your next project, then: 1. Download the master brach as a zip file. 2. Extract the files to your local folder. 3. Run npm install. 4. Run one of the following npm scripts:

• "create" - create a new feature (See explanation below)
• "start" - run your project in development
• "build" - build for production
• "test" - run you tests in watch mode
• "coverage" - run you tests with coverage report

Build Tools

This application build is based on vite while the tests run using vitest engine instead of jest.

from the vite site:

"Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects."

The code

This project is based on the React library using TypeScript as it code base.

All code should be placed inside the src folder.

Creating a new feature (plop)

In order to add a new features to the application, it is best to run the following command npm run create This will prompt you with the following

? [PLOP] Please choose a generator. (Use arrow keys)
> container - Create a container component 
  page - Create a page component 
  page partial - Create a partial page component    
  component - Create a component 
  hook - Create a hook function 
  slice - Create a redux slice function 

just move the cursor and choose whatever feature you like to create.

Then you will be ask to name it. You may enter the name as a simple text (even with spaces) the CLI will adjust it to the feature naming convention

for example naming your page "my home page" will become "MyHomePage"

lint, prettier, husky

Giving the fact that the project is written using TypeScript, we are getting type checking out of the box. In addition, we are using eslint linter extending the create-react-app linting rules.

Prettier is "An opinionated code formatter" in combination with husky pre-commit script we can run prettier on all files before committing our code changes. This will ensure that all code should be formatted the same before a PR is opened.

Some more husky:

By using husky scripts we make sure all feature branches can be named as follow ^pbi|master|bug|develop|release|hotfix?[a-z0-9._-]+$. This means one of the above prefixes followed by _ and a number.

for example: pbi_12345

husky also will make sure that our git commits will follow Conventional Commits

3d party libraries

It includes common 3d party libraries which are used in most of our sites and probably will be used in all future developments. It includes:

• Routing: react-router-dom
• Test: @testing-library/react

Contributing to the project

If you find a bug or you want to add a new 3d party library you think will profit other projects or you want to update one of the existing libraries or you just think there is something you can improve, just open a PR to the master branch.

NPM LINK:

1. WebApp:

cd node_modules/react
npm link

2. CC:

npm link react
npm link

3. WebApp:

cd ..\..
npm link cet-components-lib

4. CC:

npm run build

If npm link doesn't work

Try to clean npm cache in:

C:\Users\MichaelM\AppData\Local\npm-cache

And try again.