write ahead log

ロールフォワード用

TypescriptとMUIでダッシュボード作るときのテンプレ

Typescript + MUI + Reactとかで雑に業務アプリを開発する時には、公式提供のテンプレートで十分な感じがする。

https://mui.com/material-ui/getting-started/templates/ https://github.com/mui/material-ui/tree/v5.5.2/docs/data/material/getting-started/templates

量産用にスクリプト書いた。

  • create-react-appのtemplateオプションをなくす
  • curlでとってくるファイルをtsxじゃなくてjsにする

でjsでも使えるはず。

APP_NAME="sample-app"

npx create-react-app --template typescript $APP_NAME
cd $APP_NAME
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material recharts
mkdir src/dashboard
cd src/dashboard
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Chart.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Deposits.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Orders.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Title.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/listItems.tsx
cd ..
cat <<EOS > App.tsx
import DashboardContent from './dashboard/Dashboard';

const App = () => {
  return <DashboardContent />;
};

export default App;
EOS

こいつを適当なシェルスクリプトとして保存して動かせばいい。

./build-template.sh
cd sample-app
npm run start

業務で量産する時とかこれでいい気がする。