Merge branch 'main' of github.com:nanlabs/react-webpack-boilerplate

Author: ulises-jeremias

config/webpack.development.js

@@ -50,28 +50,26 @@ const config = {
     new WebpackManifestPlugin({
       publicPath: `${URL_BASE}/`,
       seed: {
-        name: "app",
-        short_name: "app",
-        start_url: "index.html",
-        display: "standalone",
+        name: 'app',
+        short_name: 'app',
+        start_url: 'index.html',
+        display: 'standalone',
         icons: [
           {
-            src: "favicon.ico",
-            sizes: "512x512",
-            type: "image/x-icon"
-          }
+            src: 'favicon.ico',
+            sizes: '512x512',
+            type: 'image/x-icon',
+          },
         ],
-        background_color: "#4e0041",
-        theme_color: "#4e0041"
+        background_color: '#4e0041',
+        theme_color: '#4e0041',
       },
       generate: (seed, files, entrypoints) => {
         const manifestFiles = files.reduce((manifest, file) => {
           manifest[file.name] = file.path;
           return manifest;
         }, seed);
-        const entrypointFiles = entrypoints.main.filter(
-          fileName => !fileName.endsWith('.map')
-        );
+        const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
 
         return {
           files: manifestFiles,
@@ -85,9 +83,8 @@ const config = {
           from: commonPaths.favicon,
           to: commonPaths.outputPath,
         },
-      ]
+      ],
     }),
-    new webpack.HotModuleReplacementPlugin(),
   ],
 };
 

src/i18n.ts

@@ -24,7 +24,7 @@ i18n
     },
 
     // have a common namespace used around the full app
-    ns: ['translations'],
+    ns: ['translations', 'config'],
     defaultNS: 'translations',
 
     debug: process.env.NODE_ENV === 'development',

src/pages/Home.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Cracked from 'components/Animation/Cracked';
+
+import './Landing.css';
+import { useTranslation } from 'react-i18next';
+
+const Home = () => {
+  const { t } = useTranslation();
+
+  return <Cracked>{t('brand')}</Cracked>;
+};
+
+export default Home;

src/pages/Landing.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import Cracked from 'components/Animation/Cracked';
 
 import './Landing.css';
+import { useTranslation } from 'react-i18next';
 
-const Landing = () => <Cracked>app</Cracked>;
+const Landing = () => {
+  const { t } = useTranslation('config');
+
+  return <Cracked>{t('app.title')}</Cracked>;
+};
 
 export default Landing;

src/routes/AppRoutes.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import Landing from 'pages/Landing';
+import Home from 'pages/Home';
 
 const AppRoutes = () => (
   <Routes>
     <Route path="/" element={<Landing />} />
+    <Route path="/nan-labs" element={<Home />} />
   </Routes>
 );
 

static/locales/en/config.json

@@ -0,0 +1,5 @@
+{
+  "app": {
+    "title": "React Webpack Boilerplate"
+  }
+}

static/locales/en/translations.json

@@ -1 +1,3 @@
-{}
+{
+  "brand": "NaNLabs"
+}