Code Monkey home page Code Monkey logo

frontend-cli's Introduction

frontend-cli

Toolkit for rapid development of React and Angular 2 apps.

Setup

  1. Create the app folder
mkdir app_name
cd app_name
  1. Optionally set app options in the .frontendrc file

  2. Install frontend-cli locally

npm install frontend-cli

frontend-cli will create app base file structure after installing oneself.

Usage

frontend-cli includes itself a scaffolding utility, bundler and development webserver which running by the bin/fe executable at the root of the app directory.

Scaffolder

Generate new code:

bin/fe generate <scaffold> <name> [..options]

Remove earlier generated code:

bin/fe destroy <scaffold> <name>

Available scaffolds

Common
  • html — index.html page template
  • stylelint — stylelint config file
React
  • component
  • route
  • actions
  • reducer

Bundler

Build an app:

bin/fe build [..options]

where the options are:

  • --environment or -e — build for the desired enviromnent, choices are: development, test and production. Default is development. If omitted bundler will try to get this setting from NODE_ENV environment variable.
  • --watch or -w — build in the watch mode.
  • --config or -c — path to the Webpack config file options from which will override the internal config. If omitted bundler will try to load options from webpack.config and Webpackfile files in the root of the app directory.
  • --options or -o — options object to pass to the external config if it is a function. Behaves just like the Webpack's CLI --env option.

Development server

Run the development server which will watch your code and perform hot swapping on its changes:

bin/fe server [..options]

where the options are:

  • --port or -p — set server port. Default is 3000.
  • --bind or -b — set host bind server to. Default is localhost.
  • --config or -c — same as in the bundler.
  • --options or -o — same as in the bundler.

frontend-cli's People

Contributors

kiurchv avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

frontend-cli's Issues

Scaffolding

Common features
  • Base generator class
  • Undo generated code
  • Generator chaining
  • Excluding files
  • Appending lines
Common generators
  • App
  • HTML
  • Stylelint
React generators
  • App
  • Component
  • Actions
  • Reducer
  • Route

Webpack integration

Common features
  • Add base config
  • Define environment-specific options
  • Define framework-specific options
  • Setup CSS output optimization
  • Add ability to use custom config files
  • Setup watch mode
  • Integrate hot module reloading
Loaders
  • Static
  • JavaScript
  • TypeScript
  • SCSS
  • PostCSS
Plugins

Development server

  • Implement base functionality
  • Webpack integration
  • Implement hot loading for Redux apps

Rebuild everything

Transform this scaffold into the universal management utility which will act as a scaffolder, compiler and development server for React/Flux and Angular 2 apps written in JavaScript and TypeScript.

  • Implement CLI
  • Integrate Webpack #9
  • Implement scaffolder #5
  • Implement development server #10

Move to Brunch

We moving to Brunch from current build system to increase build speed and simplify configuration process.

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.