Merge pull request #2 from welteki/instructions

Author: alexellis

README.md

@@ -1,2 +1,118 @@
-OpenFaaS Customer Code Sample
+# OpenFaaS Function Editor Example
 
+This repo contains a sample application that shows how OpenFaaS can be used to build a basic function editor that let's users edit, deploy and invoke custom code from the browser.
+
+The sample app consists of two parts. A frontend implemented as a single page [React](https://react.dev/) application and [Express](https://expressjs.com/) server for the backend API. Users can edit a Node.js function in the UI using a code editor. Clicking the `Publish and Deploy` button deploys the function to OpenFaaS. Once deployed the `Test Function` page can be used to invoke the function, inspect responses and view the function logs.
+
+It sample app is a basic implementation of the use case described in the our blog post: [Integrate FaaS Capabilities into Your Platform with OpenFaaS](https://www.openfaas.com/blog/add-a-faas-capability/)
+
+![Screenshot of the function editor UI](/images/function-editor.png)
+
+## How it works
+
+The application uses readily available OpenFaaS APIs to take user-supplied source-code, produce an OpenFaaS function image and deploy it to OpenFaaS to get a custom HTTP endpoint.
+
+OpenFaaS components used by the sample application:
+
+- [Function Builder API](https://docs.openfaas.com/openfaas-pro/builder/)
+
+    Allows code to be submitted, built, and deployed seamlessly.
+
+    This REST API accepts a Docker build context and publishes a container image to a remote registry.
+
+- [OpenFaaS REST API](https://docs.openfaas.com/reference/rest-api/)
+
+    API for managing and invoking functions, secrets and namespaces.
+
+    The OpenFaaS REST API has endpoints to create and manage tenant namespaces, to deploy new functions, list and query existing ones, invoke them and query function logs.
+
+**Overview**
+
+1. User supplied source-code from the editor is send to the backends `/api/publish` endpoint.
+2. The publish endpoint prepares the build context using a function template and invokes the [OpenFaaS Function Builder REST API](https://docs.openfaas.com/openfaas-pro/builder/).
+3. The OpenFaaS function builder builds the container image for the function and published it to the configured registry.
+4. After the function has been published the `/api/publish` endpoint is called. The backend server calls the [OpenFaaS API](https://docs.openfaas.com/reference/rest-api/) to deploy the function.
+5. The function is ready to be invoked over HTTP.
+
+A couple of additional OpenFaaS API endpoints are exposed through the backed server that allow users to invoke the function and inspect logs in the UI:
+
+- `/api/invoke` - Proxies the functions HTTP endpoint.
+- `/api/logs` - Uses the [OpenFaaS APIs logs endpoint](https://docs.openfaas.com/reference/rest-api/#logs) to get the logs for the function. 
+
+> Note: Authentication for the backend API as this is out of scope for this examples. Keep in mind the for a production ready app some form of authentication should be added to protect the API endpoint.
+
+## Quick start
+
+Run the sample application locally.
+
+### Prerequisites
+
+
+A Kubernetes cluster with OpenFaaS and the [OpenFaaS Function Builder API](https://docs.openfaas.com/openfaas-pro/builder/).
+
+> The Function Builder API provides a simple REST API to create your functions from source code. See [Function Builder API docs](https://docs.openfaas.com/openfaas-pro/builder/) for installation instructions.
+
+You will need a recent version of [Node.js](https://nodejs.org/en) to run the sample app locally.
+
+### Run the app
+
+Install node_modules:
+
+```sh
+cd client
+npm install
+```
+
+**Run the API server**
+
+Configuration parameters:
+
+- `IMAGE_PREFIX` - Image prefix used for pushing the images, e.g. `docker.io/openfaas`. Make sur your function builder [has the correct permissions](https://github.com/openfaas/faas-netes/tree/master/chart/pro-builder#registry-authentication) to push to this registry.
+- `BUILDER_URL` - URl of the function builder API (default: http://127.0.0.1:8081)
+- `BUILDER_PAYLOAD_SECRET` - Path the file containing the HMAC signing secret created during the installation of the function builder. (default: "./builder/payload.txt")
+- `GATEWAY_URL` - URL of the OpenFaaS Gateway (default: http://127.0.0.1:8080)
+- `BASIC_AUTH_SECRET` - Basic auth secret to authenticate with the OpenFaaS Gateway (default: "./secrets/basic-auth-password.txt")
+
+- [Function Builder examples](https://github.com/openfaas/function-builder-examples)
+
+Make sure the pro-builder is port-forwarded to port 8081 on the local host.
+
+```sh
+kubectl port-forward \
+    -n openfaas \
+    svc/pro-builder 8081:8080
+```
+
+Save the HMAC signing secret created during the installation to a file `./client/.secrets/payload.txt`.
+
+```sh
+kubectl get secret \
+    -n openfaas payload-secret -o jsonpath='{.data.payload-secret}' \
+    | base64 --decode \
+    > .secrets/payload.txt
+```
+
+Port forward the OpenFaaS Gateway:
+
+```sh
+kubectl port-forward \
+    -n openfaas \
+    svc/gateway 8080:8080
+```
+
+Start the server:
+
+```sh
+IMAGE_PREFIX="docker.io/your-repo" \
+npm run server
+```
+
+**Run the frontend**
+
+Start the frontend server:
+
+```sh
+npm run dev
+```
+
+Access the UI at: `http://127.0.0.1:5173/`

client/.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 /basic-auth-password.txt
 /payload.txt
 
+/.secrets

client/server.js

@@ -13,6 +13,12 @@ import path from 'path';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
+const imagePrefix = process.env.IMAGE_PREFIX || "ttl.sh/openfaas"
+const builderPayloadSecret = process.env.BUILDER_PAYLOAD_SECRET || "./secrets/payload.txt"
+const builderURL = process.env.BUILDER_URL || 'http://127.0.0.1:8081'
+const basicAuthSecret = process.env.BASIC_AUTH_SECRET || "./secrets/basic-auth-password.txt"
+const gatewayURL = process.env.GATEWAY_URL || 'http://127.0.0.1:8080'
+
 // Define templates directory
 const TEMPLATES_DIR = path.join(__dirname, 'templates');
 
@@ -127,7 +133,6 @@ function generateRandomString(length) {
   }
   return result;
 }
-
 // Build function using OpenFaaS CLI
 async function buildFunction(functionName, handler, lang, packageJson = null) {
   const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'builder-'));
@@ -137,7 +142,7 @@ async function buildFunction(functionName, handler, lang, packageJson = null) {
     const tag = generateRandomString(8);
 
     // Create the full image name
-    const image = `registry.digitalocean.com/openfaas-sandbox/${functionName}:${tag}`;
+    const image = `${imagePrefix}/${functionName}:${tag}`;
 
     // Create stack.yaml first
     const stackYaml = `version: 1.0
@@ -206,7 +211,8 @@ functions:
     }
 
     // Create build config
-    let buildConfig = { image, buildArgs: {}, push: true };
+    let buildConfig = { image, buildArgs: {}, push: false };
+    console.log(buildConfig)
     await fs.writeFile(
       path.join(tempDir, 'com.openfaas.docker.config'),
       JSON.stringify(buildConfig),
@@ -273,7 +279,7 @@ functions:
     );
 
     // Read secret and calculate hash
-    let secret = await fs.readFile(path.join(__dirname, 'payload.txt'), 'utf8');
+    let secret = await fs.readFile(builderPayloadSecret, 'utf8');
     let data = await fs.readFile(tarFile);
     let hash = crypto
       .createHmac('sha256', secret.trim())
@@ -285,7 +291,7 @@ functions:
       let res = await axios({
         data: data,
         method: 'post',
-        url: 'https://builder.sandbox.openfaas.com/build',
+        url: `${builderURL}/build`,
         headers: {
           'Content-Type': 'application/octet-stream',
           'X-Build-Signature': 'sha256=' + hash,
@@ -375,7 +381,7 @@ app.post('/api/deploy', async (req, res) => {
       // Read the password from the basic-auth-password.txt file
       let password = '';
       try {
-        password = await fs.readFile(path.join(__dirname, 'basic-auth-password.txt'), 'utf8');
+        password = await fs.readFile(basicAuthSecret, 'utf8');
         password = password.trim(); // Remove any whitespace
       } catch (err) {
         console.warn('Could not read basic-auth-password.txt, using empty password');
@@ -407,7 +413,7 @@ app.post('/api/deploy', async (req, res) => {
       try {
         const checkResponse = await axios({
           method: 'GET',
-          url: `https://gateway.sandbox.openfaas.com/system/function/${functionName}`,
+          url: `${gatewayURL}/system/function/${functionName}`,
           headers: headers
         });
 
@@ -427,7 +433,7 @@ app.post('/api/deploy', async (req, res) => {
       // Deploy the function using PUT or POST based on whether it exists
       const deployResponse = await axios({
         method: functionExists ? 'PUT' : 'POST',
-        url: 'https://gateway.sandbox.openfaas.com/system/functions',
+        url: `${gatewayURL}/system/functions`,
         headers: headers,
         data: functionData
       });
@@ -480,7 +486,7 @@ app.post('/api/invoke', async (req, res) => {
     // Read the password from the basic-auth-password.txt file
     let password = '';
     try {
-      password = await fs.readFile(path.join(__dirname, 'basic-auth-password.txt'), 'utf8');
+      password = await fs.readFile(basicAuthSecret, 'utf8');
       password = password.trim(); // Remove any whitespace
     } catch (err) {
       console.warn('Could not read basic-auth-password.txt, using empty password');
@@ -497,7 +503,7 @@ app.post('/api/invoke', async (req, res) => {
     try {
       const invokeResponse = await axios({
         method: 'POST',
-        url: `https://gateway.sandbox.openfaas.com/function/${functionName}`,
+        url: `${gatewayURL}/function/${functionName}`,
         headers: headers,
         data: payload || {},
         validateStatus: false, // This ensures we get headers even for error responses
@@ -546,7 +552,7 @@ app.post('/api/logs', async (req, res) => {
     // Read the password from the basic-auth-password.txt file
     let password = '';
     try {
-      password = await fs.readFile(path.join(__dirname, 'basic-auth-password.txt'), 'utf8');
+      password = await fs.readFile(basicAuthSecret, 'utf8');
       password = password.trim(); // Remove any whitespace
     } catch (err) {
       console.warn('Could not read basic-auth-password.txt, using empty password');
@@ -564,7 +570,7 @@ app.post('/api/logs', async (req, res) => {
 
     // Fetch logs from OpenFaaS
     const logsResponse = await fetch(
-      `https://gateway.sandbox.openfaas.com/system/logs?${params.toString()}`,
+      `${gatewayURL}/system/logs?${params.toString()}`,
       {
         method: 'GET',
         headers: {

client/src/App.css

@@ -13,17 +13,26 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
 .title {
   font-size: 2.5rem;
-  color: ##00fff1;
-  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+  margin: 0;
   font-weight: 600;
 }
 
 .branding {
   font-size: 1rem;
-  color: #888;
-  margin-bottom: 2rem;
+  color: var(--text-secondary);
   font-style: italic;
 }
 
@@ -36,24 +45,25 @@
 
 .nav-button {
   padding: 0.75rem 1.5rem;
-  background-color: #f0f0f0;
-  color: #333;
-  border: 1px solid #ddd;
+  background-color: var(--button-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   cursor: pointer;
   font-size: 1rem;
+  transition: all 0.2s ease;
 }
 
 .nav-button:hover {
-  background-color: #e0e0e0;
+  background-color: var(--button-hover-bg);
 }
 
 .nav-button.active {
-  background-color: #007bff;
+  background-color: var(--primary-color);
   color: white;
-  border-color: #0056b3;
+  border-color: var(--primary-color);
 }
 
 .nav-button.active:hover {
-  background-color: #0056b3;
+  background-color: var(--primary-hover);
 }

client/src/App.jsx

@@ -11,8 +11,10 @@ function App() {
 
   return (
     <div className="app">
-      <h1 className="title">Function Editor</h1>
-      <div className="branding">Powered by OpenFaaS</div>
+      <div className="header">
+        <h1 className="title">Function Editor</h1>
+        <div className="branding">Powered by OpenFaaS</div>
+      </div>
 
       <div className="navigation">
         <button