Giter VIP home page Giter VIP logo

kyt's Introduction

kyt

Deprecation notice

This project is still used internally at the new york times but has long been deprecated. Please don't expect any support or documented releases going forward.



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.

Dependency Status npm

Quick Start

  1. Install Node.js (v14.0+ required). On Mac, this is as simple as:
brew install nvm
nvm use
  1. yarn add kyt
  2. yarn 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. yarn dev
  4. Check out http://localhost:3000

Features

  • Isomorphic rendering of JavaScript apps
  • Client and server hot-reloading in dev
  • Babel presets for general ES6 support and React
  • ESLint configuration and custom rules
  • Jest presets for running unit tests and CSS-in-JS linting
  • Optional client-only and server-only modes
  • Ability to override Webpack configuration from kyt.config.js

How it Works

kyt manages configuration for all aspects of development. It can be installed as a 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 and installing starter-kyts. 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:

yarn dev

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

yarn 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

kyt's People

Contributors

awayken avatar caiogondim avatar ccpricenytimes avatar coolov avatar delambo avatar dependabot[bot] avatar dkaoster avatar dlemburg avatar dting avatar ericandrewlewis avatar felipesilva avatar fsouza avatar highpharoah avatar janhoogeveen avatar jaredmcdonald avatar juan-m avatar julianvmodesto avatar kant avatar kohlmannj-nyt avatar leshow avatar montmanu avatar pedrocsilva avatar potatogopher avatar scottastrophic avatar skorney avatar staylor avatar steve-chen-nyc avatar tizmagik avatar woodb avatar zdoc01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kyt's Issues

kyt dev: logger.warn is not a function

running kyt dev, I made a change where I referred to a nonexistent export (pseudocode below the stack trace) and the process died with this message:

webpack building...
UNHANDLED EXCEPTION TypeError: logger.warn is not a function
    at Compiler.webpackCompiler.plugin.stats (/path/to/project/node_modules/kyt/utils/webpackCompiler.js:26:14)
    at Compiler.applyPlugins (/path/to/project/node_modules/tapable/lib/Tapable.js:25:14)
    at Watching._done (/path/to/project/node_modules/webpack/lib/Compiler.js:93:17)
    at Watching.<anonymous> (/path/to/project/node_modules/webpack/lib/Compiler.js:76:18)
    at Compiler.emitRecords (/path/to/project/node_modules/webpack/lib/Compiler.js:319:37)
    at Watching.<anonymous> (/path/to/project/node_modules/webpack/lib/Compiler.js:59:19)
    at /path/to/project/node_modules/webpack/lib/Compiler.js:312:11
    at next (/path/to/project/node_modules/tapable/lib/Tapable.js:81:11)
    at /path/to/project/node_modules/assets-webpack-plugin/index.js:82:9
    at /path/to/project/node_modules/assets-webpack-plugin/lib/output/createQueuedWriter.js:15:7

the change was something like this:

// MyComponent.js
+ import { nonexistentExport} from './MyOtherComponent'
...

// MyOtherComponent.js
export { notTheThingIImported }

Documentation

  • Overview & Philosophy
  • Setup
  • Requirements
  • kyt.config options
  • Current webpack support list
  • webpack config overrides
  • babel override example
  • CLI - list of tasks and individual definitions
  • Prototyping
  • Linting
  • Testing
  • kyt starters - list
  • Contributors: dev instructions
  • How to build a starter
  • Tools List
  • FAQ

Support options in starter-kyts

Starter kyts should configure the version of kyt that they depend on. I think it should go in the package.json and should be checked on setup. If the local kyt version is outside of the specified version then the user should get a warning. The starter kyt package.json configuration could look something like the following:

...
"kyt": {
  "version": "<=0.5.0"
},
...

Option to disable Server HMR

Similar to #34 it would be useful to be able to optionally disable Server HMR (and only utilize Client HMR) especially when working/focusing on UI code. The Server reloading slows down the feedback loop unnecessarily.

move babel presets for test into webpack

Right now we're loading the babel presets via the babel CLI. Since were using the webpack loader plugin we should do all preset stuff right from there so it's easier to extend. This is related to a current bug in project vi, tests aren't running because the babel transpile is failing.

`kyt init`?

Would it make sense to add a command to the global CLI: kyt init which would:

  1. Add the kyt commands to package.json scripts
  2. Create a src/client/index.js and src/server/index.js (if they don't already exist)
  3. Setup the kyt proto boilerplate

For the second item, not sure what the overlap would be with kyt setup.

Thoughts?

ASSETS_PATH env should be configurable

The ASSETS_PATH env variable seems to be determined by where kyt dev starts up the client assets server (localhost:3001). This should be configurable so that an app build using kyt can specify where to get its client assets (likely served behind a CDN, with a different protocol/hostname/port).

Make hot loading optional?

I think we have to do this so that the dev server handles better when a user doesn't intend to use hot loading. Should we make it optional in the kyt.config.js and default to false?

hotLoader: true

Starter kyts

Build a generator for pulling down and installing already-made boilerplates for kyt.

Extend kyt's local linters when setting up eslint and stylelint

The way kyt handles linter configurations isn't ideal. Currently, on setup, we drop the linter rc's into the user's root directory so the user can extend them and use them in editor plugins. Since the linters are no longer packaged, kyt has no way to update those files.

To work around this, I propose we separately package the linter configurations inside of kyt and push them up to npm. That way, on setup, we can continue giving user's extensible linter rc's, but also gain the ability to update rules and dependencies in future releases.

Thoughts?

Make a Webpack alias for the src directory

I'm not a huge fan of aliasing, but it might be helpful to alias the src directory. If we add an alias then we'll probably have to add an eslint plugin so that it doesn't complain about resolving paths.

Testing

There's no tests currently, it would be good to test the kyt CLI and some of the contracts with userland (e.g. throwing an error in kyt.config.js will correctly bubble up the error, etc.)

kyt: developer ease of use

  • Edit user's package.json to add commands
  • Add ava config to user's package.json
  • kyt update
  • postintstall script to init
  • proto command for simple prototyping
  • Fix RHL (Jeremy teaches us how this works first)
  • Smart Errors

kyt: polish

  • Eslint override in kyt.config.js
  • cdn assets config in kyt.config.js
  • Code Comments
  • Help Command
  • Readme Docs
  • change basePath to userRootPath
  • command dedupe
  • no post install inside kyt
  • remove postversion command?
  • error handling
  • delete unnecessary dependencies
  • Versioning / update strategy
  • add .gitignore file
  • add base kyt.config on setup
  • backup prototype.js file when kyt proto runs.

Babel support for kyt.config.js

Right now, kyt.config.js can only be written in node v6 supported ES6 (e.g. can't import modules). It would be nice to allow full ES6+ support in the config.

remotely-built and -deployed app serving static files with incorrect content-type header

When @jprobinson tried deploying the new games front-end on a Linux-based GKE instance, it mostly seemed to work: http://104.197.1.89. But while the <script srcs and <link hrefs were all correctly addressed and returning the data in their requests, the Content-Type: text/html header being returned with each response keeps the browser from interpreting them properly. Express or some other layer will apparently need to set these explicitly for compatibility outside an OS X deployment environment.

kyt dev occasionally fails to restart

I don't have specific steps for recreating this but occasionally when I'm developing (with kyt dev) the server fails to restart, saying the port is already in use:

👍  Client build successful
webpack built 7a148d7c5e66a4dae11c in 2544ms
👍  Server build successful
👍  Development server restarted
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000

killing the process seems to release the port again.

(glancing thru other issues - maybe related to #16?)

Prompt if src directory exists on setup

On kyt setup if the user already has a src directory, we back it up before copying in a new one. Maybe we should try to detect a user src directory at the beginning of setup and when found prompt the user with a confirmation to continue?

Add support for `src/public` static assets

A very common pattern is to serve up static assets from a directory like src/public, for things like favicons, etc. This is separate from the current assets config option (for CDN). This public folder would need to be copied over to /build for production deployments.

Upgrade dependencies that depend on `negotiator` and `tough-cookie`

Ran a snyk scan and found some vulnerabilities

✗ High severity vulnerability found on [email protected]
- desc: Regular Expression Denial of Service
- info: https://snyk.io/vuln/npm:negotiator:20160616
- from: newsreader@null > [email protected] > [email protected] > [email protected]
Upgrade direct dependency [email protected] to [email protected] (triggers upgrades to [email protected] > [email protected])

✗ High severity vulnerability found on [email protected]
- desc: Regular Expression Denial of Service
- info: https://snyk.io/vuln/npm:negotiator:20160616
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
No direct dependency upgrade can address this issue.
Run `snyk wizard` to explore remediation options.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

Tested 967 dependencies for known vulnerabilities, found 2 vulnerabilities, 6 vulnerable paths.

Run `snyk wizard` to address these issues.
Olov-Sundstrom-MBP:newsreader 206124$ snyk test
✗ High severity vulnerability found on [email protected]
- desc: Regular Expression Denial of Service
- info: https://snyk.io/vuln/npm:negotiator:20160616
- from: newsreader@null > [email protected] > [email protected] > [email protected]
Upgrade direct dependency [email protected] to [email protected] (triggers upgrades to [email protected] > [email protected])

✗ High severity vulnerability found on [email protected]
- desc: Regular Expression Denial of Service
- info: https://snyk.io/vuln/npm:negotiator:20160616
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
No direct dependency upgrade can address this issue.
Run `snyk wizard` to explore remediation options.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

✗ High severity vulnerability found on [email protected]
- desc: ReDoS via long string of semicolons
- info: https://snyk.io/vuln/npm:tough-cookie:20160722
- from: newsreader@null > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected] > [email protected]
Your dependencies are out of date, otherwise you would be using a newer tough-cookie than [email protected].
Try deleting node_modules, reinstalling and running `snyk test` again.
If the problem persists, one of your dependencies may be bundling outdated modules.

Surface error when port is in use

After firing dev, both Scott and I ran into a silent failure because a server port was in use. I tried wrapping some of the functionality in dev.js in try-catches but I couldn't catch it.

Fix me!

Add optional config arg to `kyt build`

It's common to use different settings in different environments. Should we add an optional command line argument to build to tell kyt which config to use on startup? Something like the following:

kyt build -c kyt.stage.config.js

My guess is that this use case will come up very soon as Adam sets up our environments.

Tasks before open sourcing

  • Make the version for some package.json dependencies static and delete unnecessary dependencies
  • Cleanup starter-kyts
  • logo
  • readme
  • lint kyt code
  • delete unnecessary dependencies
  • Finish up Docs
  • Testing

kyt: SSR

  • Investigate transpiling node code requirements

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.