This repository is a group of boilerplates including some good practises and tips that you can follow in your projects. There are different technologies separated by branches but with similar structures to write scalable applications. Some of them include JavaScript, TypeScript, Vue or React. Click on the logos to navigate through them.
These are the most relevant technologies that this boilerplate includes, all of them are configured to inspire your project and are showing examples of what you can do with them.
- React: A JavaScript library for building user interfaces.
- TypeScript: Written in TypeScript language.
- PostCSS: Be ready for the next CSS features.
- Bootstrap: Build fast and responsive sites easily.
- Autoprefixer: Automatically add vendor prefixes to these Styles.
- Webpack: Automation of tasks and compilation of the project.
- Babel: Transpiler to different versions of EcmaScript.
- Browserlist: To configure which browsers will support.
- Jest: Framework for testing.
- ESLint: Linting for Scripts.
- StyleLint: Linting for Styles.
- Prettier: Formatter for Scripts and Styles.
- EditorConfig: Formatter for files in general.
- Husky: Used for attaching to git hooks and run scripts.
- Inversify: You can optionally configure Dependency Injection.
Once you download the project you will find a complete demo of how it works, including (each boilerplate could include different examples):
- Page: Example of how to create a page.
- File structure: Project structure following "feature" convention.
- Styles structure: Structure, mixins and variables using non-strict BEM.
- File names: File names structure using "type name" convention.
- Modules: Splitting the code in different modules to separate the concepts and scale the project.
- Navigation: Managing the routing of your the application.
- Global State Management: Creating a better communication between components.
Before start download or clone the boilerplate. Install all the dependencies.
$ yarn
Run the project for local development.
$ yarn start
Build the project for a production environment.
$ yarn build
Test your code.
$ yarn test
The linting is configured with husky and will run before commit, but you can run it.
$ yarn lint # (Will run scripts and styles linting with autofix)
$ yarn lint:scripts # (Will run ESLint)
$ yarn lint:styles # (Will run Stylelint)
$ yarn lint:editor # (Will run ECLint)
This project is possible thanks to the contributors.
Quique Fdez Guerra 📦 💻 🔧 |
Sabrina Pertusatti 💻 |
Víctor Gámez 💻 |
Alex Kryzhanovskyy 💻 |
Juan Carlos 💻 |
-
basic: Basic SPA example using JavaScript.
-
vue: Vuejs example using TypeScript.
-
react: React example using React and TypeScript.
-
phaser: Phaser example using TypeScript and React.
-
ts: TypeScript example using TypeScript.
-
cypress: Cypress example using Cypress and TypeScript.
-
nuxt: Nuxt example using Nuxt and TypeScript.
-
node-ts: Backend and TypeScript example with SCSS and Nodejs.