bloadvenro · November 17, 2020 13:45
diff --git a/populate.sh b/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