@biyectiva/create-biyectiva-app v1.0.4

Create Biyectiva App

This repository contains a boilerplate project structure for web applications projects using React and Typescript. It contains a basic setup for webpack, babel, and a few other tools. It also contains a basic React application to showcase how the folders and files are used.

Setup and usage

Run the following command to execute the tool:

yarn create @biyectiva/biyectiva-app <project-name>

Note: Don't forget to change the project name on all the files it's being used. Also, change license, author and every property located at the package.json file. This is WIP, until we implement the renaming.

Then you can run the following commands to install the dependencies and start the development server:

# Install dependencies for the first time on the docker container and your local machine
yarn dev:install

# Fire up the development server
yarn dev:up

Once the process is finished, you should be able to access the application at http://localhost:4200. You can also access the Storybook UI at http://localhost:6006.

Note: The setup is done this way so that the node_modules folder is available at your local machine. This is WIP, until we find a better way to do it.

From this moment on, the development will be done on the docker container, so in order to perform any further action related to the packages, you should use the following commands:

# Setup up .env
cp .env.defaults .env

# Add new packages
yarn dev:add <options> <packages-names>

# Remove packages
yarn dev:remove <options> <packages-names>

The following commands are added to the previous ones, so you can manage the containers more easily:

# Stop the development server
yarn dev:down

# Build the production version
yarn prod:build

# Run the production version
docker run [-d] -p 8082:80 [--name docker-container-name] create-biyectiva-app

Warning: As it has been noted, yarn should be used over npm. In case npm is used, an error will be thrown reporting the failure.

Project structure

The src folder contains the source code of the application. It has the following structure:

src/
├── assets/            # Assets resources
│   ├── audios/
│   ├── fonts/
│   ├── images/
│   └── videos/
├── components/        # Components
│   └── ...
├── pages/             # Pages views
│   └── ...
├── services/          # Services controllers
│   ├── ApiRequest/
│   └── LocalStorage/
├── store/             # Redux logic
│   └── ...
├── styles/            # CSS styles
│   ├── elements/
│   ├── generic/
│   ├── settings/
│   └── tools/
├── utils/             # Utilities
│   ├── constants/
│   └── helpers/
└── ...

Note: Some folders contains README.md files, which are used to describe more in detail their contents and how their files are used.

Naming conventions

For the sake of simplicity, the following naming conventions are used:

• components/:
  • PascalCase/:
    • PascalCase.tsx
    • PascalCase.controller.ts
    • PascalCase.scoped.scss
  • kebab-case/: components group
• pages/:
  • PascalCase/:
    • PascalCase.tsx
    • PascalCase.controller.ts
    • PascalCaseAPI.controller.ts
    • PascalCase.scoped.scss
    • sections/:
      • PascalCase/:
        • PascalCase.tsx
        • PascalCase.controller.ts
        • PascalCaseAPI.controller.ts
        • PascalCase.scoped.scss
  • kebab-case/: pages group
• services/:
  • kebab-case/:
    • camelCase.service.ts
• store/:
  • kebab-case/:
    • camelCase.slice.ts
• styles/:
  • kebab-case/:
    • _camelCase.scss
• utils/:
  • constants/:
    • camelCase.constants.ts
  • helpers/:
    • camelCase.helper.ts
  • hooks/:
    • kebab-case/:
      • usePascalCase.hook.ts

The files outside this folders are named using the camelCase convention, the same goes to the variables and functions used in the code. The classes, interfaces, enums and components are named using the PascalCase convention. Finally, for constants we use the all upper-case snake_case.