Merge pull request #2 from damien-duignan/deploy

Update Styles
humanitec-tutorials · Jun 9, 2020 · 8525819 · 8525819
2 parents af7fccc + de04465
commit 8525819
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 23 deletions.
diff --git a/.github/workflows/walhall-ci.yml b/.github/workflows/walhall-ci.yml
@@ -0,0 +1,19 @@
+name: Walhall CI
+
+on:
+  push:
+    branches: 
+      - deploy
+
+jobs:
+  push-to-humanitec-dev:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Build and Push to Humanitec Dev
+      uses: humanitec/build-push-to-humanitec@v1
+      with:
+        humanitec-token: ${{ secrets.HUMANITEC_TOKEN_DEV }}
+        organization: damien85
+        humanitec-registry: dev-registry.humanitec.io
+        humanitec-api:  dev-api.humanitec.io
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ You can configure the product frontend with the following environment variables:
 
 | Variable | Description |
 |---|---|
-| `PRODUCT_BE_SERVER_URL` | The URL for accessing the `product-be` service. |
+| `PUBLIC_SERVER_URL` | The URL for accessing the `product-be` service. |
 | `PORT` | The port number where the server should be exposed. Default is `8080`. |
 
 
@@ -25,7 +25,7 @@ You can run the `product-fe` package in development mode by executing the follow
 ```bash
 # Start the server
 $ cd server
-$ PRODUCT_BE_SERVER_URL="http://localhost:8080" PORT=3001 node bin/www
+$ PUBLIC_SERVER_URL="http://localhost:8080" PORT=3001 node bin/www
 ```
 
 ```bash

diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Product Inventory</title>
+    <title>Task list</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.js b/client/src/App.js
@@ -31,6 +31,7 @@ class App extends React.Component {
     }).catch(err => {
       this.setState({
         errorMessage: err.message,
+        productsLoading: false
       });
     });
 
@@ -49,7 +50,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="products-app">
-        <h1>Product Inventory</h1>
+        <h1>Humanitec Sample App</h1>
+        <h2>Task list</h2>
         <ProductCreator onCreate={this.handleProductCreated} />
         <Products products={this.state.products} loading={this.state.productsLoading} />
         <ErrorMessage message={this.state.errorMessage} />

diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js
@@ -1,9 +1,20 @@
+/* eslint-disable no-template-curly-in-string */
 import React from 'react';
 
 export function ErrorMessage(props) {
   return (
     <div className={props.message ? "error-message" : "hidden-error-message"}>
-      {props.message}
+      This <span className="bold">sample-app</span> is intended to be used with <span className="bold">sample-service</span>. To add tasks to your task list:
+      <ul>
+        <li>Add a sample-service module to your app on Humanitec.</li>
+
+        <li>In your sample-service configuration, add a <span className="bold">database</span>.</li>
+
+        <li>In <span className="bold">Variables</span>, define an environment variable for your database connection with a key <span className="highlight">CONNECTION_STRING</span> and value: <span className="highlight">{'postgresql://${externals.postgres.username}:${externals.postgres.password}@${externals.postgres.host}:${externals.postgres.port}/${externals.postgres.name}'}</span></li>
+
+        <li>Deploy your changes and reload this page</li>
+      </ul>
+
     </div>
   );
 }
diff --git a/client/src/components/Products.js b/client/src/components/Products.js
@@ -61,9 +61,9 @@ export class ProductCreator extends React.Component {
   render() {
     return (
       <div className="new-product">
-        <input className="title" type="text" placeholder="Product name" value={this.state.title} onChange={this.handleTitleChange} />
-        <textarea className="content" placeholder="Enter your product description here..." value={this.state.content} onChange={this.handleContentChange}></textarea>
-        <button onClick={this.handleSubmit}>Post Product</button>
+        <input className="title" type="text" placeholder="Task name" value={this.state.title} onChange={this.handleTitleChange} />
+        <textarea className="content" placeholder="Enter your task here..." value={this.state.content} onChange={this.handleContentChange}></textarea>
+        <button onClick={this.handleSubmit}>Post Task</button>
       </div>
     );
   }

diff --git a/client/src/index.css b/client/src/index.css
@@ -11,37 +11,49 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-.products-app>h1 {
-  margin: 16px;
+
+.products-app {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.products-app > h1 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-weight: 500;
   letter-spacing: .0125em;
   text-decoration: inherit;
   text-transform: inherit;
+  margin-bottom: 16px;
   margin-top: 0;
 }
+.products-app > h2 {
+  font-size: 1.75rem;
+  line-height: 2rem;
+  font-weight: 500;
+  letter-spacing: .0125em;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
 .new-product {
   padding: 16px;
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
   box-sizing: border-box;
   margin-top: 16px;
-  margin-left: 16px;
-  margin-right: 16px;
   margin-bottom: 32px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
+  max-width: 700px;
 }
 .new-product .title {
   font-size: 1.25rem;
   line-height: 2rem;
   font-weight: 500;
   letter-spacing: .0125em;
-  width: 40rem;
+  width: 100%;
   border: none;
   border-bottom: 1px solid #555;
   margin-bottom: 8px;
@@ -63,10 +75,6 @@ code {
   align-self: flex-end;
 }
 
-.products {
-  padding: 16px;
-}
-
 .products .product {
   padding: 16px;
   border-radius: 4px;
@@ -95,12 +103,20 @@ code {
 }
 .error-message {
   font-size: 1.2rem;
-  color: red;
-  font-weight: bold;
   font-family: monospace;
   padding: 16px;
   background-color: white;
+  line-height: 1.3;
 }
 .hidden-error-message {
   display: none;
 }
+.highlight {
+  background-color: rgba(9, 30, 66, 0.08);;
+  padding: 0 3px;
+  word-wrap: break-word;
+}
+
+.bold {
+  font-weight: bold;
+}
diff --git a/server/app.js b/server/app.js
@@ -5,8 +5,7 @@ const path = require("path");
 const logger = require("morgan");
 
 // Environmental variable for configuring backend
-const PRODUCT_BE_SERVER_URL=process.env.PRODUCT_BE_SERVER_URL || "PRODUCT_BE_SERVER_URL";
-
+const PUBLIC_SERVER_URL=process.env.PUBLIC_SERVER_URL || "http://sample-service:8080";
 
 const app = express();
 
@@ -16,7 +15,7 @@ app.use(express.json());
 
 app.use(express.static(path.join(__dirname, "public")));
 
-app.use("/api", proxy(PRODUCT_BE_SERVER_URL));
+app.use("/api", proxy(PUBLIC_SERVER_URL));
 
 app.use("/", express.static("public"));
 
@@ -30,7 +29,7 @@ app.use(function(err, req, res, next) {
   if (req.path.startsWith("/api/")) {
     // error from Proxy
     const proxiedPath = req.path.substring("/api/".length);
-    console.error(`Unable to complete request: "${PRODUCT_BE_SERVER_URL}/${proxiedPath}"`);
+    console.error(`Unable to complete request: "${PUBLIC_SERVER_URL}/${proxiedPath}"`);
     if (err.code === "ENOTFOUND") {
       console.error(`Unable to find host "${err.host}"`);
     } else if (err.code === "ECONNREFUSED") {