Code Monkey home page Code Monkey logo

frontend-boilerplates's Introduction


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.

Thanks to everyone who contributed:

Contributors

Made with 🍕 by Quique Fdez Guerra

frontend-boilerplates's People

Contributors

allcontributors[bot] avatar ckgrafico avatar dependabot[bot] avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

alexkryzh jmserrano-dev ioadres vgamezz19 jhrendon antoniogiroz juniperchicago ankitdsh sgkuksov markchipman spertusatti jeffryang24 rafagarcia vaivaivai wakkos mapalma jack-rainbow warcrymaster josemsq jmanuelcorral 040203 binaryartists kksrini89 mantissa23 vicentegnz-contributions itchampza javiern8410 true-eye franjcruz ismanapa shimada-toy-box angeloalfanoc aleksandrryb bboyakers laerteneto88 elia9090 hectordrp pxzin r00t-101-lol lvandres wagnergomescastro kathirr007 bangsite arkopalbhattacharya vinu-prasad-e1936 jorgecasar imgrantye grdgyyr cetsupport mayutheandev bharatdangar heguanwei misha200119 divya-shanmugam-e3497 petercore momostafas alwattar sunnymayway ferraghuex vsetaki yangwawa0323 yehudautomo enanibus aliduman israelsdev thedrewery mko98 harjeevansingh dridy87 yoyox2 anseloh darkminimum rahmatcmos jaarx

frontend-boilerplates's Issues

Improve splitchunks and vendor

optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'initial',
test: path.resolve(__dirname, 'node_modules'),
name: 'vendor',
enforce: true,
},
},
},
},

Nuxt - Component/page unit tests

I'm trying to make component unit tests, however, I can't find a way to do it properly. Are you aware of a way to integrate it using your boilerplate?

Example:

login.vue

<script lang='ts'>
import { Vue } from "vue-property-decorator";
import Component from "nuxt-class-component";

@Component
export default class LoginPage extends Vue {
    login() {
        alert('BLEH!');
    }
}
</script>

login.spec.vue

import { mount } from '@vue/test-utils'
import { assert } from 'chai'
import LoginPage from '~/pages/login.vue'

describe('LoginPage.vue', () => {
  it('renders', () => {
    const wrapper = mount(LoginPage)
    assert.isTrue(wrapper);
  })
})

Error:

C:\dev\test-app\node_modules\typescript\lib\typescript.js:107554
                throw new Error("Could not find file: '" + fileName + "'.");
                      ^
Error: Could not find file: 'C:\dev\test-app\app\pages\login.vue'.
    at getValidSourceFile (C:\dev\test-app\node_modules\typescript\lib\typescript.js:107554:23)
    at Object.getEmitOutput (C:\dev\test-app\node_modules\typescript\lib\typescript.js:108052:30)
    at getOutput (C:\dev\test-app\node_modules\ts-node\src\index.ts:354:30)
    at Object.compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:551:11)
    at Module.m._compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:435:43)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\dev\test-app\node_modules\ts-node\src\index.ts:438:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\dev\test-app\app\pages\login.spec.ts:3:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:435:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\dev\test-app\node_modules\ts-node\src\index.ts:438:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at C:\dev\test-app\node_modules\mocha\lib\mocha.js:250:27
    at Array.forEach (native)
    at Mocha.loadFiles (C:\dev\test-app\node_modules\mocha\lib\mocha.js:247:14)
    at Mocha.run (C:\dev\test-app\node_modules\mocha\lib\mocha.js:576:10)
    at Object.<anonymous> (C:\dev\test-app\node_modules\mocha\bin\_mocha:637:18)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:423:7)
    at startup (bootstrap_node.js:147:9)
    at bootstrap_node.js:538:3

use spacing

// Spacing
$space: .3125rem; // 5px
$space-2x: $space * 2; // 10px
$space-3x: $space * 3; // 15px
$space-4x: $space * 4; // 20px
$space-5x: $space * 5; // 25px
$space-6x: $space * 6; // 30px

Error in css-loader - not found or unreadable: ~/variables.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"minimize":true,"importLoaders":1,"alias":{"/assets":"/var/www/html/nuxt-example/Frontend-Boilerplates/app/assets","/static":"/var/www/html/nuxt-example/Frontend-Boilerplates/app/static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-cf20c7a2","scoped":true,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/modules/components-name.loader.js!./app/modules/separate-files.loader.js!./app/layouts/default.vue
Module build failed:
@import '~/variables';
^
File to import not found or unreadable: ~/variables.
in /var/www/html/nuxt-example/Frontend-Boilerplates/app/layouts/default.vue (line 10, column 1)
@ ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader?{"sourceMap":false}!./node_modules/css-loader?{"sourceMap":false,"minimize":true,"importLoaders":1,"alias":{"/assets":"/var/www/html/nuxt-example/Frontend-Boilerplates/app/assets","/static":"/var/www/html/nuxt-example/Frontend-Boilerplates/app/static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-cf20c7a2","scoped":true,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/modules/components-name.loader.js!./app/modules/separate-files.loader.js!./app/layouts/default.vue 4:14-650
@ ./app/layouts/default.vue
@ ./.temp/.nuxt/App.js
@ ./.temp/.nuxt/index.js
@ ./.temp/.nuxt/client.js

How can I solve this issue? Tried to change paths manually but it's not working for me.

Warning "no-unused-variable"

Nice Job :)

I had this tslint warning:
Warning: The 'no-unused-variable' rule requires type infomation.

The problem is that this rule was not executed in linting.

This was fixed by adding project and typeCheck properties in tasks/rules/scripts-lint.js file.

module.exports = (env, envs) => {
    let options = {
        [envs.production]: {
            configFile: '.scripts-lint.json',
            emitErrors: true,
            failOnHint: true
        },
        [envs.development]: {
            configFile: '.scripts-lint.json',
            emitErrors: true,
            failOnHint: true,
            project: "tsconfig.json",
            typeCheck: true
        },
        [envs.local]: {
            configFile: '.scripts-lint.json',
            project: "tsconfig.json",
            typeCheck: true
        }
    };

    return {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        options: options[env]
    }
};

Services in module routes

Will be great if module routes will export methods, so we can inject services for example for authentication purposes...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.