LDBR 2.18: Webpack (#23)

* LDBR 2.18: Добавить базовую конфигурацию webpack

* LDBR-2.18: Добавить сборку через webpack, babel

* LDBR-2.18: Внести исправления в webpack.config.js и server.js

* LDBR-2.18: Привести стили в рабочий вид

* LDBR-2.18:Добавит CopyPlugin, изменить дефайны

* LDBR-2.18: Добавить Dev Server и exclude в лоадеры

* LDBR-2.18: Добавить contenthash

* LDBR-2.18: Добавить Cache-control middleware в express

* LDBR-2.18: Изменить порядок использования contenthash

* LDBR-2.18: Добавить сборку шаблонов webpack'ом, исправить стили, define'ы

* LDBR-2.18: Обновить описание команд npm

* LDBR-2.18: Внести правки после ревью PR

* LDBR-2.18: Добавить очистку /dist

* LDBR-2.18: Перенести scss в src, заменить exclude на include

.gitignore

@@ -10,3 +10,6 @@ src/tmpl.js
 
 #ide
 .idea
+
+#artifacts
+dist/*

README.md

@@ -26,11 +26,11 @@ Trello frontend repository for Ladno Davayte Bez Roflov team, autumn of 2021.
 
 ### Usage
 
-> Starting the server from the scratch: `npm start`
+> Starting the server from the scratch: `npm start` or `npm start-dev` (development configuration)
 
-> Compiling Handlebars templates: `npm run handlebars`
+> Build: `npm run build` or `npm run build-dev` (development configuration)
 
-> Running server without template compilation: `npm run server`
+> Starting server after build: `npm run server` or `npm run server-dev` (auto-reloading server)
 
 > Running linter: `npm run lint`
 
@@ -79,7 +79,7 @@ Latest version: `0.2.0`: *Transferred to Flux architecture, refactored every mod
 
 ### Code style
 The project is written using slightly modified [Google ESling config](https://github.com/google/eslint-config-google). Code style changes:
-  
+
 * **Semicolons** at the end of statements are **required**;
 * Use of **single quotes** wherever possible is **required**;
 * **4-space** indentation is **required**;

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    ["@babel/transform-runtime"]
+  ]
+}

package.json

@@ -4,12 +4,16 @@
     "description": "LadnoDavayteBezRoflov team, Technopark, autumn of 2021",
     "main": "./server/server.js",
     "scripts": {
-        "handlebars": "npx handlebars ./src/ -f ./src/tmpl.js --extension \"hbs\"",
-        "server": "node server/server.js",
-        "start": "npm run handlebars && npm run server",
         "lint": "npx eslint . --ext .js",
         "lint:fix": "npx eslint . --ext .js --fix",
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build-dev": "npx webpack",
+        "server-dev-express": "PORT=3000 node server/server.js",
+        "server-dev": "npx webpack serve",
+        "start-dev": "npm run server-dev",
+        "build": "NODE_ENV='production' npx webpack",
+        "server": "node server/server.js",
+        "start": "npm run build && npm run server"
     },
     "repository": {
         "type": "git",
@@ -31,6 +35,23 @@
         "eslint-plugin-unused-imports": "^1.1.5",
         "express": "^4.17.1",
         "handlebars": "^4.7.7",
+        "handlebars-loader": "^1.7.1",
         "morgan": "^1.9.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.15.8",
+        "@babel/plugin-transform-runtime": "^7.15.8",
+        "@babel/preset-env": "^7.15.8",
+        "babel-loader": "^8.2.3",
+        "clean-webpack-plugin": "^4.0.0",
+        "copy-webpack-plugin": "^5.1.2",
+        "css-loader": "^6.5.0",
+        "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.4.3",
+        "node-sass": "^6.0.1",
+        "sass-loader": "^12.3.0",
+        "webpack": "^5.60.0",
+        "webpack-cli": "^4.9.1",
+        "webpack-dev-server": "^4.4.0"
     }
 }

server/server.js

@@ -6,30 +6,29 @@ const morgan = require('morgan');
 const path = require('path');
 /* Создаем приложение */
 const app = express();
-/* Прописываем путь к папке public */
-const publicFolder = path.resolve(__dirname, '..', 'public');
-const srcFolder = path.resolve(__dirname, '..', 'src');
 /* Определяем текущий порт */
 const port = process.env.PORT || 80;
+
 /* Цветовая подсветка статусов */
 app.use(morgan('dev'));
-/* Используем статику */
-app.use(express.static(publicFolder));
-app.use(express.static(srcFolder));
 
-/* фикс выдачи скриптов */
-app.all('/src/*', (req, res) => {
-    res.sendFile(path.resolve(__dirname, `..${req.url}`));
-});
+/* Время кэширования ответов, в сек */
+const cacheTime = 256 * 24 * 60 * 60;
+/* middleware для кэширования бандлов */
+const cacheMW = (req, res, next) => {
+    res.set('Cache-control', `public, max-age=${cacheTime}`);
+    next();
+};
+app.use([/\/bundle\.[A-Za-z0-9]*\.js/, /\/style\.[A-Za-z0-9]*\.css/], cacheMW);
 
-/* фикс выдачи скриптов */
-app.all('/public/css/*', (req, res) => {
-    res.sendFile(path.resolve(__dirname, `..${req.url}`));
-});
+/* Директория со статикой */
+const distFolder = path.resolve(__dirname, '..', 'dist');
+/* Используем статику */
+app.use(express.static(distFolder));
 
 /* Реагируем на любые запросы посылкой index.html */
 app.all('*', (req, res) => {
-    res.sendFile(path.resolve(`${publicFolder}/index.html`));
+    res.sendFile(path.resolve(distFolder, 'index.html'));
 });
 
 /* Слушаем указаный порт */

src/components/Footer/Footer.hbs

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="/src/components/Footer/Footer.css">
-
 <footer id="footer-main">
     <div class="footer">
         <p class="footer__text">TestRello, 2021</p>

src/components/Footer/Footer.js

@@ -1,5 +1,9 @@
 // Базовый компонент
 import BaseComponent from '../BaseComponent.js';
+// Стили
+import './Footer.scss';
+// Шаблон
+import template from './Footer.hbs';
 
 /**
  * Класс, реализующий компонент Footer.
@@ -10,6 +14,6 @@ export default class FooterComponent extends BaseComponent {
     * @param {function} context контекст отрисовки шаблона
     */
     constructor(context) {
-        super(context, Handlebars.templates['components/Footer/Footer']);
+        super(context, template);
     }
 }

src/components/Footer/Footer.css → src/components/Footer/Footer.scss

@@ -8,10 +8,14 @@
     left: 0;
     right: 0;
     margin-bottom: 0;
-}
-
-.footer__text {
-    color: azure;
-    font-family: 'IBM Plex Sans', sans-serif;
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+
+    &__text {
+        color: azure;
+        font-family: 'IBM Plex Sans', sans-serif;
+        text-align: center;
+    }
 }

src/components/Navbar/Navbar.hbs

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="/src/components/Navbar/Navbar.css">
-
 <header id="header-main">
 
 <div class ="navbar__wrapper">
@@ -18,7 +16,7 @@
             {{else}}
                 <a href="/login" class="navbar__link">Войти</a>
                 <a href="/register" class="navbar__link">Зарегистрироваться</a>
-            {{/if}}             
+            {{/if}}
         </div>
     </div>
 </div>

src/components/Navbar/Navbar.js

@@ -1,8 +1,12 @@
 // Базовый компонент
 import userActions from '../../actions/user.js';
 import BaseComponent from '../BaseComponent.js';
+// Стили
+import './Navbar.scss';
 
 import UserStore from '../../stores/UserStore/UserStore.js';
+// Шаблон
+import template from './Navbar.hbs';
 
 /**
  * Класс, реализующий компонент Navbar.
@@ -13,7 +17,7 @@ export default class NavbarComponent extends BaseComponent {
     * @param {function} context контекст отрисовки шаблона
     */
     constructor(context) {
-        super(context, Handlebars.templates['components/Navbar/Navbar']);
+        super(context, template);
 
         this._onRefresh = this._onRefresh.bind(this);
         UserStore.addListener(this._onRefresh);

src/constants/constants.js

@@ -23,16 +23,16 @@ export const Html = {
   * Константа, содержащая в себе параметры самого себя.
   */
 export const SelfAddress = {
-    Url: 'http://95.163.213.142',
-    Port: '3000',
+    Url: FRONTEND_ADDRESS,
+    Port: FRONTEND_PORT,
 };
 
 /**
   * Константа, содержащая в себе параметры бэкенда.
   */
 export const BackendAddress = {
-    Url: 'http://95.163.213.142',
-    Port: '8000',
+    Url: BACKEND_ADDRESS,
+    Port: BACKEND_PORT,
 };
 
 /**

src/index.js

@@ -11,8 +11,9 @@ import Router from './modules/Router/Router.js';
 // utils
 import {Html, Urls} from './constants/constants.js';
 
-// Скомпилированные шаблоны Handlebars
-import '/src/tmpl.js';
+
+// Файл стилей
+import './styles/scss/Common.scss';
 
 // Views
 import RegisterView from './views/RegisterView/RegisterView.js';

public/index.html → src/index_template.html

@@ -5,23 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0">
 
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://95.163.213.142:8000/; style-src 'self'; font-src 'self'; object-src 'none'; script-src 'self' https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js">
-
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.backend %>; style-src 'self'; font-src 'self'; object-src 'none'; script-src 'self'">
     <!-- for super modern broswers - coloring browser header -->
     <meta name="theme-color" content="#258085">
     <!-- light blue -->
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-    <link rel="stylesheet" href="css/refuse.css">
-    <link rel="stylesheet" href="css/font-awesome.min.css">
-    <link rel="stylesheet" href="css/fonts.css">
-
-    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
-
-    <script defer src="/../src/index.js" type="module"></script>
-
-    <meta name="Keywords" content="Brrrello, Брррелло">
+    <meta name="Keywords" content="Trello, Трелло">
     <meta name="geo.region" content="RU">
     <meta name="geo.placename" content="Moscow">
 
@@ -35,18 +25,18 @@
 
     <!--<![endif]-->
         <!--[if IE]>
-            <div>
-                <img class="refuse-box__image" src="assets/noscript.webp" alt="Sad Shiben">
-            </div>
-            <div class="refuse-box">
-                <h3 class="refuse-box__title">Ошибка :с</h3>
-                <p class="refuse-box__text">К сожалению, ваш браузер не поддерживается.</p>
-            </div>
-        <![endif]-->
+    <div>
+        <img class="refuse-box__image" src="../public/assets/noscript.webp" alt="Sad Shiben">
+    </div>
+    <div class="refuse-box">
+        <h3 class="refuse-box__title">Ошибка :с</h3>
+        <p class="refuse-box__text">К сожалению, ваш браузер не поддерживается.</p>
+    </div>
+    <![endif]-->
 
         <noscript>
             <div>
-                <img class="refuse-box__image" src="assets/noscript.webp" alt="Sad Shiben">
+                <img class="refuse-box__image" src="../public/assets/noscript.webp" alt="Sad Shiben">
             </div>
             <div class="refuse-box">
                 <h3 class="refuse-box__title">Ошибка :с</h3>

src/styles/scss/Common.scss

@@ -0,0 +1,17 @@
+@import 'Font-awesome.min';
+@import 'Fonts';
+@import 'Popups';
+@import 'Refuse';
+@import 'Reset';
+@import 'Constants';
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: linear-gradient(45deg, $primary-bg-color, $secondary-bg-color);
+  height: 100%;
+  font-family: 'Montserrat', sans-serif;
+}

src/styles/scss/Constants.scss

@@ -0,0 +1,17 @@
+$primary-bg-color: rgb(207, 241, 249);
+$secondary-bg-color: rgb(231, 246, 254);
+$tertiary-bg-color: rgb(170, 201, 208);
+
+$main-theme-color: rgb(37, 128, 133);
+$main-theme-color__focus: rgb(77, 156, 245);
+
+$transparent-bg-color: rgba(255, 255, 255, 0.3);
+$default-box-shadow-color: rgba(0,0,0,0.2);
+
+$error-color: rgb(216, 0, 12);
+$error-bg-color: rgb(255, 210, 210);
+
+$light-white-color: rgb(241, 241, 241);
+$input-color: rgb(210, 210, 210);
+
+$input__input-color: rgb(144, 144, 144);