feat(Sandbox): project setup

Related to #138

sandbox/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "next/babel",
+    "@zeit/next-typescript/babel"
+  ],
+  "plugins": [
+    [
+      "emotion",
+      {
+        "inline": true
+      }
+    ]
+  ]
+}

sandbox/.dockerignore

@@ -0,0 +1,18 @@
+# dependencies
+node_modules
+test/node_modules
+dist
+# logs & pids
+*.log
+pids
+
+# coverage
+.nyc_output
+coverage
+
+# test output
+test/**/out
+.DS_Store
+
+# Editors
+**/.idea

sandbox/.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

sandbox/.gitignore

@@ -0,0 +1,23 @@
+# build output
+.vscode
+dist
+.next
+
+# dependencies
+node_modules
+test/node_modules
+
+# logs & pids
+*.log
+pids
+
+# coverage
+.nyc_output
+coverage
+
+# test output
+test/**/out
+.DS_Store
+
+# Editors
+**/.idea

sandbox/.nvmrc

@@ -0,0 +1 @@
+v10

sandbox/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:10
+LABEL artifactId="skrop-sandbox"
+LABEL maintainer="Zalando SE"
+
+# Create app directory
+WORKDIR /home/skrop/app
+
+# Install app dependencies
+COPY package*.json ./
+COPY . .
+
+RUN npm install
+RUN npm run build
+
+ENV NODE_ENV production
+EXPOSE 3000
+CMD ["npm", "start"]

sandbox/README.md

@@ -0,0 +1,60 @@
+## Requirements
+
+- Node.js 10
+- NPM 6
+- Docker
+
+## Languages & Frameworks
+
+Skrop Sandbox Web Application is build using the following:
+
+- TypeScript & LESS
+- [Next.js](https://github.com/zeit/next.js/) as a React framework with a bunch of plugins to simplify SSR, code splitting, images optimization, and SEO
+- [Semantic UI React](https://react.semantic-ui.com/) with custom theme as Design System and building blocks for UI
+- [Express.js](https://expressjs.com/) as a web framework to run server side code
+
+## Setup
+
+Please follow these steps to initialize the project on your machine:
+
+1. Clone this repo, grab some ☕️ and run:
+1. In order to make sure that the project is compilable, build it for the production environment locally:
+
+```bash
+# build the project
+npm run build
+
+# start server
+npm start
+```
+
+## Run local development environment
+
+```bash
+npm run dev
+```
+
+## Run production environment
+
+Since we dockerize Web Application to run it in production
+it's possible to check production build localy:
+
+1. Build the project
+
+```bash
+npm run build
+```
+
+2. Build new Docker image
+
+```bash
+./scripts/docker-build.sh
+```
+
+3. Run Docker image
+
+```bash
+./scripts/docker-run.sh
+```
+
+Now you should see application running at `http://localhost:3000`.

sandbox/next-seo.config.js

@@ -0,0 +1,29 @@
+export default {
+  titleTemplate: `%s | Skrop`,
+  description: "Skrop is a media service based on Skipper and the vips library",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://github.com/zalando-stups/skrop",
+    title: "Skrop",
+    description:
+      "Skrop is a media service based on Skipper and the vips library",
+    defaultImageWidth: 1200,
+    defaultImageHeight: 1200,
+    // Multiple Open Graph images is only available in version `7.0.0-canary.0`+ of next (see note top of README.md)
+    // images: [
+    //   {
+    //     url:"",
+    //     width: 800,
+    //     height: 1024,
+    //     alt: ""
+    //   }
+    // ],
+    site_name: "Skrop"
+  }
+  // twitter: {
+  //   handle: '@handle',
+  //   site: '@site',
+  //   cardType: 'summary_large_image',
+  // },
+};

sandbox/next.base.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  distDir: "dist",
+  useFileSystemPublicRoutes: true,
+  publicRuntimeConfig: {
+    API_URL: process.env.API_URL || "http://localhost:3000"
+  }
+};

sandbox/next.config.js

@@ -0,0 +1,62 @@
+const path = require("path");
+const withPlugins = require("next-compose-plugins");
+const cssPlugin = require("@zeit/next-css");
+const typescriptPlugin = require("@zeit/next-typescript");
+const bundleAnalyzerPlugin = require("@zeit/next-bundle-analyzer");
+const lessPlugin = require("@zeit/next-less");
+const optimizeImagesPlugin = require("next-optimized-images");
+const nextConfig = require("./next.base.config");
+
+const webpackConfig = {
+  webpack: (config, options) => {
+    config.resolve.alias = {
+      "../../theme.config$": path.join(__dirname, "skrop_theme/theme.config"),
+      "ui-components": path.join(__dirname, "ui-components"),
+      static: path.join(__dirname, "static")
+    };
+
+    config.module.rules.push({
+      test: /\.(eot|otf|ttf|woff|woff2)$/,
+      use: {
+        loader: "url-loader",
+        options: {
+          limit: 8192,
+          publicPath: "./",
+          outputPath: "static/css/",
+          name: "[name].[ext]"
+        }
+      }
+    });
+
+    return config;
+  }
+};
+
+module.exports = withPlugins(
+  [
+    typescriptPlugin,
+    cssPlugin,
+    lessPlugin,
+    optimizeImagesPlugin,
+    [
+      bundleAnalyzerPlugin,
+      {
+        analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
+        analyzeBrowser: ["browser", "both"].includes(
+          process.env.BUNDLE_ANALYZE
+        ),
+        bundleAnalyzerConfig: {
+          server: {
+            analyzerMode: "static",
+            reportFilename: "../bundles/server.html"
+          },
+          browser: {
+            analyzerMode: "static",
+            reportFilename: "./bundles/client.html"
+          }
+        }
+      }
+    ]
+  ],
+  Object.assign({}, nextConfig, webpackConfig)
+);