# 🌁 Шаблон проекта ASP NET CORE MVC, Frontend - на TypeScript

## 🎇 Этапы наполнения конфигурациями 🎇

---
1. ⛅ Импорт `tsconfig.json` ⛅
---

<details>
<summary>Раскрыть код tsconfig.json</summary>

```json
{
    "compilerOptions": {
        "target": "es2016", // Устанавливает уровень JavaScript, в который компилируется TypeScript (в данном случае ES2016).
        "module": "es6", // Определяет, какой модульный формат используется в процессе компиляции (ES6 модули).
        "moduleResolution": "node", // Способ разрешения модулей. В данном случае используется разрешение как в Node.js.
        "jsx": "preserve", // Как компилировать JSX. В данном случае оставляем JSX без изменений.
        "declaration": false, // Указывает, генерировать ли файлы типов (.d.ts). Здесь это отключено.
        "removeComments": true, // Указывает, что комментарии должны быть удалены из скомпилированного кода.
        "noImplicitAny": false, // Отключает предупреждения о неявных типах `any` в коде.
        "noEmitOnError": true, // Указывает, что компиляция должна быть остановлена, если есть ошибки.
        "sourceMap": true, // Генерирует карты исходных кодов для упрощения отладки.
        "esModuleInterop": true, // Включает совместимость с модулями ES при импорте CommonJS модулей.
        "experimentalDecorators": true, // Включает поддержку экспериментальных декораторов в TypeScript.
        "emitDecoratorMetadata": true, // Включает генерацию метаданных для декораторов, которые могут использоваться в таких библиотеках как TypeORM или Angular.
        "outDir": "ScriptsAndCss/JsScripts", // Указывает директорию для сохранения скомпилированных файлов.
        "lib": [ "es2016", "dom" ] // Указывает библиотеки, которые будут включены при компиляции (ES2016 и DOM).
    },
    "exclude": [
        "node_modules" // Исключает папку node_modules из процесса компиляции.
    ]
}
```

</details>

---
2. ⛅ Импорт `webpack.config.js` ⛅
---

<details>
<summary>Раскрыть код webpack.config.js</summary>

```js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 
const TerserPlugin = require('terser-webpack-plugin');  // Импортируем TerserPlugin

module.exports = {
    entry: {
        app: './ScriptsAndCss/TypeScripts/main_api.ts', // Точка входа для JavaScript
        styles: './ScriptsAndCss/CssFiles/styles.css'   // Точка входа для CSS (может быть любой CSS-файл)
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/js'),
        filename: '[name].min.js' // Используем [name] для динамического имени файла
    },
    resolve: {
        extensions: ['.ts', '.js', '.css'] // Добавили .css
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // Извлекает CSS в отдельные файлы
                    'css-loader'               // Обрабатывает @import и url()
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/app.min.css' // Куда Webpack должен поместить CSS-файл
        })
    ],
    mode: 'development',
    watch: true,
};
```

</details>
<br>

> В случае публикации в Production релиза нужно сменить режим `mode: 'development'` на `mode: 'production'` в файле конфигурации

<details>
<summary>Раскрыть код изменений webpack.config.js</summary>

```js
mode: 'production',  // Изменен режим на production для минимизации
optimization: {
    minimize: true,  // Включаем минимизацию
    minimizer: [
        new TerserPlugin(),  // Плагин для минимизации JS
        new CssMinimizerPlugin()  // Плагин для минимизации CSS
    ]
},
```

</details>

---
3. ⛅ Импорт `package.json` - ряд плагинов опционален под ваш проект ⛅
---

<details>
<summary>Раскрыть код package.json</summary>

```json
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "css-minimizer-webpack-plugin": "7.0.0",
    "terser-webpack-plugin": "5.3.12",
    "cytoscape": "^3.31.0",
    "cytoscape-cose-bilkent": "4.1.0",
    "grunt": "1.4.1",
    "style-loader": "^4.0.0",
    "css-loader": "^7.1.2",
    "mini-css-extract-plugin": "^2.9.2",
    "grunt-webpack": "^7.0.0",
    "webpack-cli": "^6.0.1",
    "ts-loader": "^9.5.2",
    "browser-sync": "^3.0.3",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-clean": "2.0.0",
    "grunt-contrib-concat": "2.0.0",
    "grunt-contrib-cssmin": "5.0.0",
    "grunt-contrib-uglify": "5.0.1",
    "grunt-contrib-watch": "1.1.0",
    "grunt-ts": "6.0.0-beta.22"
  },
  "dependencies": {
    "cytoscape": "^3.31.0"
  },
  "comments": {
    "version": "Указывает текущую версию вашего проекта.",
    "name": "Имя вашего проекта.",
    "private": "Указывает, что проект является приватным и не должен быть опубликован в npm.",
    "devDependencies": {
      "css-minimizer-webpack-plugin": "Плагин для минимизации CSS файлов в процессе сборки Webpack.",
      "terser-webpack-plugin": "Плагин для минимизации JavaScript с использованием Terser.",
      "cytoscape": "Библиотека для работы с графами и сетями.",
      "cytoscape-cose-bilkent": "Плагин для Cytoscape, который добавляет алгоритм планирования расположения узлов.",
      "grunt": "Система автоматизации задач для Node.js, например, для сборки, минификации и тестирования.",
      "style-loader": "Лоадер для инжекции CSS в DOM через теги `<style>` в процессе сборки.",
      "css-loader": "Лоадер для обработки CSS файлов и поддержки импорта других CSS или стилей.",
      "mini-css-extract-plugin": "Плагин для извлечения CSS в отдельные файлы, что улучшает производительность.",
      "grunt-webpack": "Плагин для интеграции Webpack с системой Grunt.",
      "webpack-cli": "CLI для работы с Webpack, позволяет запускать сборку через командную строку.",
      "ts-loader": "Лоадер для загрузки TypeScript файлов в Webpack.",
      "browser-sync": "Инструмент для синхронизации браузеров и автоперезагрузки в процессе разработки.",
      "grunt-browser-sync": "Плагин для интеграции BrowserSync с Grunt.",
      "grunt-contrib-clean": "Плагин для удаления файлов или папок перед выполнением задач.",
      "grunt-contrib-concat": "Плагин для конкатенации (объединения) файлов в один.",
      "grunt-contrib-cssmin": "Плагин для сжатия CSS файлов.",
      "grunt-contrib-uglify": "Плагин для сжатия JavaScript файлов (использует UglifyJS).",
      "grunt-contrib-watch": "Плагин для отслеживания изменений файлов и автоматического выполнения задач.",
      "grunt-ts": "Плагин для компиляции TypeScript файлов в Grunt."
    }
  }
}
```

</details>

---
4. ⛅ Импорт `Gruntfile.js` ⛅
---

<details>
<summary>Раскрыть код Gruntfile.js</summary>

```js
const webpackConfig = require('./webpack.config.js');

module.exports = function (grunt) {
    grunt.initConfig({
        webpack: {
            options: webpackConfig,
            build: {
            }
        },
        browserSync: {
            dev: {
                bsFiles: {
                    src: [
                        'wwwroot/css/*.css',
                        'wwwroot/js/app.min.js', // Webpack создает app.min.js
                        'Views/**/*.cshtml'
                    ]
                },
                options: {
                    watchTask: true,
                    proxy: "localhost:5000" // Замените на свой локальный адрес
                }
            }
        },
        watch: {
            ts: {
                files: ['ScriptsAndCss/TypeScripts/**/*.ts'],
                tasks: ['webpack:build'], // Webpack компилирует и собирает
                options: {
                    spawn: false,
                },
            },
            bsReload: {
                files: ['wwwroot/css/*.css', 'wwwroot/js/app.min.js', 'Views/**/*.cshtml'],
                options: {
                    reload: true
                }
            }
        },
        clean: ["wwwroot/css/*", "wwwroot/js/*", "ScriptsAndCss/Combined/*"],
        cssmin: { //сжатие CSS
            css: {
                src: ["ScriptsAndCss/CssFiles/*"], //какой файл сжимать
                dest: "wwwroot/css/app.min.css" //сжатый выходной файл
            }
        },
    });

    grunt.loadNpmTasks('grunt-webpack');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask("build", ["clean", "webpack:build", "cssmin"]);
    grunt.registerTask("default", ["build", "browserSync:dev", "watch"]);
};
```

</details>

---
4. ⛅ Импорт `app_configuration.json` ⛅
---

<details>
<summary>Раскрыть код app_configuration.json</summary>

```json
{
  "appSettings": {
    "appHost": "localhost:8833"
  }
}
```

</details>

---

## 🎇 Этапы сборочного процесса 🎇 

---
- 🌋 Восстановить NPM пакеты
---
- 🌋 Настроить директории для генерации Frontend
    - в корне проекта где мы будем его внедрять создаём такуб структуру папок
        - 📁ScriptsAndCss      
            - 📁〰️📁CssFiles     
            - 📁〰️📁JsScripts    
            - 📁〰️📁TypeScripts 
---
- 🌋 Установить Nuget пакеты
    - **`TypeScript.MSBuild`**
    - **`AspNetCore.Mvc.Razor.RuntimeCompilation`**
    - **`Swashbuckle.AspNetCore.Swagger`**
    - **`Swashbuckle.AspNetCore.SwaggerGen`**
    - **`Swashbuckle.AspNetCore.SwaggerUI`**
---
- 🌋 В файле `Views/Shared/_Layout.cshtml` изменить адреса до `css` и `js` файлов так как теперь они называются **`app.min.css`** и **`app.min.js`**
---
- 🌋 Добавить простейшую точку входа `[js]` приложения в папку 📁ScriptsAndCss〰️>📁TypeScripts  - **`main_api.ts`** 

<details>
<summary>Раскрыть код main_api.ts</summary>

```ts
(() => {
    //по загрузке окна
    window.addEventListener("load", async () => {
        //получаем текущий URL
        const currentUrl = new URL(document.location.href);

        //получаем путь из URL
        const pathname = currentUrl.pathname.toLowerCase();

        //разбиваем пути URL на части
        const partsPath = pathname.split("/");

        //смотрим путь
        switch (partsPath[1]) {
            case "": //страница авторизации
            {

            }
            break;
            default:
                break;
        }
    }
})();
```

</details>
<br>

---
- 🌋 Добавить простейшую точку входа `[css]` приложения в папку 📁ScriptsAndCss〰️>📁CssFiles  - **`style.css`** 


<details>
<summary>Раскрыть код style.css</summary>

```ts
// ваши стили - скопируйте из wwwroot то что там было
```

</details>
<br>

---
- 🌋 Добавить примерно такое содержимое в **`Program.cs`**
> Поясняю - в данном примере вырезано внесение `CSRF` токена в логику работы сервера а также `Middleware` отвечающий за обработку служб защиты от подделки запросов. Тут мы вносим лишь Swagger для генерации документации по API и конфигурационный файл декларирующий **`host`** и **`port`** вашего сервера принудительно.

<details>
<summary>Раскрыть код Program.cs</summary>

```cs
using System.Reflection;
using System.Text.Json;

using Microsoft.AspNetCore.Mvc;
using Microsoft.OpenApi.Models;

var builder = WebApplication.CreateBuilder(args);

builder.Configuration.SetBasePath(Directory.GetCurrentDirectory())
    .AddJsonFile($"{LoggingExtensions.AppDir}/app_configuration.json");

builder.WebHost.UseUrls($"https://{builder.Configuration["appSettings:appHost"]}");

builder.Services.AddControllersWithViews();

#region В этом регионе объявляем сервисы 

// Например
// builder.Services.AddSingleton<ICashService, CashService>();

#endregion

builder.Services.Configure<JsonOptions>(options =>
{
    options.JsonSerializerOptions.WriteIndented = true; //для красивого форматирования
    options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
});

builder.Services.AddSwaggerGen(options =>
{
    options.SwaggerDoc("v1", new OpenApiInfo
    {
        Title = "App API",
        Version = "1.0.0",
        Description = "Информация об API",
        Contact = new OpenApiContact
        {
            Name = "Dvurechensky"
        }
    });
    var xmlFile = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
    var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFile);
    options.IncludeXmlComments(xmlPath);
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
else
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "Документация");
        c.RoutePrefix = "docs";
    });
    app.UseDeveloperExceptionPage(); //используем страницу исключений
}

// app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();
```

</details>
<br>

---
- 🌋 В диспетчере выполнения задач выполнить задачу `default` для генерации файлов
---
- 🌋 В настройках проекта в разделе `Выходные данные` поставить галочку на `Файл документации` - `Создание файла, содержащего документацию по API` для успешной работы **`Swagger`**
---

## 🎇 Итог 🎇

#### 📷 База 📷
При успешном старте в данном примере мы получим сервер:
- по адресу **`https://localhost:8833`** 
- документацию Swagger **`https://localhost:8833/docs/`**
---
#### 📷 Плюшки 📷 
---
- в свою очередь при вёрстке `Typescript` и активированной задаче `default` в `Диспетчере выполнения задач` - в реальном времени будет перезагружаться страница и мы увидим новые изменения на `Frontned` - лицевой стороне Web-сервера после каждого сохранения файла в проекте
- при установке параметров указанных для `production` версии в файле `webpack.config.js` мы можем собрать `Release` версию и опубликовать её в сеть в которой все файлы `css` и `js` будут сжаты и минимизированы для более быстрой и качественной работы сервера в сети
- мы можем прикрутить любую существующую библиотеку NPM и использовать её в скриптах `Typescript` для создания качественного `Frontend` - состояние которого мы можем отслеживать в реальном времени при разработке. Typescript поддерживает последние возможности ECMAScript (например, async/await, декораторы, модули и т. д.), что делает код более современным и удобным.
- используя ASP.NET Core MVC для серверной части (backend), позволяет создавать масштабируемые, производительные и безопасные веб-приложения 
- Typescript для фронтенда (frontend) обеспечивает типизацию и улучшение читаемости кода, предотвращая множество ошибок, которые могут возникнуть при использовании обычного JavaScript.
---
#### 📷 Примерный процесс разработки: 📷
---
🎃 Frontend (Typescript + Webpack):

🎈 Вы пишете код на Typescript, который потом компилируется с помощью Webpack.
Webpack минифицирует и обрабатывает ваши файлы, генерирует отдельные чанки для кода, CSS и изображений.
Grunt помогает автоматизировать задачи, такие как запуск Webpack, минификация CSS/JS, запуск локального сервера с BrowserSync.
Backend (ASP.NET Core MVC):

🎈 Серверная часть обрабатывает бизнес-логику, запросы от клиента и взаимодействует с базой данных.
Вся верстка и фронтенд код (собранный через Webpack) размещаются в папке wwwroot или другой папке для статических файлов.

🎃 Автоматизация сборки и деплоя:

🎈 Grunt автоматически обрабатывает сборку фронтенда, выполняет задачи, такие как минификация, копирование файлов и т. д.
Webpack поддерживает горячую замену модулей, что ускоряет процесс разработки.
Разработка с возможностью тестирования и отладки:

🎈 В процессе разработки с помощью BrowserSync можно синхронизировать несколько браузеров и автоматически перезагружать страницы.
Webpack и Grunt делают разработку более продуктивной за счет автоматизации рутинных задач.