jadeallencook · December 27, 2023 07:15
diff --git a/create-react-app.sh b/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 "[email protected]:$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 "[email protected]:$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