Cacher Frontend React

Frontend for TJournal and DTF cacher platform built with React 18.

Configuration, building and launching

All configuration, npm and webpack scripts are modified ones from react-scripts eject with specific purposes of this project.

Commands

• npm i --production – Install only necessary npm dependencies. Or install everything with npm i for development.
• npm run start – Start dev server. Files .env.dtf and .env.tj will not be used so consider creating local environment file
• npm run build:SITE – More about environment and builds
• npm run lint – Check project with eslint
• npm run generate-openapi-redoc – Build static Redoc API – more about API

Sites build environment

• npm run build:tj – Generate TJournal version of frontend using environment file .env.tj
• npm run build:dtf – Generate DTF version of frontend using environment file .env.dtf

Files .env.dtf and .env.tj contain environment variables for building scripts and for client usage. Some of those env variables:

name	description/type
REACT_APP_VERSION	Same as in package.json. Used for client cache control
REACT_APP_CACHE_STORAGE_NAME	Name of cache storage for browsers
BUILD_PATH	Build directory for webpack output
GENERATE_SOURCEMAP	Explicitly set to false (but modification in webpack.config.js allows to skip it)
PUBLIC_URL	Root of project
REACT_APP_SITE_CODE	dtf or tj
REACT_APP_SITE_SHORT	DTF or TJ
REACT_APP_SITE_LONG	DTF or TJournal
REACT_APP_SITE_LINK	dtf.ru or tjournal.ru
REACT_APP_PRIMARY_COLOR	Hex color, used in manifest and index.html templates
REACT_APP_CDN_DOMAIN	Origin of Osnova's CDN
REACT_APP_OTHER_CACHER_LINK	Link to same Cacher for other site
REACT_APP_OTHER_CACHER_NAME	Cacher DTF or Cacher TJ
REACT_APP_LOGIN_PAGE	URL of login page, where auth is set
REACT_APP_REQUEST_PAGE	URL of permission request page
REACT_APP_SITE_IS_ARCHIVED	true if site was archived (so post links should point to domain.com/post/%ID%)

You may pass more variables, see standard react-scripts and webpack docs.

Local environment

You may create own local env (e.g. .env.development.local). It needs everything from build env and contains optional values:

• set HTTPS=true to use https on local development server. If applied, set SSL_CRT_FILE and SSL_KEY_FILE as paths to certificate and key files.
• PORT – port of dev server.
• API_PROXY_TARGET and API_PROXY_COOKIE – if set, webpack will proxy requests to /api to target with stated proxy – see webpack.createDevServerConfig.js.
• DISABLE_ESLINT_PLUGIN=true – disables esling plugin for webpack (warning overlay).

Manifest and PWA

Manifest is built with npm run build from template in scripts/build. PWA is controlled by cache.js and Service Worker (Cache first for static, network first for API), which is built with Webpack Service Worker Plugin.

API

OpenAPI docs available at api.yml. Project uses Swagger UI in runtime and precompiled Redoc .html bundle.

• npm exec -- ts-to-openapi -f types/*.d.ts – Convert Typescript defenitions to YAML format (for new types).
• npm run generate-openapi-redoc – Build static Redoc API

---

BSL-1.0 License