The ts-react-vite_or_webpack from mmmmmzl

mmmmmzl / ts-react-vite_or_webpack Goto Github PK

View Code? Open in Web Editor NEW

a starter-template with typescript, react, mobx and vite/webpack...

License: MIT License

Shell 0.27% JavaScript 3.39% TypeScript 87.95% HTML 0.86% SCSS 7.52%

ts-react-vite_or_webpack's Introduction

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.

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)

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;
       }
 }