Skip to content

Latest commit

 

History

History
122 lines (85 loc) · 3.99 KB

Recipes.md

File metadata and controls

122 lines (85 loc) · 3.99 KB

kyt Recipes

Easy ways to extend kyt.

Table of Contents

  1. Extend Webpack Configuration
  2. Add Webpack Aliases
  3. Add PostCSS Plugins
  4. Add Babel Plugins and Presets
  5. Add always-mocked modules to Jest configuration

Extend Webpack Configuration

In kyt.config.js, the modifyWebpackConfig function is called any time a Webpack config is used.

It's called with two parameters:

  1. baseConfig: The current Webpack config
  2. options: an object of useful data for editing configuration
  • environment: The environment the Webpack file will be used for [production, development, test, prototype]
  • type: The type of config [client, server, test, prototype]

For example, if you want to add a new loader for only production code:

if (options.environment === 'production') {
  // Add the appropriate loader
}

Or if you want to make a change only for client side code:

if (options.type === 'client') {
  // Make changes here
}

Add Webpack Aliases

In kyt.config.js

modifyWebpackConfig: (baseConfig, options) => {
  baseConfig.resolve.alias = {
    myAliasFolder: require('path').resolve(process.cwd(), './src/path/to/my/folder'),
  };
  return baseConfig;
};

Add PostCSS Plugins

You can find the basic PostCSS configuration that kyt applies here. To apply your own PostCSS configuration, add a postcss.config.js file to the root of your project with a custom configuration. Check out the postcss.config.js documentation for more.

Add Babel Plugins and Presets

As of v0.4.0, kyt respects user .babelrc files.

npm i --save-dev my-babel-plugin

in .babelrc

{
  "presets": ["kyt-core"],
  "plugins": ["my-babel-plugin"]
}

Check out the current Babel configuration.

Add always-mocked modules to Jest configuration

in kyt.config.js

modifyJestConfig: baseConfig => {
  const jestConfig = Object.assign({}, baseConfig);

  // always mock Relay (react-relay) for tests
  jestConfig.moduleNameMapper = Object.assign({}, jestConfig.moduleNameMapper, {
    'react-relay': require('path').resolve(__dirname, '__mocks__/react-relay.js'),
  });

  return jestConfig;
};

Polyfilling

If you created your application with a starter-kyt then you should be setup for polyfilling. A starter-kyt should configure one of the kyt presets -- babel-preset-kyt-core or babel-preset-kyt-react -- in your .babelrc and should add a babel-polyfill dependency to your package.json and import it at the top of src/server/index.js and src/client/index.js. With this setup, kyt will target the current version of Node in the server build. For the client, a browserlist configuration is used to target a set of browsers and polyfill the features they are missing. You can read more about changing these options in the babel-preset-kyt-core envOptions configuration.

Editor Configuration

A kyt app should work with any editor but we recommend that you install and configure one of the following editors to work best with kyt's linters:

Atom

  1. go to atom preferences > Install
  2. Install linter
  3. Install linter-eslint
  4. Install prettier-atom - in the prettier atom Settings, check the ESLint Integration checkbox.
  5. Install linter-stylelint
  6. Make sure all packages are enabled. You may need to restart Atom.

VSCode

  1. go to View > Extensions
  2. Install ESLint
  3. Install Prettier
  4. to to Code > Preferences
  5. Change the following preferences to true:
"prettier.eslintIntegration": true,
"editor.formatOnSave": true