/fe-utils

fe utils

Primary LanguageTypeScript

FE-STARTER

Introduction

  • This repo is a frontend project scaffolding, aimed at quickly building a React SPA frontend project with out-of-box properly configured webpack, Typescript, Babel, es-lint, husky commit-lint etc.

  • GitHub Template Repository is used to host this project. As a result you can generate a new repo by using this template, which is quite convenient.

  • GitHub Pages auto-publishment is supported with GitHub Action CI and navigtion for React Router SPA is well-optimized, so that your project demo website can be automatically built and published once you push your code to the specified branch.

Usage

start-up

  • Development

    • Developing through webpack-dev-server (with HMR turned on)
      • execute command yarn to install dependencies
      • execute command yarn run dev to start devServer
      • visit http://localhost:8000
      • start developing
    • Developing with stand-alone node web server based on Express
      • execute command yarn to install dependencies
      • execute command yarn run watch to start webpack and watch files
      • execute command yarn run server to start web server on which bundled files would be hosted
      • visit http://localhost:8000
      • start developing

  • Production

    • Serve production app with node web server
      • execute command yarn to install dependencies
      • execute command yarn run build to generate bundle files
      • execute command yarn run server to start web server on which bundled files would be hosted
      • visit http://localhost:8000

  • PORT can be modified at env.js

github-pages

Note: To make github-pages-auto-publish service work as intended, GitHub Pages of your account need to be enabled first, get more infos here.

  • For sub-projects (https://your-user-name.github.io/your-sub-repo-name/)

    • rename dir .github.temp to .github
    • find and replace all fe-starter with your github repository name
    • commit changes above and push your code to master branch
    • go to github repository - settings - pages - source, select github-page branch

  • For github homepage (https://your-user-name.github.io/)

    • rename dir .github.temp to .github
    • find and replace all /fe-starter with /
    • remove baseName="/fe-starter" props from react-router <Router />
    • set pathSegmentsToKeep = 0 at app/views/github-page/404.ejs
    • commit changes above and push your code to master branch
    • go to github repository - settings - pages - source, select github-page branch

  • Which branches to use as codebase and built-assets can be set at .github-temp/workflows/deploy.yml

Details

  • fe-starter v2.0 uses chakra-ui as UI Component Library. Theme settings can be accessed at app/theme/index.ts.
  • Responsive UI is supported with react-responsive. You can modify how the app figures out if it's running on mobile or pc devices at app/layout/global-store.ts. Also, there is a hook useClassName exported from app/utils/hooks.ts, with which you can generate responsive classNames.
  • The axios interceptor is placed at app/config/axios-config.ts.
  • You can pass global style variables through lessOptions.modifyVars provided by less-loader from webpack.common.js.
  • Path shortcuts can be configured at tsconfig.json through compilerOptions.paths.