🌈 Deployment improvement. Added static files prefix.

Author: Miczeq22

env-config.js

@@ -0,0 +1,8 @@
+const prod = process.env.NODE_ENV === 'production';
+
+const URL = '/value-driven-templates';
+
+module.exports = {
+  'process.env.BACKEND_URL': prod ? URL : '',
+  'process.env.ASSET_PREFIX': URL,
+};

next.config.js

@@ -1,14 +1,30 @@
 const withSass = require('@zeit/next-sass');
 const withLess = require('@zeit/next-less');
 
+const webpack = require('webpack');
+
+const isProd = (process.env.NODE_ENV || 'production') === 'production';
+
+const assetPrefix = isProd ? '/value-driven-templates' : '';
+
 if (typeof require !== 'undefined') {
   require.extensions['.less'] = () => {};
 }
 
 module.exports = withLess(
   withSass({
+    assetPrefix,
     lessLoaderOptions: {
       javascriptEnabled: true,
     },
+    webpack: (config) => {
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix),
+        })
+      );
+
+      return config;
+    },
   })
 );

src/router/app-routes.ts

@@ -0,0 +1,7 @@
+export enum AppRoute {
+  HOME = '',
+  ABOUT = '/about',
+  HOW_TO_CONTRIBUTE = '/how-to-contribute',
+}
+
+export const getLink = (route: AppRoute) => `${process.env.ASSET_PREFIX}/${route}`;

src/ui/navigation/navigation.component.tsx

@@ -9,6 +9,7 @@ import {
   NavigationItem,
   NavigationLink,
 } from './navigation.styles';
+import { AppRoute } from '../../router/app-routes';
 
 export const Navigation = () => {
   const { isMobile } = useDeviceDetect();
@@ -20,18 +21,22 @@ export const Navigation = () => {
 
   return (
     <StyledNavigation>
-      <Logo>value driven templates</Logo>
+      <Link href={AppRoute.HOME}>
+        <a>
+          <Logo>value driven templates</Logo>
+        </a>
+      </Link>
       {isMobile ? (
         <Hamburger active={isMobileMenuVisible} onClick={onMobileMenuClick} />
       ) : (
         <ItemList>
           <NavigationItem>
-            <Link href="/about">
+            <Link href={AppRoute.ABOUT}>
               <NavigationLink>About</NavigationLink>
             </Link>
           </NavigationItem>
           <NavigationItem>
-            <Link href="/how-to-contribute">
+            <Link href={AppRoute.HOW_TO_CONTRIBUTE}>
               <NavigationLink>How to contribute</NavigationLink>
             </Link>
           </NavigationItem>