bloadvenro/populate.sh

## populate.sh
#!/bin/env bash

mkdir src

cat << END > src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const appRoot = document.querySelector("#root");

ReactDOM.render(<App />, appRoot);

END

cat << END > src/App.tsx
import { hot } from "react-hot-loader/root";
import React, { FC } from "react";

const App: FC = () => {
  return <div>It works!</div>;
};

export default hot(App);

END

cat << END > src/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

END

echo '{}' > .prettierrc.json

cat << END > .editorconfig
# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2

END

cat << END > .gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

END

yarn init -y

yarn add -D prettier;

yarn add -D \
  webpack \
  webpack-cli \
  webpack-dev-server \
  clean-webpack-plugin \
  html-webpack-plugin

yarn add -D \
  babel-loader \
  @babel/core \
  @babel/preset-env \
  @babel/preset-react \
  @babel/preset-typescript

yarn add \
  react \
  react-dom \
  react-hot-loader \
  @types/react \
  @types/react-dom \
  @hot-loader/react-dom

yarn add -D typescript

cat << END > babel.config.js
// Jest will set NODE_ENV as 'test' automatically
const isTestEnv = process.env.NODE_ENV === "test";

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: isTestEnv
          ? "commonjs" // transform imports for jest to work
          : false, // do not transform imports to allow tree shaking by webpack
      },
    ],
    "@babel/preset-react",
    "@babel/preset-typescript",
  ],
  plugins: ["react-hot-loader/babel"],
};

END

cat << END > webpack.config.js
const webpack = require("webpack");
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: ["react-hot-loader/patch", "./index.tsx"],
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
    alias: {
      "react-dom": "@hot-loader/react-dom",
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, "src/index.html"),
      title: "Document",
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, "./dist"),
    historyApiFallback: true,
    hot: true,
    compress: true,
    open: true,
  },
};

END

yarn webpack serve
	#!/bin/env bash

	mkdir src

	cat << END > src/index.tsx
	import React from "react";
	import ReactDOM from "react-dom";
	import App from "./App";

	const appRoot = document.querySelector("#root");

	ReactDOM.render(<App />, appRoot);

	END

	cat << END > src/App.tsx
	import { hot } from "react-hot-loader/root";
	import React, { FC } from "react";

	const App: FC = () => {
	return <div>It works!</div>;
	};

	export default hot(App);

	END

	cat << END > src/index.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>

	END

	echo '{}' > .prettierrc.json

	cat << END > .editorconfig
	# top-most EditorConfig file
	root = true

	# Unix-style newlines with a newline ending every file
	[*]
	end_of_line = lf
	insert_final_newline = true
	indent_style = space
	indent_size = 2

	END

	cat << END > .gitignore
	# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

	# dependencies
	/node_modules
	/.pnp
	.pnp.js

	# testing
	/coverage

	# production
	/build

	# misc
	.DS_Store
	.env.local
	.env.development.local
	.env.test.local
	.env.production.local

	npm-debug.log*
	yarn-debug.log*
	yarn-error.log*

	END

	yarn init -y

	yarn add -D prettier;

	yarn add -D \
	webpack \
	webpack-cli \
	webpack-dev-server \
	clean-webpack-plugin \
	html-webpack-plugin

	yarn add -D \
	babel-loader \
	@babel/core \
	@babel/preset-env \
	@babel/preset-react \
	@babel/preset-typescript

	yarn add \
	react \
	react-dom \
	react-hot-loader \
	@types/react \
	@types/react-dom \
	@hot-loader/react-dom

	yarn add -D typescript

	cat << END > babel.config.js
	// Jest will set NODE_ENV as 'test' automatically
	const isTestEnv = process.env.NODE_ENV === "test";

	module.exports = {
	presets: [
	[
	"@babel/preset-env",
	{
	modules: isTestEnv
	? "commonjs" // transform imports for jest to work
	: false, // do not transform imports to allow tree shaking by webpack
	},
	],
	"@babel/preset-react",
	"@babel/preset-typescript",
	],
	plugins: ["react-hot-loader/babel"],
	};

	END

	cat << END > webpack.config.js
	const webpack = require("webpack");
	const path = require("path");
	const HtmlPlugin = require("html-webpack-plugin");
	const { CleanWebpackPlugin } = require("clean-webpack-plugin");

	module.exports = {
	context: path.resolve(__dirname, "src"),
	entry: ["react-hot-loader/patch", "./index.tsx"],
	output: {
	path: path.resolve(__dirname, "dist"),
	publicPath: "/",
	filename: "bundle.js",
	},
	resolve: {
	extensions: [".js", ".json", ".ts", ".tsx"],
	alias: {
	"react-dom": "@hot-loader/react-dom",
	},
	},
	module: {
	rules: [
	{
	test: /\.tsx?$/,
	use: "babel-loader",
	exclude: /node_modules/,
	},
	],
	},
	plugins: [
	new HtmlPlugin({
	template: path.resolve(__dirname, "src/index.html"),
	title: "Document",
	}),
	new CleanWebpackPlugin(),
	new webpack.HotModuleReplacementPlugin(),
	],
	devServer: {
	port: 8080,
	contentBase: path.resolve(__dirname, "./dist"),
	historyApiFallback: true,
	hot: true,
	compress: true,
	open: true,
	},
	};

	END

	yarn webpack serve