buddypia/application.html.erb

## application.html.erb
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>
    <% if content_for?(:title) %><%= yield(:title) %> | <%= Settings.service_name %>
      <% else %><%= Settings.service_name %>
    <% end %></title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" charset="UTF-8">
  <%#= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
  <%#= stylesheet_link_tag 'application', media: 'all' %>
  <link rel="manifest" href="/manifest.json" />
  <meta name="apple-mobile-web-app-capable" content="yes">
</head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
        <%= link_to Settings.service_name, root_path, class: 'navbar-brand' %>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </nav>

      <% if flash[:error_messages] %>
        <% flash[:error_messages].each do |error_message| %>
          <div class="alert alert-danger">
            <%= error_message %>
          </div>
        <% end %>
      <% end %>

      <% if content_for?(:title) %>
        <div class="page-header">
          <h2><%= yield(:title) %></h2>
        </div>
      <% end %>

      <%= yield %>
    </div>

    <div id="root"></div>
  </body>
  <script src="<%= webpack_asset_path('main.js') %>"></script>
</html>

## development.js
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = (env, argv) => {
    return {
        mode: 'development',
        entry: {
            main: './frontend/src/index.tsx'
        },
        devtool: 'inline-source-map',
        output: {
            filename: 'javascripts/[name].js',
            path: path.resolve('./public/assets/')
        },
        plugins: [
            // new MiniCssExtractPlugin({
            //     filename: 'stylesheets/[name]-[hash].css'
            // }),
            // new ManifestPlugin({
            //     writeToFileEmit: true
            // }),
            // new webpack.HotModuleReplacementPlugin()
        ],
        module: {
            rules: [
              {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
              },
              {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
              },
              {
                test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
                exclude: /node_modules/,
                use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
              }
            ]
        },
        resolve: {
            // modules: [
            //     "node_modules",
            //     path.resolve('./frontend/src'),
            // ],
          extensions: [ '.tsx', '.ts', '.js' ],
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /.(c|sa)ss/,
                        name: 'style',
                        chunks: 'all',
                        enforce: true
                    }
                }
            },
            minimize: true
        },
        devServer: {
            watchContentBase: true,
            host: 'localhost',
            port: 9000,
            hot: true,
            publicPath: '/assets/',
            historyApiFallback: true,
        }
    }
}

## index.tsx
import Button from '@material-ui/core/Button';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component {
  public render() {
    return (
      <div>Hello World!!</div>
      // <Button>Hello World!!</Button>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));


// ReactDOM.render(
//   <div>
//   aaa</div>,
//   document.querySelector('#root'),
// );

## package.json
{
  "name": "PROJECT_NAME",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.0",
    "@material-ui/icons": "^4.5.1",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "axios": "^0.19.2",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "file-loader": "^5.0.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts-ts": "^3.1.0"
  },
  "devDependencies": {
    "eslint-config-prettier": "^6.10.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.0",
    "eslint-plugin-react-hooks": "^2.3.0",
    "prettier": "^1.19.1",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-manifest-plugin": "^2.2.0"
  },
  "scripts": {
    "dev:webpack:server": "webpack-dev-server --mode development --hot --config ./config/webpack/development.js",
    "build": "webpack --mode production --config ./config/webpack/production.js",
    "dev:build": "webpack --mode development --config ./config/webpack/development.js",
    "start": "webpack-dev-server --hot --mode development --config ./config/webpack/development.js"
  }
}

## tsconfig.json
{
  "compilerOptions": {
    "outDir": "./public/assets/",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "jsx": "react",
    "esModuleInterop": true
  },
  "filesGlob": [
    "./frontend/src/**/*.tsx",
    "./frontend/src/**/*.ts"
  ],
  "exclude": []
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>
	<% if content_for?(:title) %><%= yield(:title) %> \| <%= Settings.service_name %>
	<% else %><%= Settings.service_name %>
	<% end %></title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" charset="UTF-8">
	<%#= javascript_include_tag 'application' %>
	<%= csrf_meta_tags %>
	<%#= stylesheet_link_tag 'application', media: 'all' %>
	<link rel="manifest" href="/manifest.json" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	</head>
	<body>
	<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
	<%= link_to Settings.service_name, root_path, class: 'navbar-brand' %>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	</nav>

	<% if flash[:error_messages] %>
	<% flash[:error_messages].each do \|error_message\| %>
	<div class="alert alert-danger">
	<%= error_message %>
	</div>
	<% end %>
	<% end %>

	<% if content_for?(:title) %>
	<div class="page-header">
	<h2><%= yield(:title) %></h2>
	</div>
	<% end %>

	<%= yield %>
	</div>

	<div id="root"></div>
	</body>
	<script src="<%= webpack_asset_path('main.js') %>"></script>
	</html>
	const path = require('path')
	const glob = require('glob')
	const webpack = require('webpack')
	// const MiniCssExtractPlugin = require('mini-css-extract-plugin')

	module.exports = (env, argv) => {
	return {
	mode: 'development',
	entry: {
	main: './frontend/src/index.tsx'
	},
	devtool: 'inline-source-map',
	output: {
	filename: 'javascripts/[name].js',
	path: path.resolve('./public/assets/')
	},
	plugins: [
	// new MiniCssExtractPlugin({
	// filename: 'stylesheets/[name]-[hash].css'
	// }),
	// new ManifestPlugin({
	// writeToFileEmit: true
	// }),
	// new webpack.HotModuleReplacementPlugin()
	],
	module: {
	rules: [
	{
	test: /\.tsx?$/,
	use: 'ts-loader',
	exclude: /node_modules/,
	},
	{
	test: /\.css$/,
	use: ['style-loader', 'css-loader']
	},
	{
	test: /\.(png\|svg\|jpg\|jpeg\|gif\|ico)$/,
	exclude: /node_modules/,
	use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
	}
	]
	},
	resolve: {
	// modules: [
	// "node_modules",
	// path.resolve('./frontend/src'),
	// ],
	extensions: [ '.tsx', '.ts', '.js' ],
	},
	optimization: {
	splitChunks: {
	cacheGroups: {
	vendor: {
	test: /.(c\|sa)ss/,
	name: 'style',
	chunks: 'all',
	enforce: true
	}
	}
	},
	minimize: true
	},
	devServer: {
	watchContentBase: true,
	host: 'localhost',
	port: 9000,
	hot: true,
	publicPath: '/assets/',
	historyApiFallback: true,
	}
	}
	}
	import Button from '@material-ui/core/Button';
	import * as React from 'react';
	import * as ReactDOM from 'react-dom';

	export default class App extends React.Component {
	public render() {
	return (
	<div>Hello World!!</div>
	// <Button>Hello World!!</Button>
	);
	}
	}

	ReactDOM.render(<App />, document.getElementById("root"));


	// ReactDOM.render(
	// <div>
	// aaa</div>,
	// document.querySelector('#root'),
	// );
	{
	"name": "PROJECT_NAME",
	"private": true,
	"dependencies": {
	"@material-ui/core": "^4.9.0",
	"@material-ui/icons": "^4.5.1",
	"@types/react": "^16.9.19",
	"@types/react-dom": "^16.9.5",
	"axios": "^0.19.2",
	"css-loader": "^3.4.2",
	"eslint": "^6.8.0",
	"file-loader": "^5.0.2",
	"react": "^16.12.0",
	"react-dom": "^16.12.0",
	"react-scripts-ts": "^3.1.0"
	},
	"devDependencies": {
	"eslint-config-prettier": "^6.10.0",
	"eslint-loader": "^3.0.3",
	"eslint-plugin-prettier": "^3.1.2",
	"eslint-plugin-react": "^7.18.0",
	"eslint-plugin-react-hooks": "^2.3.0",
	"prettier": "^1.19.1",
	"source-map-loader": "^0.2.4",
	"style-loader": "^1.1.3",
	"ts-loader": "^6.2.1",
	"typescript": "^3.7.5",
	"webpack": "^4.41.5",
	"webpack-cli": "^3.3.10",
	"webpack-dev-server": "^3.10.1",
	"webpack-manifest-plugin": "^2.2.0"
	},
	"scripts": {
	"dev:webpack:server": "webpack-dev-server --mode development --hot --config ./config/webpack/development.js",
	"build": "webpack --mode production --config ./config/webpack/production.js",
	"dev:build": "webpack --mode development --config ./config/webpack/development.js",
	"start": "webpack-dev-server --hot --mode development --config ./config/webpack/development.js"
	}
	}
	{
	"compilerOptions": {
	"outDir": "./public/assets/",
	"module": "commonjs",
	"lib": ["es6", "dom"],
	"sourceMap": true,
	"jsx": "react",
	"esModuleInterop": true
	},
	"filesGlob": [
	"./frontend/src/*/.tsx",
	"./frontend/src/*/.ts"
	],
	"exclude": []
	}