Code Monkey home page Code Monkey logo

kyt's Introduction

kyt

Every sizable JavaScript web app needs a common foundation: a setup to build, run, test and lint your code. kyt is a toolkit that encapsulates and manages the configuration for web apps.

Read more about kyt in our blog post.

Build Status Dependency Status npm

Quick Start

  1. Install Node.js (v10.0+ required). On Mac, this is as simple as:
brew install nvm
nvm use
  1. npm install --save-dev kyt
  2. kyt setup - This will set up your project with application and configuration files so that you can get started with kyt. Learn more about setup.
  3. npm run dev
  4. Check out http://localhost:3000

Features

  • Optional universal support with a Node server provided for rendering front-end page requests
  • Client and server hot reloading
  • Custom Babel presets with ES6 support, optional React support and optimizations for polyfilling Node and browser builds.
  • Static asset support
  • Inline SVG support
  • ESLint ruleset
  • Jest configuration for ESLint and CSS-in-JS codebases
  • Optional client-only mode for apps that already have a server

How it Works

kyt manages configuration for all aspects of development. It can be installed as an npm dependency into a new or existing project. kytโ€™s goal is to encapsulate only development tools, giving users the freedom to control their source directory and make important decisions about app architecture. kyt provides a command line interface for running all development tools.

Developers design their own architecture, choosing the tools they need for rendering, styling, and handling data.

For advanced use cases, kyt enables developers to add additional tools and configuration. See our config override instructions for details, and our recipes for examples.

Setting up a kyt project

kyt setup is a utility for bootstrapping kyt projects. It can be run to create a new project or integrate kyt with an existing project.

See the kyt documentation for more details.

Command line

kyt includes a command line program with all the commands needed for development.

Running kyt setup includes these commands as scripts in your package.json:

npm run dev

Or you can run a command using npx kyt {command}:

npx kyt build

Here are the available commands:

  • dev starts a development environment
  • build compiles server and client code for production use
  • help shows commands and their documentation

See our CLI docs for further details.

Conventions

kyt follows a few simple conventions.

All projects must have the following structure:

src/
  client/
    index.js
    polyfills.js
  server/
    index.js
    polyfills.js

Each index.js file acts as the build entry.

(Note that server/index.js is not required if hasServer is false in config). (Note that client/index.js is not required if hasClient is false in config).

If you're setting up a new project see our full list of conventions.

Configuration

kyt allows you to specify options in a kyt.config.js file. See the kyt config docs for instructions.

kyt uses Webpack to compile src code. See our recipes for extending configuration.

kyt respects Babel config files defined at the root of user projects, and provides presets to provide opinionated configurations. (If no Babel config file is defined in the user project, babel-preset-kyt-core is used when compiling Webpack.)

starter-kyts

While kyt can be easily integrated into new or existing Node projects, it is even more powerful when used with a starter-kyt. A starter-kyt offers the benefits of a boilerplate while minimizing the amount of new tools to learn and maintain.

The kyt setup command installs any preconfigured starter-kyt git repository, adding additional dependencies and building a source directory.

How to build a starter-kyt

See additional info on how to build a starter-kyt.

How to contribute to kyt

Want to help? See details here

Need Help?

  1. Check our FAQ
  2. Submit an issue
  3. Check out our recipes for extending kyt

Changelog

Changelog

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.