Create ReactController

VocaDB · Jul 3, 2021 · d1e4a21 · d1e4a21
1 parent a92c890
commit d1e4a21
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 1 deletion.
diff --git a/VocaDbWeb/Controllers/ReactController.cs b/VocaDbWeb/Controllers/ReactController.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace VocaDb.Web.Controllers
+{
+	public class ReactController : Controller
+	{
+		public IActionResult Index()
+		{
+			return View();
+		}
+	}
+}
diff --git a/VocaDbWeb/Scripts/App.tsx b/VocaDbWeb/Scripts/App.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import './i18n';
+
+const App = (): React.ReactElement => {
+	return <></>;
+};
+
+export default App;
diff --git a/VocaDbWeb/Scripts/i18n.ts b/VocaDbWeb/Scripts/i18n.ts
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+	.use(Backend)
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		load: 'languageOnly',
+		fallbackLng: 'en',
+
+		interpolation: {
+			escapeValue: false,
+		},
+
+		react: {
+			useSuspense: false,
+		},
+	});
diff --git a/VocaDbWeb/Scripts/index.tsx b/VocaDbWeb/Scripts/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+const app = document.getElementById('app');
+
+ReactDOM.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	app,
+);
diff --git a/VocaDbWeb/Startup.cs b/VocaDbWeb/Startup.cs
@@ -370,6 +370,8 @@ void HandleHttpError(int code, string? description = null, string? msg = null)
 				endpoints.MapControllerRoute(
 					name: "default",
 					pattern: "{controller=Home}/{action=Index}/{id?}");
+
+				endpoints.MapFallbackToController(action: "Index", controller: "React");
 			});
 		}
 	}

diff --git a/VocaDbWeb/Views/React/Index.cshtml b/VocaDbWeb/Views/React/Index.cshtml
@@ -0,0 +1,43 @@
+@using System.Globalization
+@using VocaDb.Model.DataContracts.Users
+@using VocaDb.Model.Domain.Globalization
+@using VocaDb.Model.Helpers
+@using VocaDb.Model.Utils
+@using VocaDb.Web.Models.Shared
+@inherits VocaDbPage
+@addTagHelper *, VocaDb.ReMikus
+
+@{
+	Layout = null;
+
+	var stylesheet = Login.IsLoggedIn && !string.IsNullOrEmpty(Login.User.Stylesheet) ? Login.User.Stylesheet : Config.SiteSettings.DefaultStylesheet;
+}
+
+<!DOCTYPE html>
+<html lang="@InterfaceLanguage.GetAvailableLanguageCode(CultureInfo.CurrentUICulture)">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Vocaloid Database</title>
+
+	<link rel="shortcut icon" href="@(Config.Assets.FavIconUrl.EmptyToNull() ?? Url.Content("~/Content/favicon.ico"))" type="image/x-icon" />
+	<remikus path="/Content/css.css" />
+	@if (!string.IsNullOrEmpty(stylesheet))
+	{
+		<link href="@Url.Content("~/Content/Styles/" + stylesheet)" rel="stylesheet" type="text/css" />
+	}
+	<link href="@Url.Content("~/Content/Styles/Icons.css")" rel="stylesheet" type="text/css" />
+	<link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="stylesheet" type="text/css" />
+	<link href="@Url.Content("~/Scripts/qTip/jquery.qtip.css")" rel="stylesheet" type="text/css" />
+	<link rel="search" type="application/opensearchdescription+xml" title="@BrandableStrings.SiteName" href="@Config.SiteSettings.OpenSearchPath" />
+
+	<partial name="Partials/_GoogleAnalytics" />
+</head>
+<body class="vdb">
+	<div id="app"></div>
+	<script>window.vdb = @ToJS(new { Values = new GlobalValues(this) })</script>
+	<remikus path="/bundles/manifest.js" />
+	<remikus path="/bundles/vendor.js" />
+	<remikus path="/bundles/index.js" />
+</body>
+</html>
diff --git a/VocaDbWeb/tsconfig.json b/VocaDbWeb/tsconfig.json
@@ -11,6 +11,7 @@
 		"forceConsistentCasingInFileNames": true,
 		"baseUrl": "./",
 		"paths": {
+			"@Components/*": ["Scripts/Components/*"],
 			"@DataContracts/*": ["Scripts/DataContracts/*"],
 			"@Helpers/*": ["Scripts/Helpers/*"],
 			"@KnockoutExtensions/*": ["Scripts/KnockoutExtensions/*"],

diff --git a/VocaDbWeb/webpack.mix.js b/VocaDbWeb/webpack.mix.js
@@ -25,6 +25,7 @@ mix
 		processCssUrls: false,
 	})
 	.alias({
+		'@Components': path.join(__dirname, 'Scripts/Components'),
 		'@DataContracts': path.join(__dirname, 'Scripts/DataContracts'),
 		'@Helpers': path.join(__dirname, 'Scripts/Helpers'),
 		'@KnockoutExtensions': path.join(__dirname, 'Scripts/KnockoutExtensions'),
@@ -78,7 +79,10 @@ mix
 	.styles(
 		['wwwroot/Scripts/jqwidgets27/styles/jqx.base.css'],
 		'wwwroot/Scripts/jqwidgets27/styles/css.css',
-	);
+	)
+
+	.ts('Scripts/index.tsx', 'wwwroot/bundles')
+	.react();
 
 if (mix.inProduction()) {
 	mix.version();