jadeallencook/create-react-app.sh

## create-react-app.sh
# your info here
GITHUB_USERNAME="your_username"
AUTHOR_NAME="Your Name"
INIT_COMMIT_MESSAGE="init: setup basic react app using webpack and typescript"

# create-react-app
git clone "git@github.com:$GITHUB_USERNAME/$1.git"
cd "$1"

# create package.json
echo '{
  "name": "'$1'",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.config.js"
  },
  "author": "'$AUTHOR_NAME'",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {}
}' > package.json

# install dependencies
npm i react react-dom typescript

# install babel
npm i -D @babel/core babel-loader @babel/preset-react

# install webpack
npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server

# install typescript
npm i -D typescript @types/react @types/react-dom ts-loader @babel/preset-typescript

# create directories
mkdir src public

# create files
touch .babelrc webpack.config.js .gitignore tsconfig.json
touch src/index.tsx
touch public/index.html

# add node_modules to .gitignore
echo "node_modules" > .gitignore

# create basic html page
echo '<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>' > public/index.html

# create basic react app
echo "import React from 'react';
import { createRoot } from 'react-dom/client';

const App = () => (<h1>Hello World</h1>);

const root = document.getElementById('root');

if (!root) throw new Error('Root element not found');

createRoot(root).render(<App />);" > src/index.tsx

# create basic webpack config
echo "const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
    template: './public/index.html',
    filename: './index.html',
});

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.(ts|tsx)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    plugins: [htmlPlugin],
};" > webpack.config.js

# create basic babel config
echo '{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}' > .babelrc

# create basic tsconfig
echo '{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node"
    }
}' > tsconfig.json

# push changes to git
git add .
git commit -m "$INIT_COMMIT_MESSAGE"
git push
	# your info here
	GITHUB_USERNAME="your_username"
	AUTHOR_NAME="Your Name"
	INIT_COMMIT_MESSAGE="init: setup basic react app using webpack and typescript"

	# create-react-app
	git clone "git@github.com:$GITHUB_USERNAME/$1.git"
	cd "$1"

	# create package.json
	echo '{
	"name": "'$1'",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack serve --config webpack.config.js"
	},
	"author": "'$AUTHOR_NAME'",
	"license": "ISC",
	"dependencies": {},
	"devDependencies": {}
	}' > package.json

	# install dependencies
	npm i react react-dom typescript

	# install babel
	npm i -D @babel/core babel-loader @babel/preset-react

	# install webpack
	npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server

	# install typescript
	npm i -D typescript @types/react @types/react-dom ts-loader @babel/preset-typescript

	# create directories
	mkdir src public

	# create files
	touch .babelrc webpack.config.js .gitignore tsconfig.json
	touch src/index.tsx
	touch public/index.html

	# add node_modules to .gitignore
	echo "node_modules" > .gitignore

	# create basic html page
	echo '<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>' > public/index.html

	# create basic react app
	echo "import React from 'react';
	import { createRoot } from 'react-dom/client';

	const App = () => (<h1>Hello World</h1>);

	const root = document.getElementById('root');

	if (!root) throw new Error('Root element not found');

	createRoot(root).render(<App />);" > src/index.tsx

	# create basic webpack config
	echo "const HtmlWebPackPlugin = require('html-webpack-plugin');

	const htmlPlugin = new HtmlWebPackPlugin({
	template: './public/index.html',
	filename: './index.html',
	});

	module.exports = {
	mode: 'development',
	resolve: {
	extensions: ['.ts', '.tsx', '.js', '.json'],
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
	loader: 'babel-loader',
	},
	},
	{
	test: /\.(ts\|tsx)$/,
	use: 'ts-loader',
	exclude: /node_modules/,
	},
	{
	test: /\.css$/,
	use: ['style-loader', 'css-loader'],
	},
	],
	},
	plugins: [htmlPlugin],
	};" > webpack.config.js

	# create basic babel config
	echo '{
	"presets": [
	"@babel/preset-env",
	"@babel/preset-react",
	"@babel/preset-typescript"
	]
	}' > .babelrc

	# create basic tsconfig
	echo '{
	"compilerOptions": {
	"outDir": "./dist/",
	"sourceMap": true,
	"noImplicitAny": true,
	"module": "es6",
	"target": "es5",
	"jsx": "react",
	"allowSyntheticDefaultImports": true,
	"moduleResolution": "node"
	}
	}' > tsconfig.json

	# push changes to git
	git add .
	git commit -m "$INIT_COMMIT_MESSAGE"
	git push