Need help with Frontend-Boilerplates?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

CKGrafico
283 Stars 43 Forks MIT License 258 Commits 12 Opened issues

Description

Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.

Services available

!
?

Need anything else?

Contributors list

# 34,437
CSS
Nuxt.js
cypress
bem
221 commits


Frontend Boilerplates

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, TypeScript, Vue or React. Click on the logos to navigate through them.

JavaScript Boilerplate Vue Boilerplate React Boilerplate TypeScript Boilerplate Phaser Boilerplate Cypress Boilerplate Nuxt Boilerplate Node and TS Boilerplate

GitHub license GitHub stars GitHub forks Open in CodeSandbox Sponsor Sponsor Build Status GitHub issues Update Status

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):

📚 Setup and scripts

Before start download or clone the boilerplate. Install all the dependencies.

$ npm install

Run the project for local development.

$ npm start

Build the project for a production environment.

$ npm run build

Test your code.

$ npm test

The linting is configured with husky and will run before commit, but you can run it.

$ 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: 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.