Add proxy

cart/components/Cart.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import Button from "@panter/core/components/Button";
 
 class Cart extends Component {
   state = {
@@ -66,8 +65,6 @@ class Cart extends Component {
           </tbody>
         </table>
 
-        <Button>Go to checkout</Button>
-
         <style jsx>{`
           div {
             text-align: center;

next.config.js → cart/next.config.js

@@ -14,6 +14,7 @@ const externalNodeModulesRegExp = /node_modules(?!\/@panter(?!.*node_modules))/;
 module.exports = withBundleAnalyzer(
   withTypescript(
     {
+      assetPrefix: "http://localhost:4002",
       webpack: (config, { dev, isServer, defaultLoaders, dir }) => {
         config.resolve.symlinks = false;
         config.externals = config.externals.map(external => {

cart/package.json

@@ -12,10 +12,8 @@
   },
   "scripts": {
     "dev": "next",
-    "build-dev": "next build",
-    "start": "next start",
-    "analyze": "BUNDLE_ANALYZE=both yarn build",
-    "deploy": "now --forward-npm --regions bru"
+    "build": "next build",
+    "start": "next start -p 4002"
   },
   "devDependencies": {
     "@types/next": "^2.4.9",

cart/pages/index.tsx → cart/pages/cart.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import Layout from "@panter/core/components/Layout";
 import Title from "@panter/core/components/Title";
 import Cart from "../components/Cart";
+import Button from "@panter/core/components/Button";
 
 const index = () => {
   return (
     <Layout>
       <Title>Your Cart</Title>
       <Cart />
+      <Button href="/checkout">Go to checkout</Button>
     </Layout>
   );
 };

cart/pages/checkout.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Layout from "@panter/core/components/Layout";
+
+const Checkout = () => {
+  return <Layout>Checkout</Layout>;
+};
+
+export default Checkout;

catalog/components/Product.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import Link from "next/link";
-import slugify from "@panter/core/utils/slugify";
 
 const Product = ({ name, price, image, id }) => {
   return (
     <div>
-      <Link
-        href={`/product?name=${encodeURIComponent(name)}&id=${id}`}
-        as={`/product/${slugify(name)}`}
-      >
+      <Link href={`/product?name=${encodeURIComponent(name)}&id=${id}`}>
         <a>
           <div className="image-wrapper">
             <div className="overlay" />

catalog/components/Products.tsx

@@ -32,7 +32,7 @@ const products = [
 const Products = () => {
   return (
     <div>
-      {products.map(product => <Product {...product} />)}
+      {products.map(product => <Product key={product.id} {...product} />)}
       <style jsx>{`
         div {
           display: flex;

catalog/next.config.js

@@ -0,0 +1,80 @@
+// https://github.com/zeit/next.js/issues/706
+// https://github.com/zeit/next.js/pull/3732/files
+
+const webpack = require("webpack");
+// const withTypescript = require("./withTypescript");
+const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");
+const withTypescript = require("@zeit/next-typescript");
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+
+// Update these to match your package scope name.
+const internalNodeModulesRegExp = /@panter(?!.*node_modules)/;
+const externalNodeModulesRegExp = /node_modules(?!\/@panter(?!.*node_modules))/;
+
+module.exports = withBundleAnalyzer(
+  withTypescript(
+    {
+      assetPrefix: "http://localhost:4001",
+      webpack: (config, { dev, isServer, defaultLoaders, dir }) => {
+        config.resolve.symlinks = false;
+        config.externals = config.externals.map(external => {
+          if (typeof external !== "function") return external;
+          return (ctx, req, cb) =>
+            internalNodeModulesRegExp.test(req) ? cb() : external(ctx, req, cb);
+        });
+        config.module.rules.push({
+          test: /\.+(js|jsx)$/,
+          loader: defaultLoaders.babel,
+          include: [internalNodeModulesRegExp]
+        });
+
+        config.module.rules = config.module.rules.map(
+          r =>
+            String(r.test) === String(/\.(ts|tsx)$/)
+              ? {
+                  test: /\.(ts|tsx)$/,
+                  include: [dir, internalNodeModulesRegExp],
+                  exclude: externalNodeModulesRegExp,
+                  use: [
+                    defaultLoaders.babel,
+                    {
+                      loader: "ts-loader",
+                      options: Object.assign(
+                        {},
+                        {
+                          transpileOnly: true
+                        },
+                        config.typescriptLoaderOptions
+                      )
+                    }
+                  ]
+                }
+              : r
+        );
+
+        return config;
+      },
+      webpackDevMiddleware: config => {
+        const ignored = [
+          config.watchOptions.ignored[0],
+          externalNodeModulesRegExp
+        ];
+        config.watchOptions.ignored = ignored;
+        return config;
+      },
+      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"
+        }
+      }
+    },
+    { internalNodeModulesRegExp, externalNodeModulesRegExp }
+  )
+);

catalog/package.json

@@ -12,10 +12,8 @@
   },
   "scripts": {
     "dev": "next",
-    "build-dev": "next build",
-    "start": "next start",
-    "analyze": "BUNDLE_ANALYZE=both yarn build",
-    "deploy": "now --forward-npm --regions bru"
+    "build": "next build",
+    "start": "next start -p 4001"
   },
   "devDependencies": {
     "@types/next": "^2.4.9",

catalog/pages/product.tsx

@@ -1,13 +1,18 @@
 import React from "react";
 import Layout from "@panter/core/components/Layout";
 import Title from "@panter/core/components/Title";
+import Button from "@panter/core/components/Button";
 
 const product = ({ url }) => {
   const { name, id } = url.query;
   return (
     <Layout>
       <Title>{name}</Title>
       <img src={`/static/images/product-${id}.jpeg`} />
+      <br />
+      <br />
+      <br />
+      <Button href="/cart">Add to cart</Button>
     </Layout>
   );
 };

core/components/Button.tsx

@@ -1,9 +1,13 @@
 import React from "react";
+import Link from "next/link";
 
-const Button = ({ children }) => {
+const Button = ({ children, href }) => {
   return (
     <span>
-      {children}
+      <Link href={href}>
+        <a>{children}</a>
+      </Link>
+
       <style jsx>{`
         span {
           padding: 12px;
@@ -12,6 +16,10 @@ const Button = ({ children }) => {
           text-transform: uppercase;
           cursor: pointer;
         }
+        a {
+          color: white;
+          text-decoration: none;
+        }
       `}</style>
     </span>
   );

core/components/Header.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Logo from "./Logo";
 import Link from "next/link";
-import slugify from "../utils/slugify";
 
 const links = [
   "Sale",
@@ -20,10 +19,7 @@ const Header = () => (
     <ul>
       {links.map((link, index) => (
         <li key={index}>
-          <Link
-            href={`/category?name=${encodeURIComponent(link)}`}
-            as={`/category/${slugify(link)}`}
-          >
+          <Link href={`/category?name=${encodeURIComponent(link)}`}>
             <a>{link}</a>
           </Link>
         </li>

core/components/Layout.tsx

@@ -15,6 +15,7 @@ const Layout = ({ children }) => {
 
       <style jsx>{`
         .layout {
+          text-align: center;
           padding: 48px;
         }
       `}</style>

package.json

@@ -4,5 +4,16 @@
   "main": "index.js",
   "license": "MIT",
   "private": true,
-  "workspaces": ["*"]
+  "workspaces": [
+    "*"
+  ],
+  "scripts": {
+    "proxy": "micro-proxy -r proxy.json",
+    "build": "cd ./cart && next build && cd ../catalog && next build",
+    "start": "concurrently 'cd ./cart && yarn start' 'cd ./catalog && yarn start' 'yarn proxy'"
+  },
+  "devDependencies": {
+    "concurrently": "^3.5.1",
+    "micro-proxy": "^1.1.0"
+  }
 }

proxy.json

@@ -0,0 +1,7 @@
+{
+  "rules": [
+    { "pathname": "/cart", "dest": "http://localhost:4002" },
+    { "pathname": "/checkout", "dest": "http://localhost:4002" },
+    { "pathname": "/**", "dest": "http://localhost:4001" }
+  ]
+}