create-sitecore-jss 21.0.2 → 21.0.4

package/dist/templates/node-headless-ssr-proxy/README.md

@@ -1,60 +1,60 @@
-# node/express scaffolding for SSR outside of Sitecore Content Delivery
-
-This is a sample setup showing one one of how you can configure rendering server on top of node.js and Express.
-
-The setup is using `sitecore-jss-proxy` that enables request proxying to Sitecore CD along with the http cookies to enable tracking, personalization and contact identification.
-
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html)
-
-> This is a sample setup that is not officially supported by Sitecore.
-
-You can use this as a starting point to unlock deployment of your JSS apps to any managed node.js hosting environment (Azure App Service, Heroku, IBM BlueMix, you name it).
-
-## Pre-requisites
-
-1.  Your Sitecore instance needs to be configured with JSS.Server and the API Key provisioned. Read more [here](https://jss.sitecore.com/docs/getting-started/jss-server-install) how to set it up.
-
-    > LayoutService API should be returning output if you make the following request to your Sitecore instance. `http://sitecore-host/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}`
-
-1.  Build your JS app bundle with `jss build`.
-
-    > You can use any of the JSS sample apps. Other apps must support server side rendering (JSS integrated mode) to operate with this project.
-
-1.  Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the proxy root path. Most apps use `/dist/${jssAppName}`, for example `$proxyRoot/dist/${jssAppName}`.
-
-> Another way to deploy the artifacts to the proxy is to change the `instancePath` in your app's `scjssconfig.json` to the proxy root path, and then use `jss deploy files` within the app to complete the deployment to the proxy.
-
-## Setup
-
-Open `config.js` and specify your application bundle and connection settings to your Sitecore CD instance. `config.js` is heavily commented for your perusal.
-
-### Environment Variables
-
-The following environment variables can be set to configure the proxy instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
-
-| Parameter                              | Description                                                                                                                                |
-| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `SITECORE_JSS_APP_NAME`                | The JSS app's name. Used in dictionary service URL, and the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set.                 |
-| `SITECORE_JSS_SERVER_BUNDLE`           | Path to the JSS app's `server.bundle.js` file.                                                                                             |
-| `SITECORE_API_HOST`                    | Sitecore instance host name. Should be HTTPS in production.                                                                                |
-| `SITECORE_LAYOUT_SERVICE_ROUTE`        | Optional. The path to layout service for the JSS application. Defaults to `/sitecore/api/layout/render/jss`.                               |
-| `SITECORE_API_KEY`                     | The Sitecore SSC API key your app uses.                                                                                                    |
-| `SITECORE_PATH_REWRITE_EXCLUDE_ROUTES` | Optional. Pipe-separated list of absolute paths that should not be rendered through SSR. Defaults can be seen in [config.js](./config.js). |
-| `SITECORE_ENABLE_DEBUG`                | Optional. Writes verbose request info to stdout for debugging. Defaults to `false`.                                                        |
-
-## Build & run
-
-1.  Run `npm install`
-
-1.  Run `npm run start`
-
-You should be able to see the following message:
-`server listening on port 3000!` and see all the communication between this server and your Sitecore CD instance in the console.
-
-More info on this setup can be found [here](https://jss.sitecore.com/docs/fundamentals/application-modes#headless-server-side-rendering-mode).
-
-## Production Notes
-
-- Ensure that `debug: false` in `config.js`. Console output will cause terrible scaling.
-- Customise `error.html` in case your app throws HTTP 500 errors.
-- Load test the proxy prior to launch to ensure proper performance levels for your needs.
+# node/express scaffolding for SSR outside of Sitecore Content Delivery
+
+This is a sample setup showing one one of how you can configure rendering server on top of node.js and Express.
+
+The setup is using `sitecore-jss-proxy` that enables request proxying to Sitecore CD along with the http cookies to enable tracking, personalization and contact identification.
+
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/walkthrough--rendering-a-jss-app-server-side-using-the-headless-jss-proxy.html)
+
+> This is a sample setup that is not officially supported by Sitecore.
+
+You can use this as a starting point to unlock deployment of your JSS apps to any managed node.js hosting environment (Azure App Service, Heroku, IBM BlueMix, you name it).
+
+## Pre-requisites
+
+1.  Your Sitecore instance needs to be configured with JSS.Server and the API Key provisioned. Read more [here](https://jss.sitecore.com/docs/getting-started/jss-server-install) how to set it up.
+
+    > LayoutService API should be returning output if you make the following request to your Sitecore instance. `http://sitecore-host/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}`
+
+1.  Build your JS app bundle with `jss build`.
+
+    > You can use any of the JSS sample apps. Other apps must support server side rendering (JSS integrated mode) to operate with this project.
+
+1.  Deploy the build artifacts from your app (`/dist` or `/build` within the app) to the `sitecoreDistPath` set in your app's `package.json` under the proxy root path. Most apps use `/dist/${jssAppName}`, for example `$proxyRoot/dist/${jssAppName}`.
+
+> Another way to deploy the artifacts to the proxy is to change the `instancePath` in your app's `scjssconfig.json` to the proxy root path, and then use `jss deploy files` within the app to complete the deployment to the proxy.
+
+## Setup
+
+Open `config.js` and specify your application bundle and connection settings to your Sitecore CD instance. `config.js` is heavily commented for your perusal.
+
+### Environment Variables
+
+The following environment variables can be set to configure the proxy instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                              | Description                                                                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `SITECORE_JSS_APP_NAME`                | The JSS app's name. Used in dictionary service URL, and the default value of `SITECORE_JSS_SERVER_BUNDLE` if it's not set.                 |
+| `SITECORE_JSS_SERVER_BUNDLE`           | Path to the JSS app's `server.bundle.js` file.                                                                                             |
+| `SITECORE_API_HOST`                    | Sitecore instance host name. Should be HTTPS in production.                                                                                |
+| `SITECORE_LAYOUT_SERVICE_ROUTE`        | Optional. The path to layout service for the JSS application. Defaults to `/sitecore/api/layout/render/jss`.                               |
+| `SITECORE_API_KEY`                     | The Sitecore SSC API key your app uses.                                                                                                    |
+| `SITECORE_PATH_REWRITE_EXCLUDE_ROUTES` | Optional. Pipe-separated list of absolute paths that should not be rendered through SSR. Defaults can be seen in [config.js](./config.js). |
+| `SITECORE_ENABLE_DEBUG`                | Optional. Writes verbose request info to stdout for debugging. Defaults to `false`.                                                        |
+
+## Build & run
+
+1.  Run `npm install`
+
+1.  Run `npm run start`
+
+You should be able to see the following message:
+`server listening on port 3000!` and see all the communication between this server and your Sitecore CD instance in the console.
+
+More info on this setup can be found [here](https://jss.sitecore.com/docs/fundamentals/application-modes#headless-server-side-rendering-mode).
+
+## Production Notes
+
+- Ensure that `debug: false` in `config.js`. Console output will cause terrible scaling.
+- Customise `error.html` in case your app throws HTTP 500 errors.
+- Load test the proxy prior to launch to ensure proper performance levels for your needs.

package/dist/templates/node-headless-ssr-proxy/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "node-headless-ssr-proxy-sample",
-  "version": "21.0.2",
-  "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
-  "scripts": {
-    "start": "ts-node ./src/index.ts"
-  },
-  "engines": {
-    "node": ">=12",
-    "npm": ">=6"
-  },
-  "author": {
-    "name": "Sitecore Corporation",
-    "url": "https://jss.sitecore.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sitecore/jss.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sitecore/jss/issues"
-  },
-  "homepage": "https://jss.sitecore.com",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.0.2",
-    "@sitecore-jss/sitecore-jss-proxy": "^21.0.2",
-    "agentkeepalive": "^4.1.3",
-    "compression": "~1.7.3",
-    "express": "~4.16.4",
-    "memory-cache": "^0.2.0",
-    "dotenv": "^16.0.0"
-  },
-  "devDependencies": {
-    "@types/compression": "^1.7.2",
-    "@types/express": "^4.16.4",
-    "@types/memory-cache": "^0.2.2",
-    "@types/node": "^17.0.31",
-    "ts-node": "^10.7.0",
-    "typescript": "~4.6.4"
-  },
-  "private": true
-}
+{
+  "name": "node-headless-ssr-proxy-sample",
+  "version": "21.0.4",
+  "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
+  "scripts": {
+    "start": "ts-node ./src/index.ts"
+  },
+  "engines": {
+    "node": ">=12",
+    "npm": ">=6"
+  },
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sitecore/jss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "homepage": "https://jss.sitecore.com",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@sitecore-jss/sitecore-jss": "^21.0.4",
+    "@sitecore-jss/sitecore-jss-proxy": "^21.0.4",
+    "agentkeepalive": "^4.1.3",
+    "compression": "~1.7.3",
+    "express": "~4.16.4",
+    "memory-cache": "^0.2.0",
+    "dotenv": "^16.0.0"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.16.4",
+    "@types/memory-cache": "^0.2.2",
+    "@types/node": "^17.0.31",
+    "ts-node": "^10.7.0",
+    "typescript": "~4.6.4"
+  },
+  "private": true
+}

package/dist/templates/node-headless-ssr-proxy/src/error.html

@@ -1,200 +1,200 @@
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>500 Epic Fail</title>
-  <meta name="viewport" content="width=device-width">
-  <!--[if gte IE 9]>
-    <style type="text/css">
-      .gradient {
-         filter: none;
-      }
-    </style>
-    <![endif]-->
-  <style>
-    *,
-    *:after,
-    *:before {
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      -ms-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    html {
-      background: #ccc;
-      font: bold 14px/20px "Trajan Pro", "Times New Roman", Times, serif;
-      color: #430400;
-      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
-    }
-
-    .error-page-wrap {
-      width: 310px;
-      height: 310px;
-      margin: 155px auto;
-    }
-
-    .error-page-wrap:before {
-      box-shadow: 0 0 200px 150px #fff;
-      width: 310px;
-      height: 310px;
-      border-radius: 50%;
-      position: relative;
-      z-index: -1;
-      content: '';
-      display: block;
-    }
-
-    .error-page {
-      width: 310px;
-      height: 310px;
-      border-radius: 50%;
-      top: -310px;
-      position: relative;
-      text-align: center;
-      background: #d36242;
-      background: -moz-linear-gradient(top, #d36242 0%, darkred 100%);
-      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d36242), color-stop(100%, darkred));
-      background: -webkit-linear-gradient(top, #d36242 0%, darkred 100%);
-      background: -o-linear-gradient(top, #d36242 0%, darkred 100%);
-      background: -ms-linear-gradient(top, #d36242 0%, darkred 100%);
-      background: linear-gradient(to bottom, #d36242 0%, darkred 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$firstColor', endColorstr='$secondColor', GradientType=0);
-    }
-
-    .error-page:before {
-      width: 63px;
-      height: 63px;
-      border-radius: 50%;
-      box-shadow: 3px 25px 0 5px #C95439;
-      content: '';
-      z-index: -1;
-      display: block;
-      position: relative;
-      top: -19px;
-      left: 44px;
-    }
-
-    .error-page:after {
-      width: 310px;
-      height: 17px;
-      margin: 0 auto;
-      top: 25px;
-      content: '';
-      z-index: -1;
-      display: block;
-      position: relative;
-      background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
-      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(59%, rgba(35, 26, 26, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
-      background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
-      background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
-      background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
-      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#003c2c2c', GradientType=1);
-    }
-
-    .error-page h1 {
-      color: rgba(255, 255, 255, 0.94);
-      font-size: 100px;
-      margin: 65px auto 0 auto;
-      text-shadow: 0px 0 7px rgba(0, 0, 0, 0.5);
-    }
-
-    .error-page h1:before {
-      width: 260px;
-      height: 1px;
-      position: relative;
-      margin: 0 auto;
-      top: 70px;
-      content: '';
-      display: block;
-      background: -moz-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(111, 25, 25, 0.65)), color-stop(70%, rgba(75, 38, 38, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
-      background: -webkit-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -o-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -ms-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: radial-gradient(ellipse at center, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a66f1919', endColorstr='#003c2c2c', GradientType=1);
-    }
-
-    .error-page h1:after {
-      width: 260px;
-      height: 1px;
-      content: '';
-      display: block;
-      opacity: 0.2;
-      margin: 0 auto;
-      top: 50px;
-      position: relative;
-      background: -moz-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(247, 173, 148, 0.65)), color-stop(99%, rgba(255, 255, 255, 0.01)), color-stop(100%, rgba(255, 255, 255, 0)));
-      background: -webkit-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -o-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -ms-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: radial-gradient(ellipse at center, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6f7ad94', endColorstr='#00ffffff', GradientType=1);
-    }
-
-    .error-page h2 {
-      margin: 55px 0 30px 0;
-      font-size: 17px;
-    }
-
-    .error-page h2:before {
-      width: 130px;
-      height: 1px;
-      position: relative;
-      margin: 0 auto;
-      top: 31px;
-      content: '';
-      display: block;
-      background: -moz-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(111, 25, 25, 0.65)), color-stop(70%, rgba(75, 38, 38, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
-      background: -webkit-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -o-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: -ms-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      background: radial-gradient(ellipse at center, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a66f1919', endColorstr='#003c2c2c', GradientType=1);
-    }
-
-    .error-page h2:after {
-      width: 130px;
-      height: 1px;
-      content: '';
-      display: block;
-      opacity: 0.2;
-      margin: 0 auto;
-      top: 11px;
-      position: relative;
-      background: -moz-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(247, 173, 148, 0.65)), color-stop(99%, rgba(255, 255, 255, 0.01)), color-stop(100%, rgba(255, 255, 255, 0)));
-      background: -webkit-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -o-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: -ms-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      background: radial-gradient(ellipse at center, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6f7ad94', endColorstr='#00ffffff', GradientType=1);
-    }
-
-    .error-back {
-      text-decoration: none;
-      color: #430400;
-      font-size: 15px;
-    }
-
-    .error-back:hover {
-      color: #EB957D;
-      text-shadow: 0 0 3px black;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="error-page-wrap">
-    <article class="error-page gradient">
-      <h1>An error has occurred</h1>
-    </article>
-  </div>
-</body>
-
-</html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>500 Epic Fail</title>
+  <meta name="viewport" content="width=device-width">
+  <!--[if gte IE 9]>
+    <style type="text/css">
+      .gradient {
+         filter: none;
+      }
+    </style>
+    <![endif]-->
+  <style>
+    *,
+    *:after,
+    *:before {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+
+    html {
+      background: #ccc;
+      font: bold 14px/20px "Trajan Pro", "Times New Roman", Times, serif;
+      color: #430400;
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
+    }
+
+    .error-page-wrap {
+      width: 310px;
+      height: 310px;
+      margin: 155px auto;
+    }
+
+    .error-page-wrap:before {
+      box-shadow: 0 0 200px 150px #fff;
+      width: 310px;
+      height: 310px;
+      border-radius: 50%;
+      position: relative;
+      z-index: -1;
+      content: '';
+      display: block;
+    }
+
+    .error-page {
+      width: 310px;
+      height: 310px;
+      border-radius: 50%;
+      top: -310px;
+      position: relative;
+      text-align: center;
+      background: #d36242;
+      background: -moz-linear-gradient(top, #d36242 0%, darkred 100%);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d36242), color-stop(100%, darkred));
+      background: -webkit-linear-gradient(top, #d36242 0%, darkred 100%);
+      background: -o-linear-gradient(top, #d36242 0%, darkred 100%);
+      background: -ms-linear-gradient(top, #d36242 0%, darkred 100%);
+      background: linear-gradient(to bottom, #d36242 0%, darkred 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$firstColor', endColorstr='$secondColor', GradientType=0);
+    }
+
+    .error-page:before {
+      width: 63px;
+      height: 63px;
+      border-radius: 50%;
+      box-shadow: 3px 25px 0 5px #C95439;
+      content: '';
+      z-index: -1;
+      display: block;
+      position: relative;
+      top: -19px;
+      left: 44px;
+    }
+
+    .error-page:after {
+      width: 310px;
+      height: 17px;
+      margin: 0 auto;
+      top: 25px;
+      content: '';
+      z-index: -1;
+      display: block;
+      position: relative;
+      background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
+      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(59%, rgba(35, 26, 26, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
+      background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
+      background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
+      background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
+      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(35, 26, 26, 0) 59%, rgba(60, 44, 44, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#003c2c2c', GradientType=1);
+    }
+
+    .error-page h1 {
+      color: rgba(255, 255, 255, 0.94);
+      font-size: 100px;
+      margin: 65px auto 0 auto;
+      text-shadow: 0px 0 7px rgba(0, 0, 0, 0.5);
+    }
+
+    .error-page h1:before {
+      width: 260px;
+      height: 1px;
+      position: relative;
+      margin: 0 auto;
+      top: 70px;
+      content: '';
+      display: block;
+      background: -moz-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(111, 25, 25, 0.65)), color-stop(70%, rgba(75, 38, 38, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
+      background: -webkit-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -o-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -ms-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: radial-gradient(ellipse at center, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a66f1919', endColorstr='#003c2c2c', GradientType=1);
+    }
+
+    .error-page h1:after {
+      width: 260px;
+      height: 1px;
+      content: '';
+      display: block;
+      opacity: 0.2;
+      margin: 0 auto;
+      top: 50px;
+      position: relative;
+      background: -moz-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(247, 173, 148, 0.65)), color-stop(99%, rgba(255, 255, 255, 0.01)), color-stop(100%, rgba(255, 255, 255, 0)));
+      background: -webkit-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -o-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -ms-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: radial-gradient(ellipse at center, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6f7ad94', endColorstr='#00ffffff', GradientType=1);
+    }
+
+    .error-page h2 {
+      margin: 55px 0 30px 0;
+      font-size: 17px;
+    }
+
+    .error-page h2:before {
+      width: 130px;
+      height: 1px;
+      position: relative;
+      margin: 0 auto;
+      top: 31px;
+      content: '';
+      display: block;
+      background: -moz-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(111, 25, 25, 0.65)), color-stop(70%, rgba(75, 38, 38, 0)), color-stop(100%, rgba(60, 44, 44, 0)));
+      background: -webkit-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -o-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: -ms-radial-gradient(center, ellipse cover, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      background: radial-gradient(ellipse at center, rgba(111, 25, 25, 0.65) 0%, rgba(75, 38, 38, 0) 70%, rgba(60, 44, 44, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a66f1919', endColorstr='#003c2c2c', GradientType=1);
+    }
+
+    .error-page h2:after {
+      width: 130px;
+      height: 1px;
+      content: '';
+      display: block;
+      opacity: 0.2;
+      margin: 0 auto;
+      top: 11px;
+      position: relative;
+      background: -moz-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(247, 173, 148, 0.65)), color-stop(99%, rgba(255, 255, 255, 0.01)), color-stop(100%, rgba(255, 255, 255, 0)));
+      background: -webkit-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -o-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: -ms-radial-gradient(center, ellipse cover, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      background: radial-gradient(ellipse at center, rgba(247, 173, 148, 0.65) 0%, rgba(255, 255, 255, 0.01) 99%, rgba(255, 255, 255, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6f7ad94', endColorstr='#00ffffff', GradientType=1);
+    }
+
+    .error-back {
+      text-decoration: none;
+      color: #430400;
+      font-size: 15px;
+    }
+
+    .error-back:hover {
+      color: #EB957D;
+      text-shadow: 0 0 3px black;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="error-page-wrap">
+    <article class="error-page gradient">
+      <h1>An error has occurred</h1>
+    </article>
+  </div>
+</body>
+
+</html>