exos-scripts

🛡️Exos is a JavaScript framework that helps you to create apps and micro frontends using React and TypeScript.

It currently provides the following packages:

• Exos CLI: a CLI tool for building React + TypeScript applications.
• Exos Script: a set of out-of-the-box extensible scripts that helps you with the lifecycle of your React + TypeScript applications.
• Exos Core: a library with core scripts that helps you to develop your React + TypeScript application and micro frontends.

Exos Scripts

This project contains a set of out-of-the-box extensible scripts that helps you with the lifecycle of your React + TypeScript applications. It is heavily inspired in Facebook' Create React App plugin.

It contains the following built-in features:

• exos-scripts start: A ready-to-be-used development experience as similar to production as it could be (more info here).
• exos-scripts build: A build script for web applications, configured and optimized to provide the best performance (more info here).
• exos-scripts test: A unit testing framework (Jest) already configured for you (more info here).
• exos-scripts lint: a static analyzer tool configured with the best practices for development with React, TypeScript, ESLint and Prettier. Also comes with a flavor for Node Libraries. (more info here).
• exos-scripts stylelint: a static analyzer tool for your CSS files, configured with the best practices for development with SCSS and CSS Modules (more info here).

Note: For more information about the 🛡️Exos initiative, click here.

Getting started

To use it in your projects, first install exos-scripts in your package by running:

npm i -D exos-scripts

Then, update your package.json with the following:

{
  "name": "Your App",
  "version": "0.0.1",
  // ...
  "scripts": {
    "lint": "exos-scripts lint",
    "stylelint": "exos-scripts stylelint",
    "test": "exos-scripts test",
    "start": "exos-scripts start",
    "build": "exos-scripts build"
  }
}

Extending/Replacing the script configuration

To extend or replace the scripts configurations, you have to create an .exos.config.js file exporting the following:

module.exports = {
  scripts: {
    lint: (config, { env }) => {
      // TODO: Modify the config or replace it entirely
      return config;
    },
    start: (config, { env }) => {
      // TODO: Modify the config or replace it entirely
      return config;
    },
  },
};

You can modify the configuration of all the scripts this way (lint, start, test, start,build) by passing a function that receives the default config used by exos-scripts and the configuration variables used (in the example above, env tells you the value of NODE_ENV used by the script), and returns the modified configuration.

Scripts in detail

Start

It spins up a [Webpack DevServer[(https://webpack.js.org/configuration/dev-server/)] with your web app, configured with Hot Module replacement and Cheap Module Source maps.

It supports React, TypeScript, SCSS and CSS Modules. Plus, it automatically types your style files by using the typings-for-css-modules-loader library.

You can create a public folder and put assets in there, the same way Create React app works. Inside of this folder, you can set up an index.ejs file that acts as the mail index.html file.

Build

In addition to what is explained above, this scripts provides the following:

• It hashes all the files to provide a new version in production.
• It versions your artifact, adding a version number in a meta tag of the index.html file.
• It bundles all your CSS/SCSS files into a single file using the MiniCssExtractPlugin.
• It externalizes the common libraries, like React and ReactDOM.
• It provides an optimized version of your assets, thanks to webpack.

Test

It comes with a preconfigured (Jest) that support React unit tests with Enzyme, adding the proper mocks for every other file (.css, .scss, .jpg, .jpeg, .png, .svg). It expects unit tests with named using the suffixes: .spec, .test or .tests (e.g. Search.spec.tsx).

It also has coverage support that is executed by default in any CI environments where the environment variable CI=true is set. Or you can trigger it by running exos-scripts test --collectCoverage.

It has with a library mode for Node Libraries using TypeScript and (Jest). To use it, run exos-scripts test --type=Library.

Lint

It comes with with best practices for development with React, TypeScript, ESLint and Prettier (see the rules here)

It has a library mode for Node Libraries using TypeScript, ESLint and Prettier. To use it, run exos-scripts lint --type=Library (see the rules here)

Stylelint

It comes with with best practices for development with SCSS and CSS Modules (see the rules here)

🚀!