Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/CKGrafico/Frontend-Boilerplates
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
https://github.com/CKGrafico/Frontend-Boilerplates
bem boilerplate cypress frontend nuxt react scss typescript vue webpack
Last synced: 5 days ago
JSON representation
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
- Host: GitHub
- URL: https://github.com/CKGrafico/Frontend-Boilerplates
- Owner: CKGrafico
- License: mit
- Created: 2017-01-13T13:09:39.000Z (almost 8 years ago)
- Default Branch: basic
- Last Pushed: 2023-10-03T17:45:43.000Z (about 1 year ago)
- Last Synced: 2024-10-26T22:01:58.847Z (13 days ago)
- Topics: bem, boilerplate, cypress, frontend, nuxt, react, scss, typescript, vue, webpack
- Language: JavaScript
- Homepage: https://boilerplates.js.org
- Size: 17.1 MB
- Stars: 378
- Watchers: 15
- Forks: 77
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - CKGrafico/Frontend-Boilerplates - Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects. (webpack)
README
Frontend Boilerplates
### 🔍 Overview
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](https://github.com/CKGrafico/Frontend-Boilerplates/tree/basic#logos), [TypeScript](https://github.com/CKGrafico/Frontend-Boilerplates/tree/ts#logos), [Vue](https://github.com/CKGrafico/Frontend-Boilerplates/tree/vue#logos) or [React](https://github.com/CKGrafico/Frontend-Boilerplates/tree/react#logos). **Click on the logos** to navigate through them.
### Basic SPA - Boilerplate Features
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.
- **JavaScript:** Written in vanilla JavaScript.
- **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.
### 🥑 Demo (In progress)
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](https://medium.com/@CKGrafico/taking-decisions-to-structure-big-projects-with-hooks-stores-services-and-more-a703c7874480).
- **Styles structure:** Structure, mixins and variables using [non-strict BEM](https://medium.com/@CKGrafico/choosing-how-to-structure-our-css-components-7af3c7ea4f27).
- **File names:** File names structure [using "type name" convention](https://medium.com/@CKGrafico/taking-decisions-to-structure-big-projects-with-hooks-stores-services-and-more-a703c7874480).
### 📚 Setup and scripts
> Before start [download](https://github.com/CKGrafico/Frontend-Boilerplates/archive/basic.zip) or clone the boilerplate.
> **Install** all the dependencies.
```shell
$ npm install
```
**Run** the project for local development.
```shell
$ npm start
```
**Build** the project for a production environment.
```shell
$ npm run build
```
**Test** your code.
```shell
$ npm test
```
The **linting** is configured with [**husky**](https://github.com/typicode/husky) and will run before commit, but you can run it.
```shell
$ npm run lint # (Will run scripts and styles linting with autofix)
$ npm run lint:scripts # (Will run ESLint)
$ npm run lint:styles # (Will run Stylelint)
$ npm run lint:editor # (Will run ECLint)
```
### 🎩 Contributors
This project is possible thanks to the contributors.
Quique Fdez Guerra
📦 💻 🔧
Sabrina Pertusatti
💻
Víctor Gámez
💻
Alex Kryzhanovskyy
💻
Juan Carlos
💻
### ⛳️ Check all the boilerplates
- **[basic:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/basic#logos)** **Basic SPA** example using JavaScript.
- **[vue:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/vue#logos)** **Vuejs** example using TypeScript. 
- **[react:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/react#logos)** **React** example using React and TypeScript. 
- **[phaser:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/phaser#logos)** **Phaser** example using TypeScript and React. 
- **[ts:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/ts#logos)** **TypeScript** example using TypeScript. 
- **[cypress:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/cypress#logos)** **Cypress** example using Cypress and TypeScript. 
- **[nuxt:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/nuxt#logos)** **Nuxt** example using Nuxt and TypeScript. 
- **[node-ts:](https://github.com/CKGrafico/Frontend-Boilerplates/tree/node-ts#logos)** **Backend and TypeScript** example with SCSS and Nodejs. 
-
### Thanks to everyone who contributed:
[](https://github.com/CKGrafico/frontend-boilerplates/graphs/contributors)
---
Made with 🍕 by [Quique Fdez Guerra](https://twitter.com/ckgrafico)