<![CDATA[Untitled Publication]]>https://blog.lukefrauhiger.comhttps://cdn.hashnode.com/res/hashnode/image/upload/v1648830050332/I6SmEdDD5.pngUntitled Publicationhttps://blog.lukefrauhiger.comRSS for NodeMon, 18 May 2026 11:20:19 GMT60<![CDATA[The Form Builder for Developers]]>https://blog.lukefrauhiger.com/the-form-builder-for-developershttps://blog.lukefrauhiger.com/the-form-builder-for-developersFri, 01 Apr 2022 16:33:40 GMTTable of Contents
  1. The form building gap
  2. Fetch Forms intro
  3. The form building process
  4. Code examples

The problem with current developer form tools

There are lots of form builders and form tools available today. Whether you need to share a simple form with family members, build a complex registration form, or gather payment information, there is a form builder or tool for you. Or is there...I see a gap.

Form backend services help JAMstack websites collect form submissions without a server and connect data to 3rd party systems. But you still have to hand build the HTML form and its supporting functions like client-side validation. On top of that, if you want to use the form submissions locally in your code, as well as use a backend service, you can’t!

Code libraries like Formik and Angular Forms are incredibly helpful for managing form state and validation. You can use your own components and build a high-quality form much quicker than with standard HTML. Unfortunately, you still have to spend time hand-building every single form and its validation rules. You also have to spend time creating a backend to handle form submissions and integrate the data.

Forms are too repetitive and time-consuming for developers to constantly be hand-building them.

Fetch Forms

That’s why I built Fetch Forms. I wanted the benefits of a form backend service and to be able to build the forms in a form builder that would remove the repetitive aspects.

The Fetch form builder’s defaults and templates will help you build and collaborate on forms in record time.

The Fetch API will help you integrate high-quality forms with client-side validation into your application in a matter of minutes.

Updates are just as easy. Complete your changes and publish them with a single click. All applications using the updated Fetch form will begin to pull the new form.

Get started with Fetch Forms

Get the speed of a form builder with the control of code. Here’s how:

1. Build

Use the Fetch form builder to create and build your form. It’s packed with templates and defaults to make building forms painless.

  • Select validation rules and input masking
  • Choose whether to save submissions to Fetch Forms
  • Use form and field templates to build forms in record time Fetch form builder

2. Deploy

Deploy your form using any of our NPM modules, the embed script, or by simply using the native fetch API. The possibilities are endless!

  • Install and use the Javascript or React library
  • Use the embed script to drop a form into any web-based tool
  • Extend your own component library A fetch form in code

3. Submissions

You don’t have to send submissions to Fetch Forms — all data submitted is available to your local code no matter what.

If you configured the form to save submissions to the Fetch Forms library, they will be validated on the server and sent through spam filtering. Submissions will then activate any connections you have set up.

How about we look at some code?

Using Fetch Forms can be as simple or as complex as you need. The first two examples are using a styled component provided by Fetch Forms. You can also implement a Fetch form with your own component library - see example 3.

You watch me talk through building and deploying a form in the walkthrough here.

Simple Javascript & HTML example

See more at www.fetchforms.io/docs/fetch-forms-javascript

<!DOCTYPE html>
<html>
  <main style="max-width: 600px; margin: auto">
    <h1>Fetch Forms Javascript</h1>
    <hr />
    <h2 id="form_name" style="margin-bottom: 25px"></h2>
    <div id="fetch_form"></div>
    <pre id="result"></pre>
  </main>
  <script>
    import { renderForm } from "@fetchforms/core";

    // Called when data is submitted
    const onComplete = (data) => {
      document.getElementById("result").innerHTML = JSON.stringify(data, null, 2);
    };

    // Called when the Fetch form is loaded from the API
    const onLoad = (data) => {
      // Set the form name on the HTML 
      document.getElementById("form_name").innerHTML = data.name;
    };

    // Pass in the form slug, element Id to attach the form to, and optional utility functions
    renderForm(
      "__form_slug__",
      "fetch_form",
      onComplete,
      onLoad
    );

  </script>
</html>

Simple React example

See more at www.fetchforms.io/docs/fetch-forms-react

import React, { useState } from "react";
import { FetchForm } from "@fetchforms/react";

const ManagedForm = () => {
  const [formSubmission, setFormSubmission] = useState(null);
  const [formName, setFormName] = useState("");
  const onSubmit = async (values) => {
    /* To show an error on the form, uncomment the line below */
    // return 'There was an error submitting the form.';
    setFormSubmission(values);
  };

  const onLoad = async (values) => {
    setFormName(values.name);
  };

  return (
    <div className="">
      <div className="text-3xl mb-2">Component Form</div>
      <p className="text-gray-600">
        The easiest way to use Fetch Forms. Pass in a form slug and we'll handle
        client-side validation, input formatting, submissions, and styling.
      </p>
      <br />
      <div>
        <h2 className="text-2xl">{formName}</h2>
        <FetchForm slug={__form_slug__} onSubmit={onSubmit} onLoad={onLoad} />
        <br />
        {formSubmission && <pre>{JSON.stringify(formSubmission, null, 2)}</pre>}
      </div>
    </div>
  );
};

With custom components example

This example is using Ant Design as the component library.

See a full working example at www.fetchforms.io/docs/fetch-forms-react

import React, { useState } from "react";
import "antd/dist/antd.css";
import { useFetchForms } from "@fetchforms/react";
import { Form, Input, Button, Checkbox, Select, Radio, InputNumber, Alert } from "antd";

const CustomFetchForm = () => {
  const [fetchForm, loading, error, doCloudSubmit] = useFetchForms("__form_slug__");

  // Called when submission passes client-side validation
  const onFinish = async (values) => {
    if (fetchForm.cloudSave) {
      console.log("Saving to the Fetch Form's cloud");
      try {
        const isSaved = await doCloudSubmit(fetchForm.id, values);
        if (!isSaved) {
          throw new Error("There was an error submitting your form.");
        }
      } catch (err) {
        console.error(err);
      }
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  // This takes the validation rules from the Fetch form and formats them for 
  // the Ant Design form component.
  const createValidationRules = (fieldType, validations) => {
    const rules = validations.map((validation) => {
      if (validation.rule === "required") {
        return { required: true, message: validation.message };
      } else if (validation.rule === "regex") {
        return {
          pattern: new RegExp(validation.limit),
          message: validation.message
        };
      } else {
        return {
          [validation.rule]: validation.limit,
          message: validation.message,
          type: fieldType === "number" ? "number" : "string"
        };
      }
    });
    return rules;
  };

  // Builds out the field based on it's configuration
  const dynamicField = (item) => {
    switch (item.fieldType) {
      case "select":
        const { Option } = Select;
        return (
          <Select key={item.name}>
            <Option value=""></Option>
            {item.options.map((option) => (
              <Option value={option.value} key={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        );
      case "checkbox":
        return <Checkbox key={item.name} />;
      case "textarea":
        const { TextArea } = Input;
        return <TextArea key={item.name} />;
      case "number":
        return <InputNumber key={item.name} />;
      case "radio":
        return (
          <Radio.Group>
            {item.options.map((opt) => (
              <Radio value={opt.value} key={opt.value}>
                {opt.label}
              </Radio>
            ))}
          </Radio.Group>
        );
      default:
        return <Input {...item.fieldHtml} key={item.name} />;
    }
  };

  return (
    <div className="">
      {loading ? (
        <div>Loading...</div>
      ) : (
        fetchForm && (
          <Form
            name="HookForm"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            noValidate
          >
            {fetchForm.formItems.map((item, i) => (
              <Form.Item
                key={i}
                label={item.label}
                name={item.name}
                valuePropName={
                  item.fieldType === "checkbox" ? "checked" : "value"
                }
                rules={createValidationRules(item.fieldType, item.validation)}
                validateTrigger="onBlur"
              >
                {dynamicField(item)}
              </Form.Item>
            ))}
            <Form.Item
              wrapperCol={{
                span: 8,
                offset: 6
              }}
            >
              <Button type="primary" htmlType="submit">
                {fetchForm.submitText}
              </Button>
            </Form.Item>
          </Form>
        )
      )}
    </div>
  );
};

Fetch Forms is a headless form builder that exists to help developers build and manage forms easily so they can focus on more important things. It’s perfect for headless websites, JAMstack websites, and web apps.

]]><![CDATA[Full Stack Starter - Svelte and Express]]>https://blog.lukefrauhiger.com/full-stack-starter-svelte-and-expresshttps://blog.lukefrauhiger.com/full-stack-starter-svelte-and-expressFri, 01 Apr 2022 16:27:16 GMTSvelte and Node.js

Knowing how to build either a frontend or backend is a valuable skill. I started my career in technology as a UI/UX designer, but I hated that I couldn't help turn my designs into a functional webapp. That's when I jumped into frontend development! I desperately wanted to do more than designing the interactions - I wanted to be able to build them!

Learning frontend design was a great challenge and it was amazing how much it affected my designs. Knowing more about data structures, data manipulation, and the capabilities of various frameworks forced me to think critically about the designs I was doing. It especially helped with the hand-off between myself and developers. Terms like, "I don't know how to do it, just do it", left my vocabulary and I was much more helpful in the implementation. Something my fellow developers are thankful for to this day.

However, for most people learning just frontend or just backend isn't enough. To put a website or web app on the internet for all to see, you have to know more than just one discipline. That's why I'm writing this! I hope this article helps you with your journey of building and deploying a Svelte app. There are other ways to deploy Svelte and the other SPA frameworks, but using an application server is one of my favorites if you need to do backend & API work.

Before we begin

Before we jump in let's go over some details.

You'll need Node.js installed - you can download it here if you haven't already.

You can access my template repo with the completed files here.

The plan

The plan is to create a Svelte frontend, a Node & Express backend, and wire them together so that our frontend can search for gifs from the GIPHY API. This will be a great example of why using an application server can be so great for your full-stack development. It keeps all the files in one place and sensitive data, like API keys, are hidden in the server and not your frontend.

So...Svelte is awesome, right?

As a full-stack developer of 7 years, I honestly say that Svelte is pretty amazing...but not for everything. Here is a saying that I've said far too often in my career

"Anything can be used as a hammer"

I'm a huge advocate for using the right tool for the job. Sometimes that means it's going to be Svelte, sometimes it won't. You could choose to use Svelte for all your projects and that might be a great call for you. It might not be a good call for someone else.

My personal opinion - I wouldn't use Svelte for bigger applications. It's not because Svelte can't handle bigger projects! It's because I think tools like React or Angular provide much better tooling and organizational potential than Svelte does. For our small example today, I think Svelte is perfect!

Let’s jump in

The first thing we’ll do is create our Svelte app. To do that, we’ll follow the instructions on this page and run the following:

$ npx degit sveltejs/template svelte-express-app

If you haven’t used npx before, it’s an executable package, baked into NPM, that enables one-time use of an npm package. In this case, npx is executing the tool degit to pull down and clone the Svelte template repo. You can read more info about the degit project here.

This command clones the Svelte template repo and names it “svelte-express-app”. Once the command completes, install the project, and you’re ready to begin developing with Svelte! Let’s run the following commands to get our Svelte app 100% ready.

$ cd svelte-express-app
$ yarn
$ yarn dev

We can now begin to develop our Svelte app! Let's move to the Node.js backend.

We’ll use Express on top of Node.js to make building the API super easy. To get this started, we'll first install Express and CORS.

$ yarn add express --save
$ yarn add cors --save

Now that we have Express added to our project, let's create the server file and get it set up so that it can serve the Svelte app. It's important that the server file is outside of the "src" folder. Since the Svelte app is within the "src" folder, everything within it gets compiled and bundled through Rollup - the bundler that Svelte uses. Since we want our server to be separate and serve the frontend to the browser, we need to make sure that the server file is outside of any directory that's being compiled.

NOTE: You could write Node.js and Express with Typescript and need it to be compiled. But that's a slightly different process and one we're not going over in this article. If that's something you'd like to see, let me know!

Let's create our file at the root of our project. I'm going to name my file "server" - I'm really creative, I know! You can create the file with the following command or however you're favorite editor allows you to.

$ touch server.js

Open that file up and add the boilerplate code for Express

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const cors = require('cors');
const path = require('path');

app.use(cors());

These lines of boilerplate do several things. They set up the express app, assign a port if the application doesn't have one, import the CORS and Path libraries from npm, and finally, it assigns the Express app to use CORS instead of the baked in security. Cors is really helpful in fine-tuning the security of your application in regards to what domains, outside of your hosting domain, can be used to access the server.

Just a few more lines before we're ready to use the server!

app.use(express.static('public'));
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});
app.listen(port, () => {
    console.log(`Server is up at port ${port}`);
});

The first two functions are used to serve the index.html in the public directory to the browser. If you'd like to read more on how the Path library works take a look here, but It's essentially a baked in library that allows Node.js to read and write files!

The last function is a listener that prints out a statement about the port number of the server! This is a really quick way to know if the server is up when developing locally.

Let's Test

Let's test each app separately to make sure they're working. Make sure you kill the process before you run another one.

yarn dev to start the Svelte app. Go to your browser and check it out!

node server.js to start the express app. The console should read Server is up at port 5000

Starting Both With One Command

Now that we have our frontend and backend configured, we need to spin them up! There are differences in the build process between development and production. To serve this in a production environment, it's a pretty straightforward process.

  1. Build the Svelte app yarn build

  2. Start the server. yarn start

It's so simple because we don't want the Svelte app to be hot reloading. For production, we want a super-performant, minified bundle that will load in the browser quickly.

But for development, hot reloading is a must for the Svelte side of things! We'll have to adjust the package.json scripts so we can re-compile the Svelte every time we make changes. And we need to serve the Svelte app from our Express server instead of Svelte's default serve library.

Svelte uses the library "sirv" to deliver the compiled bundle of Javascript to your browser. Let's open the package.json file and take a look at the "scripts" part of the file. You'll find a "start" command that uses the sirv library to serve the public folder. Let's change that FROM "sirv public" TO "node server.js". This creates a single command that will hot-reload the Svelte app and use our Express app as the server. Let's give it a go!

yarn dev

Go to your browser at localhost:5000 and see it work! You should also see the console print out the port number.

You're done! But there's more

Congratulations, you've built a full-stack web app that is incredibly easy to develop! But we're not going to stop there. Let's add an API endpoint to our Express app and use the GIPHY API to search for gifs.

Adding a route

The first thing we're going to do is add a new route to our Express.

app.get('/giphy', (req, res) => {
     console.log(`Searching for a gif with the term: ${req.query.term}`);
    res.send({
        success: true,
        data: []
    })
});

It's incredibly important to note that this function MUST BE BEFORE the app.use() function that sends the index.html to the frontend. If you place this function after that app.use() function, nothing will happen on your request.

The first line is the Express function that declares the URL path of the endpoint and which HTTP verbs can be used for it. This endpoint can be accessed through localhost:5000/giphy and it's a "GET" function only. You can also use other HTTP verbs like POST, PUT, and DELETE. If you'd like to use an endpoint for everything, the "USE" function is the perfect choice.

The next line is a console log to print out the search term and then we have the res.send() function that sends our data back to the frontend. There's no special sauce here - you can return whatever you'd like from your endpoint. In my experience creating an object that has a success flag and then a property with the data makes it easy to do success/fail conditionals in the front end.

Making the request from Svelte

Now to Svelte! Open up App.svelte and replace the paragraph after "Hello World" with the following:

<div class="search-block">
    <input type="text" placeholder="Search for gif" bind:value={searchTerm} />
    <button on:click={searchForGif}>Search</button>
</div>
<div class="gifs">
    {#if gifs.length > 0}
        <div class="gifs-grid">
            {#each gifs as gif}
                <iframe src={gif.embed_url} title={gif.title} />
            {/each}
        </div>
     {:else}
         No gifs to show yet
     {/if}
</div>

Now, add this javascript in the script tag.

let gifs = [];
let searchTerm = "";

async function searchForGif(e) {
    try {
        const returnValue = await fetch(`/giphy?term=${searchTerm}`);
        const response = await returnValue.json();
        gifs = response.data;
    } catch (error) {
        console.error(error);
    }
}

At this point, I'm assuming you know Svelte and it's flavor of syntax, so I'm not going to talk in detail about how this works. From a high level, the button calls a function that uses the value bound to the input field and calls to our Express endpoint. On return, the code is formatted and assigned to a variable. Once all that code is added, you should be able to type something in the input field, click the button and see the Express server log out the search term. Since we're not returning any data from our endpoint, the Svelte won't change or display anything.

Using the GIPHY API

Let's change that - let's add the GIPHY API. To make API calls from Express, we'll need to add a library. I like axios, but node-fetch is another popular one. Run $ yarn add axios to install axios and then add the require() to the server const axios = require('axios');

Now we're ready to add the API call. In the /giphy endpoint replace the contents with this:

console.log(`Searching for a gif with the term: ${req.query.term}`);

let params = req.query.term.replace(/ /g, '+');
params += '&api_key=YOUR_API_KEY';
params += '&limit=10';

axios.get(`https://api.giphy.com/v1/gifs/search?q=${params}`)
    .then(function (response) {
        res.send({
            success: true,
            data: response.data.data
        })
    })
    .catch(function (error) {
        res.send({
            success: false,
            data: []
        })
    });

The first part of this code takes the term variable and replaces any spaces with a plus sign. The next two lines add the API key and a query limiter. These are all well documented in GIPHY's doc here.

The axios function will make a GET request to the endpoint and then resolve or reject, sending the appropriate response back to the client.

Before you can query the GIPHY API, you'll need to get your own API key. Head over to their developer page and create an account and an app. Make sure you select API when you are generating a key. Then copy and paste that bad boy after the YOUR_API_KEY param in the code above!

Search for Gifs!

Once you've added your API key to the endpoint you're ready to use the search functionality! Restart your server with yarn dev and type something in the search box and hit the button! A grid of 10 gifs should popup! This project is super extensible, so feel free to hack around and explore it on your own.

You can access my template repo with the completed files here.

]]><![CDATA[Full Stack Development Starter - React and Nodejs]]>https://blog.lukefrauhiger.com/full-stack-development-starter-react-and-nodejshttps://blog.lukefrauhiger.com/full-stack-development-starter-react-and-nodejsFri, 01 Apr 2022 16:11:23 GMTWhen I went from being a UI & UX designer to a programmer I had literally no idea what I was doing. What made it worse was that I didn’t have any mentorship or guidance on how to move forward. All of my coworkers were Salesforce developers and hadn’t built any full-stack web apps with industry standard technology. It was up to me to pave the way forward with a new technology stack and deployment strategy.

With no idea of what to even Google and almost no concept of what it takes to build a full-stack application, I headed into the technological wilderness to find my path. After several weeks of research about coding languages and hosting platforms I finally had a full-stack application completed and running on Node.js and Angular 2+.

I often wonder what this project, or even the next couple of years of development, would have looked like if I had mentorship while figuring all of this out. That’s my goal with this article - to act as a simple mentor and get you started down the full stack trail.

React and Node.js

We’re gonna start with a full javascript stack. This can make developing and deploying full-stack applications a breeze since you only need to know one language.

There are several ways you can structure the client and server folders, but for today’s example, we’re going to keep it as simple as possible! That way you can expand it on your own in the future!

Prerequisites Node.js installed - You can download it here.

Get Started

First things first - let’s create our React app:

$ npx create-react-app react-node
$ cd react-node
$ yarn build

If you’ve never used npx before - it’s basically an execution library. Instead of having to install create-react-app globally and then use the global command to create the app, you can use npx!

At this point our React app is ready to go! We’re not going to do anything else with it right now since all we’re trying to do is serve it from a server.

We’ll need to add Express to our project and then create a file. I’ll name mine server.js.

$ yarn add express
$ touch server.js

Now, open the file and paste these lines:

const express = require('express');
// instantiates express so we can use the middleware functions
const app = express();

// Node’s native tool for working with files. 
const path = require('path');

// set a default port in case the host isn’t configured with one
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req,res) => {
   res.sendFile(path.join(__dirname+'build/index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Since the file is a javascript file and we’ll the node command to start it up, the runtime is established as Node.js.

On 2 two we’ve instantiated “app” as our Express application. Just like REST requests, Express has get, post, put, and delete functions. But if you’d like to use a single middleware function for all of the HTTP verbs, the use function is your jam.

On line 6 the Express app loads the build folder. Without this line the code would fail since Express wouldn’t be able to send the index.html file to the browser.

The app.use(...) function is what actually serves the root of our React app to the browser. Notice that it’s only being served when on a GET request, but it is serving the file at all routes. This way when our React app begins routing, the server is returning the index.html file and making sure the React app is running.

To serve your app, make sure you’re in the root of the project and type:

$ node server.js

Whala! Full-stack app - done. You’re serving your pre-built React app with Express. But let’s add one more route to make sure you’re well on your way to becoming a full-stack developer.

First, let’s add the body-parser library.

$ yarn add body-parser

Now let’s import it and setup our new route:

const express = require('express');
const app = express();
+ const bodyParser = require('body-parser')
const path = require('path');
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));
+ app.use(bodyParser.json());

+ app.post('/new-route', (req, res) => {
+   let name = req.body.name;
+   res.send(
+        {greeting: `Hello ${name}`}
+   );
+ })

app.get('*', (req,res) => {
   res.sendFile(path.join(__dirname+'build/index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}`));

This new route will take a POST request at a route matching “/new-route” and return an object with a greeting. Notice that we’ve also added another app.use(...) function that will parse the value of the body in the req object.

Now onto the React!

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 const [greeting, setGreeting] = useState('');

+ fetch("/new-route", {
+   method: 'POST',
+   headers: {
+     'Content-Type': 'application/json',
+   },
+   body: JSON.stringify({name: 'Luke Duke'})
+ })
+   .then(res => res.json())
+   .then((result) => {
+       setGreeting(result.greeting);
+   })
+   .catch(error => console.log(error))
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       + {greeting &&
       +  <h2>{greeting}</h2>
       + }
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
   </div>
 );
}

export default App;

We added the “useState” import and added a hook for the response from the server. We also added a fetch() function that POSTs into our server with a name. The JSX renders the greeting when it’s set.

Note: You do not have to return an object from the Express app. Typically real world applications return a non-string variable, but you can return any type from Express.

Finally, rebuild the React and start up the server to see your app work!

$ yarn build
$ node server.js

And that is our Javascript all-the-way example! There is a ton of great documentation on the Express.js Framework page to help you along on your way.

]]>