Deprecated. Use CRA instead!
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.
https://medium.com/@lavrton/frontend-development-tools-are-damn-complex-let-us-fix-it-56b3ff46ca8d
# 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
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';
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.
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
You can update scripts
of your package.json
file.
easyfront dev --port 8081
- Join gitter char
- Follow on Twitter.
- builtin eslint configuration with bunch of useful plugins and text editors support
- flow support
- more useful babel-presets
- css preprocessors
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”
}
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.
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
.
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.
There are some other projects with the same idea:
- https://github.com/insin/nwb
- https://github.com/mzabriskie/rackt-cli [very specific to react, useful for creating and publishing componets]
- https://github.com/petehunt/rwb [was not working for me, and code structure is strange]
- https://github.com/ryanflorence/react-project [add a lot of React + react router boilerplates but have server support]
- https://github.com/tj/react-fatigue-dev [Looks like limited for creating react components]
- https://github.com/jarsbe/react-simple [For fast test without building]
- add port option to
dev
command - add add png loader