diff --git a/.github/workflows/walhall-ci.yml b/.github/workflows/walhall-ci.yml new file mode 100644 index 0000000..184757a --- /dev/null +++ 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 \ No newline at end of file diff --git a/README.md b/README.md index be6ba4c..f2d9892 100644 --- 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 index a11777c..7e38c3f 100644 Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ diff --git a/client/public/index.html b/client/public/index.html index 56df0fb..d13e7cb 100644 --- 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`. --> - Product Inventory + Task list diff --git a/client/src/App.js b/client/src/App.js index d7fbcbf..c021e26 100644 --- 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 (
-

Product Inventory

+

Humanitec Sample App

+

Task list

diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js index 5296378..915fe0d 100644 --- 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 (
- {props.message} + This sample-app is intended to be used with sample-service. To add tasks to your task list: +
    +
  • Add a sample-service module to your app on Humanitec.
    • + +
  • In your sample-service configuration, add a database.
    • + +
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'postgresql://${externals.postgres.username}:${externals.postgres.password}@${externals.postgres.host}:${externals.postgres.port}/${externals.postgres.name}'}
    • + +
  • Deploy your changes and reload this page
    • +
+
); } diff --git a/client/src/components/Products.js b/client/src/components/Products.js index 14325aa..f3dd377 100644 --- a/client/src/components/Products.js +++ b/client/src/components/Products.js @@ -61,9 +61,9 @@ export class ProductCreator extends React.Component { render() { return (
- - - + + +
); } diff --git a/client/src/index.css b/client/src/index.css index edb9917..0eff040 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -11,16 +11,29 @@ 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; @@ -28,20 +41,19 @@ code { 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; +} \ No newline at end of file diff --git a/server/app.js b/server/app.js index 581260a..4659d0a 100644 --- 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") {