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

Nuxt - Boilerplate Features

Most relevant technologies used in the Boilerplate:

• Vue: The progressive JavaScript framework.
• Nuxt: Universal Vue.js Applications.
• TypeScript: All the code uses TypeScript.
• Express: Backend ready project.
• SASS: Scss structure with good practises.
• Linting: Linting for JavaScript and SASS.
• BEM (Non strict) + BEMIT: Some conventions for CSS classes.

📚 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

If you want to test, there are some options.

$ npm test # (Will run unit and e2e tests)
$ npm run test:unit # (Only unit tests)
$ npm run test:e2e # (Only e2e tests)

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

$ npm run lint # (Will run scripts and styles linting)
$ npm run lint:scripts # (Only scripts lint)
$ npm run lint:styles # (Only styles lint)

🎩 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 with SCSS and ES6.

• vue: Vuejs example with SCSS and TypeScript.

• react: React example with SCSS and TypeScript.

• phaser: Phaser example using TypeScript and React.

• ts: TypeScript example with SCSS.

• nuxt: Nuxt example with SCSS and TypeScript.

• node-ts: Backend and TypeScript example with SCSS and Nodejs.