Different Boilerplates that we use on real projects with ES6, Vue, Nuxt, TypeScript, SCSS, BEM, etc.
TypeScript JavaScript CSS HTML Vue
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Frontend Boilerplates

Some examples of good practises, tips, and boilerplates that I like to follow. You will find the different technologies on the branches and we will add more examples in the future.

Feel free to give feedback and improvements to the repo.

Quickstart

master: Stable version of a basic SPA example with SCSS and ES6.
dev: Dev version of a basic SPA example with SCSS and ES6.

ts-master: Stable version of a TypeScript example with SCSS.
ts-dev: Dev version of a TypeScript example with SCSS.

vue-master: Stable version of a Vuejs example with SCSS and TypeScript.
vue-dev: Dev version of a Vuejs example with SCSS and TypeScript.

nuxt-master: Stable version of a Nuxt example with SCSS and TypeScript.
nuxt-dev: Dev version of a Nuxt example with SCSS and TypeScript.

node-ts-master: Stable version of a Nodejs with TypeScript example with SCSS and Nodejs.
node-ts-dev: Dev version of a Nodejs with TypeScript example with SCSS and Nodejs.

🍩 Boilerplate Features

On this branch we use:

  • BEM + BEMIT + etc: A mix of BEM and related-BEM technologies to create conventions for CSS classes.
  • TypeScript: All the code uses TypeScript.
  • Linting: Linting for TypeScript and SASS.
  • SASS: Scss structure with good practises.
  • Vue: The progressive JavaScript framework.

⬆️ back to top

βš™οΈ Automated Tasks

On this branch we use:

  • Webpack: Scripts tasks.
  • Gulp: Styles and assets tasks.

⬆️ back to top

⏰ Running tasks

To run the tasks we have these three commands:

  • Install dependencies:

npm install

  • Running tasks on production mode:

npm run prod

  • Running tasks on development mode:

npm run dev

  • Running tasks on watch mode and serve the app:

npm start

⬆️ back to top

⛩️ Project structure

On this branch the structure is:`

β”œβ”€β”€ .babelrc
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .gulpenvrc
β”œβ”€β”€ .stylelintrc
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ gulpfile.js
β”œβ”€β”€ mocha-webpack.opts
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ src
|  β”œβ”€β”€ app
|  |  β”œβ”€β”€ app.component.vue
|  |  β”œβ”€β”€ app.container.ts
|  |  β”œβ”€β”€ app.filters.ts
|  |  β”œβ”€β”€ app.router.ts
|  |  β”œβ”€β”€ app.ts
|  |  β”œβ”€β”€ cities
|  |  |  β”œβ”€β”€ cities.component.vue
|  |  |  β”œβ”€β”€ cities.component.vue.html
|  |  |  β”œβ”€β”€ cities.component.vue.scss
|  |  |  β”œβ”€β”€ cities.component.vue.ts
|  |  |  β”œβ”€β”€ cities.container.ts
|  |  |  β”œβ”€β”€ cities.routes.ts
|  |  |  β”œβ”€β”€ city-detail
|  |  |  |  β”œβ”€β”€ city-detail.component.vue
|  |  |  |  β”œβ”€β”€ city-detail.component.vue.html
|  |  |  |  β”œβ”€β”€ city-detail.component.vue.scss
|  |  |  |  └── city-detail.component.vue.ts
|  |  |  β”œβ”€β”€ city-list
|  |  |  |  β”œβ”€β”€ city-list.component.vue
|  |  |  |  β”œβ”€β”€ city-list.component.vue.html
|  |  |  |  β”œβ”€β”€ city-list.component.vue.scss
|  |  |  |  └── city-list.component.vue.ts
|  |  |  β”œβ”€β”€ index.ts
|  |  |  └── shared
|  |  |     β”œβ”€β”€ city-add
|  |  |     └── index.ts
|  |  β”œβ”€β”€ core
|  |  |  β”œβ”€β”€ decorators
|  |  |  |  β”œβ”€β”€ container.decorator.ts
|  |  |  |  └── index.ts
|  |  |  β”œβ”€β”€ ifilter.ts
|  |  |  β”œβ”€β”€ index.ts
|  |  |  └── seeds
|  |  |     β”œβ”€β”€ base.seed.ts
|  |  |     β”œβ”€β”€ cities.seed.ts
|  |  |     └── index.ts
|  |  β”œβ”€β”€ shared
|  |  |  β”œβ”€β”€ cities
|  |  |  |  β”œβ”€β”€ cities.service.ts
|  |  |  |  β”œβ”€β”€ city.model.ts
|  |  |  |  β”œβ”€β”€ icities.service.ts
|  |  |  |  └── index.ts
|  |  |  β”œβ”€β”€ date
|  |  |  |  β”œβ”€β”€ date.service.spec.ts
|  |  |  |  β”œβ”€β”€ date.service.ts
|  |  |  |  β”œβ”€β”€ idate.service.ts
|  |  |  |  └── index.ts
|  |  |  β”œβ”€β”€ index.ts
|  |  |  β”œβ”€β”€ loading.component.vue
|  |  |  β”œβ”€β”€ translate
|  |  |  |  β”œβ”€β”€ index.ts
|  |  |  |  β”œβ”€β”€ itranslate.service.ts
|  |  |  |  └── translate.service.ts
|  |  |  └── weather
|  |  |     β”œβ”€β”€ index.ts
|  |  |     β”œβ”€β”€ weather-codes.enum.ts
|  |  |     β”œβ”€β”€ weather-icons.model.ts
|  |  |     └── weather.model.ts
|  |  β”œβ”€β”€ vendor.ts
|  |  └── weather
|  |     β”œβ”€β”€ index.ts
|  |     β”œβ”€β”€ shared
|  |     |  β”œβ”€β”€ index.ts
|  |     |  β”œβ”€β”€ iweather.service.ts
|  |     |  └── weather.service.ts
|  |     β”œβ”€β”€ weather-detail
|  |     |  β”œβ”€β”€ weather-detail.component.vue
|  |     |  β”œβ”€β”€ weather-detail.component.vue.html
|  |     |  β”œβ”€β”€ weather-detail.component.vue.scss
|  |     |  └── weather-detail.component.vue.ts
|  |     β”œβ”€β”€ weather-list
|  |     |  β”œβ”€β”€ weather-list.component.vue
|  |     |  β”œβ”€β”€ weather-list.component.vue.html
|  |     |  β”œβ”€β”€ weather-list.component.vue.scss
|  |     |  └── weather-list.component.vue.ts
|  |     β”œβ”€β”€ weather.component.vue
|  |     β”œβ”€β”€ weather.container.ts
|  |     └── weather.routes.ts
|  β”œβ”€β”€ assets
|  |  β”œβ”€β”€ fonts
|  |  |  β”œβ”€β”€ OpenSans
|  |  |  |  β”œβ”€β”€ OpenSans-Bold.ttf
|  |  |  |  β”œβ”€β”€ OpenSans-ExtraBold.ttf
|  |  |  |  β”œβ”€β”€ OpenSans-Italic.ttf
|  |  |  |  β”œβ”€β”€ OpenSans-Light.ttf
|  |  |  |  β”œβ”€β”€ OpenSans-Regular.ttf
|  |  |  |  └── OpenSans-Semibold.ttf
|  |  |  └── WeatherIcons
|  |  |     β”œβ”€β”€ WeatherIcons-Regular.eot
|  |  |     β”œβ”€β”€ WeatherIcons-Regular.otf
|  |  |     β”œβ”€β”€ WeatherIcons-Regular.svg
|  |  |     β”œβ”€β”€ WeatherIcons-Regular.ttf
|  |  |     └── WeatherIcons-Regular.woff
|  |  └── images
|  |     └── example.jpg
|  β”œβ”€β”€ index.html
|  β”œβ”€β”€ locale
|  |  β”œβ”€β”€ en.locale.json
|  |  └── es.locale.json
|  β”œβ”€β”€ styles
|  |  β”œβ”€β”€ app.scss
|  |  β”œβ”€β”€ base
|  |  |  β”œβ”€β”€ _fonts.scss
|  |  |  β”œβ”€β”€ _globals.scss
|  |  |  β”œβ”€β”€ _icons.scss
|  |  |  β”œβ”€β”€ _states.scss
|  |  |  β”œβ”€β”€ _utilities.scss
|  |  |  β”œβ”€β”€ _variables.scss
|  |  |  └── mixins
|  |  |     β”œβ”€β”€ _fonts.scss
|  |  |     β”œβ”€β”€ _icomoon.scss
|  |  |     └── _medias.scss
|  |  └── vendor
|  |     β”œβ”€β”€ _normalize.scss
|  |     β”œβ”€β”€ _sierra.scss
|  |     └── _weather-icons.scss
|  └── typings
|     β”œβ”€β”€ vue-shim.d.ts
|     └── vue.d.ts
β”œβ”€β”€ tasks
|  β”œβ”€β”€ assets.js
|  β”œβ”€β”€ clean.js
|  β”œβ”€β”€ config
|  |  β”œβ”€β”€ helpers.js
|  |  └── options.js
|  β”œβ”€β”€ copy.js
|  β”œβ”€β”€ loaders
|  |  └── components-name.loader.js
|  β”œβ”€β”€ plugins
|  |  β”œβ”€β”€ globals.js
|  |  β”œβ”€β”€ uglify.js
|  |  └── vue.js
|  β”œβ”€β”€ rules
|  |  β”œβ”€β”€ components.js
|  |  β”œβ”€β”€ lint.js
|  |  └── scripts.js
|  β”œβ”€β”€ serve.js
|  β”œβ”€β”€ styles-lint.js
|  β”œβ”€β”€ styles.js
|  └── watch.js
β”œβ”€β”€ tasks.config.json
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ tsconfig.mocha.js
β”œβ”€β”€ tslint.json
└── webpack.config.js

⬆️ back to top

⚑ Gulp and Webpack

Gulpfile

This is how we configured the main file:

// We load all the tasks and pass some parameters
let tasks = require('require.all')('./tasks');
tasks((name, task) => { func = () => task(gulp, paths, $, _, tasks); func.displayName = name; return func});
// paths is for all the project paths
// $ is for plugins
// _ is for helpers

And these are the only two tasks:

gulp.task('default', gulp.series(tasks.clean, tasks.stylesLint, tasks.styles, tasks.copy, tasks.assets));
gulp.task('watcher', gulp.parallel(tasks.serve, tasks.watch));

Tasks configuration

You can configure different things related with the tasks.

{
    "app": {
        "assets": {
            "images": {}
        }
    }
};

You can acces to files and folders like:

_.folder(paths.assets.images);
// ./app/assets/images/

_.files(paths.assets.images)
// ./app/assets/images/**/*.*

But you can extend this structure:

{
    "app": {
        "assets": {
            "images": {},
            "fonts": {
                "files": "**/*.ttf",
                "folder": "custom"
            }
        }
    }
};

You can acces to files and folders like:

_.folder(paths.assets.fonts);
// ./app/assets/custom/

_.files(paths.assets.fonts)
// ./app/assets/custom/**/*.ttf

Also you can use the parent folder

{
    "app": {
        "assets": {
            "images": {},
            "fonts": {
                "files": "**/*.ttf",
                "folder": "custom"
                "roboto": {
                    "files": "Roboto.ttf",
                    "folder": "..",
                }
            }
        }
    }
};

And the result will look like that:

_.folder(paths.assets.fonts.roboto);
// ./app/assets/fonts/

_.files(paths.assets.fonts.roboto)
// ./app/assets/fonts/roboto.ttf

⬆️ back to top

🎩 Contributors


Quique Fdez Guerra
πŸ‘¨β€πŸ’»πŸŒπŸ¦

Juan Carlos
πŸ‘¨β€πŸ’»πŸŒπŸ¦

Alex Kryzhanovskyy
πŸ‘¨β€πŸ’»πŸŒπŸ¦

Victor Gamez
πŸ‘¨β€πŸ’»

View Contributors

πŸ“œ License

(The MIT License)

Copyright (c)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆️ back to top