Ts React Webpack Save

There is an example use-webpack

This is a simple (admin) starter with typescript, react and vite.

Have a quick view:

setup

for husky

$ npm run prepare

If you do not need the taobao registry, you can change it in .npmrc

$ npm i

test

$ npm test

build for development

$ npm run dev

build for production

$ npm run build:(qa/prod)

characteristics

• use ant design as UI framework
• use ServiceWorker
• use husky{pre-commit/commit-msg} hooks
• use react-intl-universal for i18n.
• use react-virtualized for fat list.

pages

• The Index page became a Socket Debugger

TODO

• config menu by user with permission
• more functional pages like Socket Debugger

component example

import React from 'react'
import { observer } from 'mobx-react'
import { Button } from 'antd'

import history from '@shared/App/ht'

function Test() {
    function gotoHome() {
        history.push('/')
    }
    return (
        <Button type="primary" onClick={gotoHome}>
            go to page index directly
        </Button>
    )
}

export default observer(Test)

live example

necessary extensions (on vscode)

• ESLint

• stylelint

• Prettier - Code formatter

how to upload file to server

#!/bin/bash

TIMESPAN=$(date '+%s')
DEPLOYNAME=ts-react.qa.${TIMESPAN}
DEPLOYFILES=${DEPLOYNAME}.tar.gz
SERVER=0.0.0.0

# make compression
cd dist/qa
tar -zcvf ${DEPLOYFILES} ./*

# upload
scp -P 22 -o StrictHostKeyChecking=no ${DEPLOYFILES} node@${SERVER}:/home/pages/ts-react/tarfiles

# make decompression
ssh -p 22 -o StrictHostKeyChecking=no node@${SERVER} tar xzf /home/pages/ts-react/tarfiles/${DEPLOYFILES} -C /home/pages/ts-react

if [ $? -ne 0 ]; then
    echo "success"
else
    echo "fail"
fi

how to deploy with nginx

server {
       listen       9993;
       server_name  localhost:9993;

       location / {
             root   ~/Documents/react/ts-react/dist/qa/;
             index  index.html;
       }
 }

the scaffold

steamer-react-redux-ts