Added fonts and dev webpack build

package.json

@@ -1,9 +1,12 @@
 {
 	"name": "preview-generator",
 	"version": "1.0.0",
-	"description": "A landing page for creating IIS virtual directories and applications using NodeJS.",
+	"description":
+		"A landing page for creating IIS virtual directories and applications using NodeJS.",
 	"main": "index.js",
 	"scripts": {
+		"dev":
+			"webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
 		"start": "node index.js",
 		"build": "webpack --config webpack.build.config.js",
 		"watch": "webpack --config webpack.build.config.js --watch"
@@ -12,11 +15,7 @@
 		"type": "git",
 		"url": "git+https://github.com/C-Rodg/IIS-Preview-Generator.git"
 	},
-	"keywords": [
-		"NodeJS",
-		"express",
-		"IIS"
-	],
+	"keywords": ["NodeJS", "express", "IIS"],
 	"author": "C-Rodg",
 	"license": "MIT",
 	"bugs": {

src/styles/default.css

@@ -1,3 +1,43 @@
+@import "./raleway/raleway.css";
+
+a {
+	color: inherit;
+	text-decoration: inherit;
+}
+
+html {
+	height: 100%;
+}
+
 body {
-	background: gray;
+	margin: 0;
+	height: 100%;
+	font-family: "Raleway", "Helvetica", "Arial", "sans-serif";
+	display: flex;
+	flex-direction: column;
+}
+
+#root {
+	height: 100%;
+	width: 100%;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.app {
+	height: 100%;
+	width: 100%;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	background-color: #0b222e;
+	color: #f5f5f5;
+	overflow: hidden;
+}
+
+.container {
+	padding: 10px 15px;
+	display: flex;
+	flex-direction: column;
 }

src/styles/raleway/raleway.css

@@ -0,0 +1,90 @@
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-thin.eot");
+	src: url("./raleway-thin.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-thin.woff") format("woff"),
+		url("./raleway-thin.ttf") format("truetype"),
+		url("./raleway-thin.svg#ralewaythin") format("svg");
+	font-weight: 100;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-extralight.eot");
+	src: url("./raleway-extralight.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-extralight.woff") format("woff"),
+		url("./raleway-extralight.ttf") format("truetype"),
+		url("./raleway-extralight.svg#ralewayextralight") format("svg");
+	font-weight: 200;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-light.eot");
+	src: url("./raleway-light.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-light.woff") format("woff"),
+		url("./raleway-light.ttf") format("truetype"),
+		url("./raleway-light.svg#ralewaylight") format("svg");
+	font-weight: 300;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-regular.eot");
+	src: url("./raleway-regular.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-regular.woff") format("woff"),
+		url("./raleway-regular.ttf") format("truetype"),
+		url("./raleway-regular.svg#ralewayregular") format("svg");
+	font-weight: 400;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-medium.eot");
+	src: url("./raleway-medium.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-medium.woff") format("woff"),
+		url("./raleway-medium.ttf") format("truetype"),
+		url("./raleway-medium.svg#ralewaymedium") format("svg");
+	font-weight: 500;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-semibold.eot");
+	src: url("./raleway-semibold.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-semibold.woff") format("woff"),
+		url("./raleway-semibold.ttf") format("truetype"),
+		url("./raleway-semibold.svg#ralewaysemibold") format("svg");
+	font-weight: 600;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-bold.eot");
+	src: url("./raleway-bold.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-bold.woff") format("woff"),
+		url("./raleway-bold.ttf") format("truetype"),
+		url("./raleway-bold.svg#ralewaybold") format("svg");
+	font-weight: 700;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-extrabold.eot");
+	src: url("./raleway-extrabold.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-extrabold.woff") format("woff"),
+		url("./raleway-extrabold.ttf") format("truetype"),
+		url("./raleway-extrabold.svg#ralewayextrabold") format("svg");
+	font-weight: 800;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Raleway";
+	src: url("./raleway-heavy.eot");
+	src: url("./raleway-heavy.eot?#iefix") format("embedded-opentype"),
+		url("./raleway-heavy.woff") format("woff"),
+		url("./raleway-heavy.ttf") format("truetype"),
+		url("./raleway-heavy.svg#ralewayheavy") format("svg");
+	font-weight: 900;
+	font-style: normal;
+}

webpack.dev.config.js

@@ -0,0 +1,63 @@
+const webpack = require("webpack"),
+	path = require("path"),
+	HTMLWebpackPlugin = require("html-webpack-plugin"),
+	ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const SRC_DIR = path.resolve(__dirname, "src");
+const OUTPUT_DIR = path.resolve(__dirname, "dist");
+
+const defaultInclude = [SRC_DIR];
+
+module.exports = {
+	entry: SRC_DIR + "/index.js",
+	output: {
+		path: OUTPUT_DIR,
+		publicPath: "/",
+		filename: "bundle.js"
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: [{ loader: "style-loader" }, { loader: "css-loader" }],
+				include: defaultInclude
+			},
+			{
+				test: /\.jsx?$/,
+				use: [{ loader: "babel-loader" }],
+				include: defaultInclude
+			},
+			{
+				test: /\.(jpe?g|png|gif)$/,
+				use: [{ loader: "file-loader?name=img/[name]__[hash:base64:5].[ext]" }],
+				include: defaultInclude
+			},
+			{
+				test: /\.(eot|svg|ttf|woff|woff2)$/,
+				use: [
+					{ loader: "file-loader?name=font/[name]__[hash:base64:5].[ext]" }
+				],
+				include: defaultInclude
+			}
+		]
+	},
+	target: "web",
+	plugins: [
+		new HTMLWebpackPlugin({
+			favicon: "./src/static/favicon.ico",
+			title: "Validar Preview Generator"
+		}),
+		new webpack.DefinePlugin({
+			"process.env.NODE_ENV": JSON.stringify("development")
+		})
+	],
+	devtool: "cheap-source-map",
+	devServer: {
+		contentBase: OUTPUT_DIR,
+		stats: {
+			colors: true,
+			chunks: false,
+			children: false
+		}
+	}
+};