Merge branch 'develop' of https://github.com/ita-social-projects/StreetCode_Client into refactor-art-gallery

Author: VladyslavPavlysko

.gitignore

@@ -32,3 +32,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+
+#certificate
+/cert

README.md

@@ -16,22 +16,38 @@ Back-end part: https://github.com/ita-social-projects/StreetCode.git.
 
 ## Table of Contents
 
-- [Installation](#installation)
-  - [Required to install](#required-to-install)
-  - [Clone](#clone)
-  - [Setup](#setup)
-  - [How to run local](#how-to-run-local)
-- [Usage](#usage)
-  - [How to run tests](#how-to-run-tests)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-  - [GitHub flow](#github-flow)
-  - [Issue flow](#github-flow)
-- [Team](#team)
-- [FAQ](#faq)
-- [Support](#support)
-- [About Us](#about-us)
-- [License](#license)
+- [Streetcode](#streetcode)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Required to install](#required-to-install)
+    - [Clone](#clone)
+    - [Setup](#setup)
+      - [Prerequisites](#prerequisites)
+      - [Installation Steps](#installation-steps)
+    - [How to run local](#how-to-run-local)
+  - [Usage](#usage)
+    - [How to run tests](#how-to-run-tests)
+  - [Documentation](#documentation)
+  - [Contributing](#contributing)
+    - [Gitflow](#gitflow)
+      - [Step 1](#step-1)
+      - [Step 2](#step-2)
+      - [Step 3](#step-3)
+      - [Step 4](#step-4)
+      - [Step 5](#step-5)
+      - [Step 6](#step-6)
+      - [Step 7](#step-7)
+      - [Step 8](#step-8)
+      - [Step 9](#step-9)
+    - [Hotfixes](#hotfixes)
+      - [Step 1](#step-1-1)
+      - [Step 2](#step-2-1)
+    - [Issue flow](#issue-flow)
+  - [Team](#team)
+  - [FAQ](#faq)
+  - [Support](#support)
+  - [About Us](#about-us)
+  - [License](#license)
 
 ---
 
@@ -58,6 +74,29 @@ To setup this project use this command in project folder:
 npm install
 ```
 
+To facilitate the usage of Workbox in our project, we have a few setup steps. Follow these instructions carefully:
+
+#### Prerequisites
+
+Before proceeding, ensure you have [Chocolatey](https://chocolatey.org/install) installed on your system.
+
+#### Installation Steps
+
+1. Install `mkcert` by running the following command from PowerShell (administrative):
+   ```
+   choco install mkcert
+   ```
+2. Create a `cert` folder in the root directory of cloned project.
+3. Navigate to the `cert` folder in your console.
+4. Run the following commands to generate SSL certificates:
+```
+mkcert -install
+```
+```
+mkcert localhost 127.0.0.1
+```
+5. In `webpack.dev.js` file update DevServer section according to comment left there.
+   
 ### How to run local
 To start project locally, write following command:
 ```

config/webpack.dev.js

@@ -1,54 +1,112 @@
-const Dotenv = require('dotenv-webpack');
-const Webpack = require('webpack');
+const Dotenv = require("dotenv-webpack");
+const Webpack = require("webpack");
+const { GenerateSW } = require("workbox-webpack-plugin");
+const fs = require("fs");
 
 module.exports = {
-    entry: {
-        main: './src/index.tsx',
-    },
-    devtool: 'cheap-module-source-map',
-    devServer: {
-        open: true,
-        port: "3000",
-        historyApiFallback: true,
-    },
-    module: {
-        rules: require('./webpack.rules'),
-    },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-        symlinks: false,
-        alias: require('./webpack.aliases'),
-    },
-    output: {
-        filename: '[name].bundle.js',
-        chunkFilename: '[name].chunk.js',
-        publicPath: '/'
+  entry: {
+    main: "./src/index.tsx",
+  },
+  devtool: "cheap-module-source-map",
+  devServer: {
+    open: true,
+    port: "3000",
+    historyApiFallback: true,
+    https: {
+      // DEV.NOTE: uncomment and change names of files according to your generated ones
+
+      // key: fs.readFileSync("cert\\localhost+1-key.pem"),
+      // cert: fs.readFileSync("cert\\localhost+1.pem"),
     },
-    plugins: [
-        ...require('./webpack.plugins'),
-        new Dotenv({
-            path: `./.env`,
-        }),
-      ],
-    optimization: {
-        splitChunks: {
-            chunks: 'all',
-            minSize: 0,
-            cacheGroups: {
-                vendor: {
-                    test: /[\\/]node_modules[\\/]/,
-                    name(module) {
-                        // get the name of the package
-                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+  },
+  module: {
+    rules: require("./webpack.rules"),
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+    symlinks: false,
+    alias: require("./webpack.aliases"),
+  },
+  output: {
+    filename: "[name].bundle.js",
+    chunkFilename: "[name].chunk.js",
+    publicPath: "/",
+  },
+  plugins: [
+    ...require("./webpack.plugins"),
+    new Dotenv({
+      path: `./.env`,
+    }),
+    new GenerateSW({
+      skipWaiting: true,
+      clientsClaim: true,
+      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+      runtimeCaching: [
+        {
+          urlPattern: /\.(?:js|css)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'static-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
+            },
 
-                        // exlude @ symbol from package name (cause it may be used by the server)
-                        return `npm.${packageName.replace('@', '')}`;
-                    }
-                },
+          },
+        },
+        {
+          urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'image-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
             },
+          },
         },
+        {
+          urlPattern: /\.(?:woff|woff2|ttf|otf)$/,
+          handler:'CacheFirst',
+          options: {
+            cacheName: 'font-resources',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 90, // 3 months
+            },
+          },
+        },
+        {
+          urlPattern: /^https?.*/,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'external-resources',
+            expiration: {
+              maxEntries: 260
+            },
+          },
+        },
+      ],
+    }),
+  ],
+  optimization: {
+    splitChunks: {
+      chunks: "all",
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            // get the name of the package
+            const packageName = module.context.match(
+              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+            )[1];
+
+            // exlude @ symbol from package name (cause it may be used by the server)
+            return `npm.${packageName.replace("@", "")}`;
+          },
+        },
+      },
     },
-    performance: {
-        hints: false,
-    },
-}
+  },
+  performance: {
+    hints: false,
+  },
+};

config/webpack.prod.js

@@ -2,6 +2,7 @@ const Dotenv = require('dotenv-webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const webpack = require("webpack");
+const { GenerateSW } = require("workbox-webpack-plugin");
 
 module.exports = {
     entry: {
@@ -46,6 +47,54 @@ module.exports = {
                 },
             ],
         }),
+        new GenerateSW({
+            skipWaiting: true,
+            clientsClaim: true,
+            maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+            runtimeCaching: [
+              {
+                urlPattern: /\.(?:js|css)$/,
+                handler: 'CacheFirst',
+                options: {
+                  cacheName: 'static-resources',
+                  expiration: {
+                    maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
+                  },
+      
+                },
+              },
+              {
+                urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
+                handler: 'CacheFirst',
+                options: {
+                  cacheName: 'image-resources',
+                  expiration: {
+                    maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
+                  },
+                },
+              },
+              {
+                urlPattern: /\.(?:woff|woff2|ttf|otf)$/,
+                handler:'CacheFirst',
+                options: {
+                  cacheName: 'font-resources',
+                  expiration: {
+                    maxAgeSeconds: 60 * 60 * 24 * 90, // 3 months
+                  },
+                },
+              },
+              {
+                urlPattern: /^https?.*/,
+                handler: 'StaleWhileRevalidate',
+                options: {
+                  cacheName: 'external-resources',
+                  expiration: {
+                    maxEntries: 260
+                  },
+                },
+              },
+            ],
+          }),
       ],
     optimization: {
         splitChunks: {

jest.config.ts

@@ -39,10 +39,10 @@ const jestConfig: JestConfigWithTsJest = {
   },
   coverageThreshold: {
     global: {
-      statements: 8.6,
-      branches: 5.6,
-      functions: 6.4,
-      lines: 8.7,
+      statements: 8.5,
+      branches: 5.4,
+      functions: 6.3,
+      lines: 8.6,
     },
   },
 };