parallax-common-config

parallax-common-config

This is a module with all parallax-common-config configurations for team-parallax.

Note

This is a module with opinionated configurations you might find useful. This is used internally at team-parallax.

Installation

yarn add -D parallax-common-config

Additional dependencies are required for eslint, webpack to run smoothly:

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser autoprefixer awesome-typescript-loader cache-loader css-loader css-modules-typescript-loader eslint-config-react-app eslint-loader eslint-plugin-filenames eslint-plugin-sort-keys-fix eslint-plugin-import-alias eslint-plugin-jsdoc eslint-plugin-react eslint-plugin-sort-imports-es6-autofix eslint-plugin-unused-imports extract-css-chunks-webpack-plugin file-loader html-webpack-plugin style-loader svg-inline-loader typescript typescript-eslint-parser typings-for-css-modules-loader url-loader webpack-merge

Usage

.editorconfig

Create a symlink to use our .editorconfig

ln -s node_modules/parallax-common-config/.editorconfig .editorconfig

.gitlab-ci.common.yml

Create a symlink to use our .gitlab-ci.common.yml

ln -s node_modules/parallax-common-config/.gitlab-ci.common.yml .gitlab-ci.common.yml

.browserlistrc

Create a symlink to use our .editorconfig

ln -s node_modules/parallax-common-config/.browserlistrc .browserlistrc

.eslintrc

Add this to your .eslintrc

{
	"extends": [
		"./node_modules/parallax-common-config/.eslintrc",
		"./node_modules/parallax-common-config/.eslintrc.react",
		"./node_modules/parallax-common-config/.eslintrc.typescript"
	]
}

Note that there are also .eslintrc.prod files which return errors instead of warnings. This is useful for CI pipelines - use them like so

{
	"extends": [
		"./node_modules/parallax-common-config/.eslintrc",
		"./node_modules/parallax-common-config/.eslintrc.react",
		"./node_modules/parallax-common-config/.eslintrc.prod",
		"./node_modules/parallax-common-config/.eslintrc.react.prod",
		"./node_modules/parallax-common-config/.eslintrc.typescript" // TODO: create a prod-version of this one
	]
}

tsconfig

{
	"extends": "./node_modules/parallax-common-config/tsconfig.react"
}

Webpack

We utilize webpack-merge in order to modularize our webpack configurations.

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const webpackDev = require("./node_modules/parallax-common-config/webpack.config.dev");
const webpackProd = require("./node_modules/parallax-common-config/webpack.config.prod");
const webpackCommon = require("./node_modules/parallax-common-config/webpack.config.common");
const webpackReact = require("./node_modules/parallax-common-config/webpack.config.react");
module.exports = (env, argv) => {
	const dev = argv.mode === "development";
	return merge(webpackCommon, webpackReact, dev
		? webpackDev({})
		: webpackProd({}), {
		plugins: [
			new webpack.EnvironmentPlugin({
				MODE: dev
					? "development"
					: "production"
			})
		],
		resolve: {
			alias: {
				"~": path.resolve(__dirname, "src/"),
				Api: path.resolve(__dirname, "src/api/"),
				Components: path.resolve(__dirname, "src/components/"),
				Models: path.resolve(__dirname, "src/models/"),
				Services: path.resolve(__dirname, "src/services/"),
				Stores: path.resolve(__dirname, "src/stores/"),
				Views: path.resolve(__dirname, "src/views/")
			}
		}
	});
};

TODOs

• Change installation section to make installation more atomic.
• Create a postcss configuration
• Link and configure jest
• Automate installation with a script (cli)
• add husky configuration
• add lint-staged configuration
• add credentials check (sonar lint/git-secrets)
• add https://github.com/dylang/npm-check
• add commit linting (https://www.npmjs.com/package/check-commit ?)