Markdown Preview sample

run/markdown-preview/README.md

@@ -0,0 +1,21 @@
+# Cloud Run Markdown Preview Sample
+
+[Securing Cloud Run services tutorial](https://cloud.google.com/run/docs/tutorials/secure-services) walks through how to create a secure two-service application running on Cloud Run. This application is a Markdown editor which includes a public "frontend" service which anyone can use to compose Markdown text and a private "backend" service which renders Markdown text to HTML.
+
+For more details on how to work with this sample read the [Google Cloud Run Node.js Samples README](https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/run).
+
+## Environment Variables
+
+Cloud Run services can be [configured with Environment Variables](https://cloud.google.com/run/docs/configuring/environment-variables).
+Required variables for this sample include:
+
+* `EDITOR_UPSTREAM_RENDER_URL`: The URL of the restricted Cloud Run service that
+  renders Markdown to HTML.
+
+## Dependencies
+
+* **express**: Web server framework.
+* **google-auth-library**: OAuth2.0 library for authentication and authorization.
+* **got**: Node.js library for HTTP requests.
+* **handlebars** JavaScript template engine.
+* **markdown-it**: JavaScript library for parsing and rendering Markdown text.

run/markdown-preview/editor/Dockerfile

@@ -0,0 +1,34 @@
+# Copyright 2020 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    https://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Use the official lightweight Node.js 10 image.
+# https://hub.docker.com/_/node
+FROM node:12-slim
+
+# Create and change to the app directory.
+WORKDIR /usr/src/app
+
+# Copy application dependency manifests to the container image.
+# A wildcard is used to ensure both package.json AND package-lock.json are copied.
+# Copying this separately prevents re-running npm install on every code change.
+COPY package*.json ./
+
+# Install production dependencies.
+RUN npm install --only=production
+
+# Copy local code to the container image.
+COPY . ./
+
+# Run the web service on container startup.
+CMD [ "npm", "start" ]

run/markdown-preview/editor/main.js

@@ -0,0 +1,70 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const express = require('express');
+const handlebars = require('handlebars');
+const { readFile } = require('fs').promises;
+const renderRequest = require('./render.js');
+
+const app = express();
+app.use(express.json());
+
+let markdownDefault, compiledTemplate, renderedHtml;
+
+// Load the template files and serve them with the Editor service.
+const buildRenderedHtml = async () => {
+  try {
+    markdownDefault = await readFile(__dirname + '/templates/markdown.md');
+    compiledTemplate = handlebars.compile(await readFile(__dirname + '/templates/index.html', 'utf8'));
+    renderedHtml = compiledTemplate({default: markdownDefault});
+    return renderedHtml;
+  } catch(err) {
+    throw Error ('Error loading template: ', err);
+  }
+};
+
+app.get('/', async (req, res) => { 
+  try {
+    if (!renderedHtml) renderedHtml = await buildRenderedHtml();
+    res.status(200).send(renderedHtml);
+  } catch (err) {
+    console.log('Error loading the Editor service: ', err);
+    res.status(500).send(err);
+  }
+});
+
+// The renderRequest makes a request to the Renderer service. 
+// The request returns the Markdown text converted to HTML.
+app.post('/render', async (req, res) => {
+  try {
+    const markdown = req.body.data;
+    const response = await renderRequest(markdown);
+    res.status(200).send(response);
+  } catch (err) {
+    console.log('Error querying the Renderer service: ', err);
+    res.status(500).send(err);
+  }
+});
+
+const PORT = process.env.PORT || 8080;
+
+app.listen(PORT, err => {
+  console.log(`Editor service is listening on port ${PORT}`);
+});
+
+// Exports for testing purposes.
+module.exports = {
+  app,
+  buildRenderedHtml
+};

run/markdown-preview/editor/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "markdown-preview",
+  "description": "Cloud Run service to demonstrate service-to-service authentication, paired with Renderer service.",
+  "version": "0.0.1",
+  "private": true,
+  "license": "Apache-2.0",
+  "author": "Google LLC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git"
+  },
+  "engines": {
+    "node": ">= 12.0.0"
+  },
+  "main": "main.js",
+  "scripts": {
+    "e2e-test": "test/runner.sh mocha test/system.test.js --timeout=30000",
+    "start": "node main.js",
+    "test": "mocha test/main.test.js test/render.test.js --exit"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "google-auth-library": "^6.0.0",
+    "got": "^10.7.0",
+    "handlebars": "^4.7.6"
+  },
+  "devDependencies": {
+    "mocha": "^7.1.1",
+    "supertest": "^4.0.2"
+  }
+}

run/markdown-preview/editor/render.js

@@ -0,0 +1,59 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const {GoogleAuth} = require('google-auth-library');
+const got = require('got');
+const auth = new GoogleAuth();
+
+let client, serviceUrl;
+
+// renderRequest creates a new HTTP request with IAM ID Token credential.
+// This token is automatically handled by private Cloud Run (fully managed) and Cloud Functions.
+const renderRequest = async (markdown) => { 
+  // [START run_secure_request]
+  if (!process.env.EDITOR_UPSTREAM_RENDER_URL) throw Error('EDITOR_UPSTREAM_RENDER_URL needs to be set.');
+  serviceUrl = process.env.EDITOR_UPSTREAM_RENDER_URL;
+
+  // Build the request to the Renderer receiving service.
+  const serviceRequestOptions = { 
+    method: 'POST',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    body: markdown,
+    timeout: 3000
+  };
+
+  try {
+    // Create a Google Auth client with the Renderer service url as the target audience.
+    if (!client) client = await auth.getIdTokenClient(serviceUrl);
+    // Fetch the client request headers and add them to the service request headers.
+    // The client request headers include an ID token that authenticates the request.
+    const clientHeaders = await client.getRequestHeaders();
+    serviceRequestOptions.headers['Authorization'] = clientHeaders['Authorization'];
+  } catch(err) {
+    throw Error('GoogleAuth server could not respond to request: ', err);
+  };
+
+  try {
+    // serviceResponse converts the Markdown plaintext to HTML.
+    const serviceResponse = await got(serviceUrl, serviceRequestOptions);
+    return serviceResponse.body;
+  } catch (err) { 
+    throw Error('Renderer service could not respond to request: ', err);
+  };
+  // [END run_secure_request]
+};
+
+module.exports = renderRequest;

run/markdown-preview/editor/templates/index.html

@@ -0,0 +1,110 @@
+<!--
+Copyright 2020 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Markdown Editor</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>
+<body class="mdc-typography">
+
+    <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
+        <div class="mdc-top-app-bar__row">
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+            <span class="mdc-top-app-bar__title">Markdown Editor</span>
+          </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <a href="#code" title="View the code"><i class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-hidden="true">code</i></a>
+            <a href="#tutorial" title="Read the tutorial"><i class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-hidden="true">assignment</i></a>
+          </section>
+        </div>
+    </header>
+
+    <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-top-app-bar--fixed-adjust" aria-label="Markdown Rendering Progress Bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
+        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+          <span class="mdc-linear-progress__bar-inner"></span>
+        </div>
+    </div>
+
+    <main class="mdc-layout-grid">
+        <div class="mdc-layout-grid__inner">
+            <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
+            <h2>Markdown Text</h2>
+            <section class="mdc-card mdc-card--outlined">
+                <div class="text-field-container">
+                <div class="mdc-text-field mdc-text-field--fullwidth md-text-field--no-label mdc-text-field--textarea mdc-ripple-upgraded">
+                    <textarea id="editor" class="mdc-text-field__input" style="height: 36rem;">{{ default }}</textarea>
+                    </div></div>
+
+                    <div class="mdc-card__actions mdc-card__actions--full-bleed">
+                        <button class="editor-button mdc-button mdc-card__action mdc-card__action--button mdc-ripple-surface">
+                            <span class="mdc-button__label">Preview Rendered Markdown</span>
+                            <i class="material-icons" aria-hidden="true">arrow_forward</i>
+                        </button>
+                    </div>
+                </section></div>
+
+                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
+                <h2>Rendered HTML</h2>
+                <section class="mdc-card mdc-card--outlined">
+                    <div id="preview" style="height: 40rem; padding-left: 10px; padding-right: 10px">Tap "<strong>Preview Rendered Markdown</strong>" below the text entry to see rendered content.</div>
+                </section></div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        const preview = document.getElementById('preview');
+        const lp = new mdc.linearProgress.MDCLinearProgress(document.querySelector('.mdc-linear-progress'));
+        async function render(data = {}) {
+            const response = await fetch('/render', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+
+            const text = await response.text();
+            if (!response.ok) {
+                console.log('error: Render Text: Received status code: ' + response.status);
+            }
+
+            return text;
+        }
+
+        function listener() {
+            lp.open();
+            render({data: document.getElementById('editor').value})
+                .then((result) => preview.innerHTML = result)
+                .catch((err) => {
+                    console.log('Render Text: ' + err.message);
+                    preview.innerHTML = '<h3><i aria-hidden="true" class="material-icons">error</i>Render Error</h3>\n<p>' + err.message + '</p>';
+                })
+                .finally(() => lp.close())
+        }
+
+        document.querySelector('.editor-button').addEventListener('click', listener);
+        window.addEventListener('load', listener);
+    </script>
+</body>
+</html>
+

run/markdown-preview/editor/templates/markdown.md

@@ -0,0 +1,19 @@
+# Playing with Markdown
+
+This UI allows a user to write Markdown text and preview the rendered HTML.
+
+You may be familiar with this workflow from sites such as Github or Wikipedia.
+
+In practice, this web page does the following:
+
+* On click of the *"Preview Rendered Markdown"* button, browser JavaScript
+  lifts the markdown text and sends it to the editor UI's public backend.
+* The editor backend sends the text to a private Renderer service which
+  converts it to HTML.
+* The HTML is injected into the web page in the right-side **Rendered HTML** area.
+
+## Markdown Background
+
+Markdown is a text-to-HTML conversion tool that allows you to convert plain text to valid HTML.
+
+Read more about the [syntax on Wikipedia](https://en.wikipedia.org/wiki/Markdown).

run/markdown-preview/editor/test/deploy.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+
+# Copyright 2020 Google LLC.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -eo pipefail;
+
+requireEnv() {
+  test "${!1}" || (echo "Environment Variable '$1' not found" && exit 1)
+}
+
+requireEnv SERVICE_NAME
+requireEnv CONTAINER_IMAGE
+
+# Deploy the service
+set -x
+gcloud run deploy "${SERVICE_NAME}" \
+  --image="${CONTAINER_IMAGE}" \
+  --region="${REGION:-us-central1}" \
+  ${FLAGS} \
+  --platform=managed \
+  --quiet 
+set +x
+
+echo 'Cloud Run Links:'
+echo "- Logs: https://console.cloud.google.com/logs/viewer?project=${GOOGLE_CLOUD_PROJECT}&resource=cloud_run_revision%2Fservice_name%2F${SERVICE_NAME}"
+echo "- Console: https://console.cloud.google.com/run/detail/${REGION:-us-central1}/${SERVICE_NAME}/metrics?project=${GOOGLE_CLOUD_PROJECT}"