All Projects → bradleyboy → Yarsk

bradleyboy / Yarsk

Don't use this, use Create React App

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects

Projects that are alternatives of or similar to Yarsk

Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+720.6%)
Mutual labels:  eslint, babel, sass, less
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-17.09%)
Mutual labels:  eslint, babel, mocha, sass
Express Mongoose Es6 Rest Api
💥 A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication
Stars: ✭ 2,811 (+1312.56%)
Mutual labels:  eslint, babel, mocha
Threejs Webpack Es6 Boilerplate
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267 (+34.17%)
Mutual labels:  eslint, babel, sass
Sku
Front-end development toolkit
Stars: ✭ 403 (+102.51%)
Mutual labels:  eslint, babel, less
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-27.64%)
Mutual labels:  eslint, babel, sass
Kit
ReactQL starter kit (use the CLI)
Stars: ✭ 232 (+16.58%)
Mutual labels:  eslint, sass, less
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+892.46%)
Mutual labels:  babel, sass, less
React Redux Sass Starter
Everything you need to get started with a basic React application
Stars: ✭ 293 (+47.24%)
Mutual labels:  eslint, babel, sass
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (-70.85%)
Mutual labels:  eslint, babel, sass
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+387.94%)
Mutual labels:  eslint, babel, sass
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-32.66%)
Mutual labels:  babel, sass, less
Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-34.17%)
Mutual labels:  eslint, babel, sass
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-31.66%)
Mutual labels:  babel, sass, less
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-27.14%)
Mutual labels:  eslint, babel
Breko Hub
Babel React Koa Hot Universal Boilerplate
Stars: ✭ 145 (-27.14%)
Mutual labels:  babel, mocha
React Itunes Search
🎵Simple web app for itunes search with React
Stars: ✭ 147 (-26.13%)
Mutual labels:  eslint, babel
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-29.15%)
Mutual labels:  eslint, babel
Keepformac
keep for mac
Stars: ✭ 147 (-26.13%)
Mutual labels:  babel, sass
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-24.62%)
Mutual labels:  sass, less

YARSK

Yet Another React Starter Kit.

Everyone has one, here's mine.

Features

  • React, of course.
  • Webpack for asset bundling.
  • Hot reloading enabled out of the box. Changes to React components will show in the browser immediately without a full reload thanks to react-transform-hmr.
  • Babel for ES6+ transpilation.
  • SASS (SCSS or Sass style), Less, and Autoprefixer enabled by default through Webpack.
  • Image loaders setup and ready to go so you can reference your images as require() statements in JS, or just use url() as usual in CSS and Webpack will take care of the rest. See the Header component and the Application component stylesheet for examples of each.
  • Karma + Mocha + Enyzme for testing. Istanbul and isparta are also activated with karma-coverage for code coverage analysis, even on your ES6 classes. See Testing below for more info.
  • Production configuration with best practices applied for optimizing React file size. The bundled JS file produced from this example is right at 40KB minified and gzipped. See Building below for more info.
  • Built-in command for publishing your app to GitHub pages. See Building below for more info.
  • Optional support for ESLint via babel-eslint.

This kit is intentionally missing a specific Flux implementation, or any other non-essential library, as I use this as a base for experimenting with various parts of the React ecosystem.

In the wild

Usage

Fork this repo, then run:

npm install
npm start

That will fire up a webpack dev server in hot mode. Most changes will be reflected in the browser automatically without a browser reload. You can view the app in the browser at http://localhost:8080.

Building

To generate a production build, run:

npm run build

The above command will generate a dist folder with the appropriate index.html file along with the minified CSS and JS files.

You can also automatically publish to GitHub pages. Just run this instead of the regular build command:

npm run build:gh

You can then view your app at http://[yourgithubusername].github.io/[reponame]. For example, you can load this demo at http://bradleyboy.github.io/yarsk.

Modifying the HTML

The HTML file is generated using the conf/tmpl.html file. This file is used for both the development and production build.

Tests

The tests use Karma, Mocha and Chai through PhantomJS. See the example test in app/components/Application/__tests__/index.js. The test suite can be run like so:

npm test

To run the tests in watch mode (tests will re-run each time a file changes), use this instead:

npm run test:watch

You can generate code coverage reports with:

npm run test:coverage

See the coverage directory once that command is completed.

Finally, the repo is Travis ready. The .travis.yml file should work out of the box, just add your repo in Travis.

Linting

If you'd like your JavaScript to be linted, copy the .eslintrc.example to .eslintrc. I've included my own defaults, feel free to modify them to your own taste. For more information on configuring ESLint, consult its documentation. Linting is run before each webpack build when a .eslintrc file is present.

.editorconfig

An example .editorconfig file is provided with sensible defaults for JavaScript. Feel free to modify .editorconfig.example to match your own preferences, then renamed the file to .editorconfig and use an IDE or editor that supports EditorConfig.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].