Confit

Yeoman generator for creating the development process, tools and a sample project for current-generation web applications.

Concept Video

Table of Contents

• Introduction
  • Features
  • Pre-requisites
  • Install
  • Usage
  • Contributing
• Background
  • Con-waaat?!?
• Using Confit
  • Sample Projects
  • Smart upgrading
• Sponsors

Introduction

Features

• Write browser-based applications or NodeJS applications
• Write code using ES6+ (using Babel) or TypeScript (pure ES5 support deprecated in Confit v7+)
• Write plain CSS, SASS/SCSS or Stylus
• Optional linting of CSS and JS code
• Unit testing
• System testing (browser-based)
• Support for releasing code using semantic releasing, conventional commits
• Supports Angular 1.x, Angular 2.x (beta) and now React 15.x (PRs welcome!!!)
• Sample projects for some configurations (see below)
• EXTENSIBLE! Decorate / extend configurations then re-run yo confit to re-generate configuration while preserving your changes (uses tags to identify generated-areas inside files)

Pre-requisites

• Node 4.x+
• NPM 3.9+ (especially for Windows users)

Install

npm install -g yo
npm install -g generator-confit

Usage

yo confit [--skip-install] [--skip-run]

• --skip-install skips the installation of NPM and Bower dependencies
• --skip-run skips the run command, which normally starts the build tool in develop mode (npm run dev)

Contributing

Want to make life easier for web developers? Fix a bug? Become a contributer!

Background

Con-waaat?!?

Confit is a Yeoman generator that generates web-development tools for the main development processes in web projects:

• develop
• build
• verify
• test
• release

The tooling is generated by answering a series of simple questions about your project, turning a process that used to take weeks to tune correctly, into a 5 minute step. See the animated-gif above for an example.

Out of the box, Confit can generate a sample project for the settings you've chosen so that you can see that everything works!

In more detail...

Confit isolates you from the constant-churn of Javascript frameworks so that you can get started with a build-system which "just works". And in a few months time when you want to use newer tools, migration will be easier (than if you hadn't used Confit).

• Confit is a web development-tool generator that is designed to evolve as web technologies change.
• Confit captures a project's build processes in a build-tool-independent configuration file (confit.yml), so you can migrate your configuration to use newer build-tools more-easily.
• Confit is aimed at generating tools for single-page web applications (SPAs), but will soon support generating ES6 NodeJS libraries too (see issue #17)
• Confit is opinionated. For example, Confit does not advocate the use of BowerJS. If you need it, look elsewhere. (Or create an NPM module if one doesn't already exist for the Bower library you need).
• Confit-generated config can be customised AND still preserve your changes (so long as you make changes outside of the generated sections)

Confit wants to capture the information about your project which will not change when your build-tooling changes. This is the essence of Confit - decoupling your project configuration from the build-tool implementation of that configuration.

Using Confit

Sample projects

Confit can generate a sample project implemented using the chosen combination of technologies and tools. It is recommended to generate the sample project the first time you run yo confit.

There are sample project implementations for the following technology combinations:

Build Profile | JS Source Format | JS Frameworks Supported (optional) :------------ | :--------------- | :---------------------- Browser | ES6 | Angular 1.x, React Browser | Typescript | Angular 1.x, Angular 2 Node | ES6 |

All sample projects support the chosen CSS compiler (or plain CSS files) (only for Browser projects).

Smart upgrading

Confit is designed to be hassle-free when upgrading. As well as using semantic versioning, Confit has some smarts to make upgrading simple even when there are "breaking changes". It is always a good idea to commit all your source code to a repo BEFORE upgrading, so that if the upgrade doesn't turn out how you expected, you can revert to the previous version of the code.

Each Confit generator (Confit is composed of multiple generators) contains a version identifier. When you upgrade to a new version of Confit, if any of the new generators have changed, Confit will detect this and the generator will re-ask the questions for that section. That will cause the generator's version in your confit.yml file to be updated, as well as new information being added to the file in some cases. Old / deprecated information will not be automatically removed.

Similarly for the generated tools, if the tooling changes, or you choose to use a different build profile which uses different tools, the old tools' files will not be removed.

Upgrading README.md & CONTRIBUTING.md content

There are several tags available for inserting generated content into the README.md file and CONTRIBUTING.md. Information inside README.md is aimed at end-users (consumers) of the package. Information inside CONTRIBUTING.md is aimed at developers who need to modify the package.

Tag | Description | Example :------ | :-----------| :------ <!--[RM_HEADING]--> <%- RM_HEADING %> <!--[]--> | The package name as captured in the rendered as a H1 heading | # package-name <!--[RM_DESCRIPTION]--> <%- RM_DESCRIPTION %> <!--[]--> | The package description as captured in the package.json, rendered as a block quote | > A description of my awesome package <!--[RM_INSTALL]--> <%- RM_INSTALL %> <!--[]--> | The installation commands for the package, from a consumer's perspective | npm install sample-app <!--[RM_DIR_STRUCTURE]--> <%- RM_DIR_STRUCTURE %> <!--[]--> | A tree representation of the directory structure | <!--[RM_CONTRIBUTING]--> <%- RM_CONTRIBUTING %> <!--[]--> | A link to CONTRIBUTING.md | ## ContributingSee CONTRIBUTING.md. <!--[RM_LICENSE]--> <%- RM_LICENSE %> <!--[]--> | A link to the LICENSE file | ## LicenseThis software is licensed under the MIT Licence. See LICENSE. <!--[CN_HEADING]--> <%- CN_HEADING %> <!--[]--> | Heading for CONTRIBUTING.md | # ContributingWelcome! Thanks for taking some time to find out more about how you can make package-name even better. <!--[CN_GETTING_STARTED]--> <%- CN_GETTING_STARTED %> <!--[]--> | Getting started with contributing to the project | # Getting Started. <!--[CN_GITFLOW_PROCESS]--> <%- CN_GITFLOW_PROCESS %> <!--[]--> | Description of the GitFlow development process | # GitFlow Development ProcessThis project uses the GitHub Flow workflow... <!--[CN_BUILD_TASKS]--> <%- CN_BUILD_TASKS %> <!--[]--> | A list of the build-related commands | npm run build <!--[CN_TEST_TASKS]--> <%- CN_TEST_TASKS %> <!--[]--> | A list of the test-related commands | npm test <!--[CN_VERIFY_TASKS]--> <%- CN_VERIFY_TASKS %> <!--[]--> | A list of the verify-related commands | npm run verify <!--[CN_COMMIT_TASKS]--> <%- CN_COMMIT_TASKS %> <!--[]--> | A list of the commit-related commands | git status <!--[CN_RELEASE_TASKS]--> <%- CN_RELEASE_TASKS %> <!--[]--> | A list of the release-related commands | npm run release <!--[CN_CHANGING_BUILD_TOOL_CONFIG]--> <%- CN_CHANGING_BUILD_TOOL_CONFIG %> <!--[]--> | Information on how to safely change the generated configuration | ## Changing build-tool configurationThere are 3 ways you can change the build-tool configuration for this project...

Why the strange template syntax?

The template syntax has to parsable as an EJS template, valid HTML and valid Markdown in both Stash and GitHub. Each syntax treats whitespace slightly differently. This syntax allows the templates to be inside the markdown files without being visible when rendered as HTML.

Sponsors

These are the companies that are sponsoring the development of Confit: