easyfront

easyfront

Integral tool for modern and dead simple frontend development flow.

What to make web development DAMN simple? Meet with easyfront!

easyfront is a particular set of most powerful and solid frontend tools which integrated to work together.

Read the Overview Post

https://medium.com/@lavrton/frontend-development-tools-are-damn-complex-let-us-fix-it-56b3ff46ca8d

Usage:

# create folder for you project
mkdir my-project && cd ./my-project

# instal easyfront locally
npm install easyfront

# create initial frontend application file structure and instal some deps
./node_modules/.bin/easyfront init


# start dev environment and local server
npm start

# now go to http://localhost:8080/src/ for your app
# or http://localhost:8080/test/ for tests

# run tests via CLI
npm test

# compile, concat and minify application
npm run build

Project structure

All your core files are placed in ./src/ directory. If you need to include some addition files (like images, fonts or styles which you don't want to import from js) into build result just place them in ./src/assets/ directory.

Use npm for any libraries/frameworks dependences:

npm install react --save

import React from 'react';

npm2 and npm3 note

By default your tests will be configured to get dependences (mocha/chai) from ./node_modules/. It will work well for npm3 users as npm3 use flatten approach of installing dependences. If you are using npm2 take a look into ./test/index.html. There are some comments how to enable test for you.

Configuration

Remember that the general idea of easyfront is to avoid any configuration. But if you still need some customization you can pass some options into easyfront CLI. For list of all option you can run:

./node_modules/.bin/easyfront [command] -h
# for instance
./node_modules/.bin/easyfront dev -h

There are list of current options

You can update scripts of your package.json file.

Local server port

easyfront dev --port 8081

Support

• Join gitter char
• Follow on Twitter.

Roadmap

• builtin eslint configuration with bunch of useful plugins and text editors support
• flow support
• more useful babel-presets
• css preprocessors

Benefits of using easyfront?

The general idea of easyfront is to make frontend development flow very simple and AVOID any configurations.

There is part of my package.json before easyfront:

“devDependencies”: {
 “babel-core”: “^6.2.1”,
 “babel-loader”: “^6.2.0”,
 “babel-plugin-transform-object-rest-spread”: “^6.1.18”,
 “babel-preset-es2015”: “^6.1.18”,
 “babel-preset-react”: “^6.1.18”,
 “babel-preset-stage-0”: “^6.1.18”,
 “css-loader”: “^0.22.0”,
 “eslint”: “^2.1.0”,
 “raw-loader”: “^0.5.1”,
 “react-addons-perf”: “^0.14.3”,
 “style-loader”: “^0.13.0”,
 “webpack”: “^1.12.4”,
 “webpack-dev-server”: “^1.12.1”
}

After:

“devDependencies”: {
   “eslint”: “^2.1.0”,
   “easyfront”: “^0.0.6”
 }

F.A.Q.

Can I use my own webpack configuration?

Probably this will be supported, but right now NO. We want to avoid ANY configurations and use them as less as possible.

If you have something very good to add into current webpack configuration create GitHub issue, please.

Can I use gulp/grunt instead of webpack?

Probably you don't need grunt/gulp for bundling as webpack works very good. If you have your own gulp/grunt configuration for bundling you don't need easyfront.

But in some specific cases (for instance ftp deploy, assets preparation) you can use gulp/grunt in parallel with easyfront.

The idea of easyfront is to hide all of this internal tools from you. So if new better bundler will come out (something that can replace webpack) you will not care about this, because easyfront incapsulate such tool and bundler will be updated inside easyfront.

Can I use Jasmine instead of Mocha/chai for testing?

Yes, you can. But you have to install them manually and easyfront test command will not work in this case. So if you need CLI test runner you have to setup it manually.

Alternatives

There are some other projects with the same idea:

• https://github.com/insin/nwb
• https://github.com/mzabriskie/rackt-cli [very specific to react]
• https://github.com/petehunt/rwb

Change log

0.0.12

• add port option to dev command
• add add png loader