build: version display and rm build dir first

config/env.js

@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
+const fs = require("fs");
-const path = require('path');
+const path = require("path");
-const paths = require('./paths');
+const paths = require("./paths");
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    "The NODE_ENV environment variable is required but was not specified."
   );
 }
 
@@ -20,7 +20,7 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
 ].filter(Boolean);
@@ -30,10 +30,10 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
+    require("dotenv-expand")(
-      require('dotenv').config({
+      require("dotenv").config({
         path: dotenvFile,
       })
     );
@@ -50,10 +50,10 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,16 +62,17 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
         return env;
       },
       {
+        VERSION: require("../package.json").version,
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
+        NODE_ENV: process.env.NODE_ENV || "development",
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -87,12 +88,12 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
+    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rustchat-web",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "private": true,
   "homepage": "https://privoce.rustchat.com",
   "dependencies": {
@@ -96,7 +96,7 @@
   },
   "scripts": {
     "start": "REACT_APP_BUILD_TIME=$(date +%s) node scripts/start.js",
-    "build": "REACT_APP_BUILD_TIME=$(date +%s) node scripts/build.js",
+    "build": "rm -rf build && REACT_APP_BUILD_TIME=$(date +%s) node scripts/build.js",
     "deploy": "yarn build && gh-pages -d build",
     "lint": "lint-staged",
     "prepare": "husky install",

src/common/component/FAQ.js

@@ -1,6 +1,5 @@
 // import React from "react";
 import styled from "styled-components";
-import pkg from "../../../package.json";
 import { useGetServerVersionQuery } from "../../app/services/server";
 const Styled = styled.div`
   display: flex;
@@ -12,7 +11,7 @@ export default function FAQ() {
   console.log("build time", serverVersion);
   return (
     <Styled>
-      <div className="item">Client Version: {pkg.version}</div>
+      <div className="item">Client Version: {process.env.VERSION}</div>
       <div className="item">Server Version: {serverVersion}</div>
       <div className="item">
         Build Timestamp: {process.env.REACT_APP_BUILD_TIME}