Forem: Nataly

How to build a Node.js Express React app as one executable file that runs on Windows, Linux, and Mac OS 🏩

Nataly — Wed, 25 Sep 2024 05:23:30 +0000

We're going to make it as easy as possible for users to run Node applications. There is no need to install Node.js and learn how to build apps with packages with hundreds or thousands of files. This simple tutorial will show you how to turn your Node.js, Express, and React project into a single executable application that you can simply double-click to run.

Why build an app as a single executable file?

Run without dependencies: There is no need to install packages with npm, as all the necessary libraries are combined into one executable file. You don't need to download hundreds or even thousands of files via npm install to deploy the application - all the necessary components will be available in a single file.
Easy to run: No Node.JS installation required and no npm, simplifying the process of building and running the app. Of course, users can use Docker or Kubernetes, but not everyone knows how to work with them. So running the program should be as simple and intuitive as possible.

Let's get started!

As an example, let's use a project that has two large logical blocks, and therefore two main folders:

client - the client part, written in React
server - the server part, a simple Express server

To build our project, we'll use the popular PKG package. Let's install it first:

npm install -g pkg

The next step is to build our React application. To do this, go to the client folder and run the command

npm run build

Then, copy the "Build" folder to the root directory of the server folder. In order for our server to display a page for each request, we will include the index.html file in our React application. We will add the following code to our server application's code:

const path = require('path')

...


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

To build your app successfully open the package.json file in the the server folder. Add a code block that lists all the folders that need to be included in the build process.

"pkg": {
    "assets": [
      "controllers/*",
      "middleware/*",
      "models/*",
      "routes/*",
      "build"
    ],
    "output": "dist"
}

The resulting package.json file might look something like this.

{
  "name": "app_name",
  "version": "0.1.0",
  "description": "",
  "bin": "app.js",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gen_vapid_keys": " web-push generate-vapid-keys [--json]"
  },
  "pkg": {
    "assets": [
      "controllers/*",
      "middleware/*",
      "models/*",
      "public",
      "routes/*",
      "build"
    ],
    "output": "dist"
  },
  "author": "hubio",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "moment": "^2.29.2",
    "mysql2": "^2.2.5",
    "pkg": "^5.8.1",
    "sequelize": "^6.6.5",
  }
}

Your project's list of dependencies will be different, it is just an example.

Next, in the terminal, inside the server folder, we start the build process using the command:

pkg .

If you run the above command, you will get three files: one for Windows, one for Linux, and one for Mac OS.

If you only need to build a package for a specific operating system, just add the necessary parameters after the word "pkg", for example:

pkg –t node-18-win .

A couple of minutes and your app will be ready! 🎉

Now, any user can launch your application on a Windows computer simply by double-clicking.

Small addition

You may not always be able to include all the data for your app in the final executable file. A simple example is a configuration file that contains the username and password to connect to the database. In this case, the application needs to access an external config file. To do this, you need to specify the relative path to the config file in the server app.

filename="./config.json"
let rawdata = fs.readFileSync(filename)
let config = JSON.parse(rawdata)

You can access data from the config file, as usual:

const PORT = config.PORT || 8080

Similarly, you can specify the path to an external folder where files uploaded through the app will be saved.

You can see how the finished application works by using the example of our project and task management system Hubio. It can be downloaded and installed on a computer for personal use, or on a server, and used over the internet or on a local network.

How to create an advanced React tags input component

Nataly — Tue, 15 Aug 2023 23:33:11 +0000

There are enough good tutorials on how to build a tag input component in React JS. However, typically, it is a very simple component without functionality to search for existing tags (for example, from a database) and present them as options to choose from. Also, there was no tutorial on how to add functionality for colorizing tags.

In this tutorial, I will try to cover both of these topics: autocomplete tags and add colors to newly added tags.

Project Setup

We are going to create a tags input component using React JS. To start, we will create a new React application using the Create React App (CRA) tool.

npx create-react-app tags-input
cd tags-input

Then, install the necessary dependencies. For this project we will use react-select, react-popper, and nanoid.

npm install react-select react-popper nanoid

Let's create two additional folders inside the src folder called "data" and "tags".

Inside the data folder, create two files: COLORS.js and TAGS.js.

// COLORS.js
export const COLORS = [
    "#e93a55", "#f94e45", "#ff8549", "#3e993c", "#1e8a78",
    "#238cd7", "#6d65a8", "#414a53", "#e36dab", "#4abeb7",
    "#ff8657", "#ffb855", "#84c15f", "#00bd9d", "#00b2d7",
    "#967cd7", "#a8b2bc", '#fb5779', '#ff7511', '#ffa800',
    '#ffd100', '#ace60f', '#19db7e', '#00d4c8', '#48dafd',
    '#008ce3', '#6457f9', '#9f46e4', '#ff78ff', '#ff4ba6'
]

// TAGS.js
export const TAGS = [
    { id: 1, value: "React",  label: "React", color: COLORS[1] },
    { id: 2, value: "Angular", label: "Angular", color: COLORS[2] },
    { id: 3, value: "Vue", label: "Vue", color: COLORS[3] },
    { id: 4, value: "Javascript", label: "Javascript", color: COLORS[4] },
    { id: 5, value: "Typescript", label: "Typescript", color: COLORS[5] }
]

Let's start to work on React tags input component

Inside a tags folder create files called Tags.js. This component will render list of tags and tags input field.

import { useCallback, useEffect, useRef, useState } from "react"
import { TAGS } from "../data/TAGS"
import { TagsList } from "./TagsList"
import { TagsInputField } from "./TagsInputField"

export const Tags = () => {

    const [tags, setTags] = useState(TAGS.slice(0, 3))

    return (
        <div className="TaskTags">
            <TagsList
                tags={tags}
                setTags={setTags}
            />

            <TagsInputField
                tags={tags}
                setTags={setTags}
            />
        </div>
    )
}

Than in the same folder create files TagsList.js, Tag.js and TagsInputField.js files.

//TagsList.js
import { Tag } from "./Tag"

export const TagsList = ({
    tags,
    setTags
}) => {

    return (
        <>
            {tags.map((tag, index) => <Tag
                key={tag.id}
                tag={tag}
                setTags={setTags}
            />)}
        </>
    )
}

// Tag.js
import { forwardRef } from "react"

export const Tag = forwardRef(({ tag, setTags }, ref) => {

    const removeTag = () => setTags(prevState => prevState.filter(i => i.id !== tag.id))

    return (
        <div
            ref={ref}
            className="TaskTag"
            style={{
                background: tag.color
            }}
        >
            <span className="TaskTag-label">{tag.label}</span>
            <svg onClick={removeTag} className="TaskTag-deleteButton" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="none" d="M0 0h24v24H0z"/>
                <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/>
            </svg>
        </div>
    )
})

TagsInputField.js

In this component we are going to use async select component, that provide possibility to fetch from server existing tags and create new tags.

import { forwardRef, useCallback, useEffect } from "react"
import { nanoid } from "nanoid"
import AsyncCreatableSelect from "react-select/async-creatable"
import { components } from "react-select"
import { TAGS } from "../data/TAGS"
import { COLORS } from "../data/COLORS"

export const TagsInputField = forwardRef(({
    tags,
    setTags
}, ref) => {

    const addTag = (value) => setTags(prevState => [...prevState, value])

    const handleCreateOption = async (value) => {
        const additionalOption = createOption(value)

        addTag(additionalOption)
    }

    // function to remove tags on Backspace key press
    const listener = useCallback((e) => {
        if (e.key === 'Backspace') {
            setTags(prev => prev.filter((_, i) => i !== tags.length - 1))
            if (ref.current) ref.current.focus()
        }

    }, [ref, tags, setTags])

    // add "keydown" event listener
    useEffect(() => {
        if (ref.current) ref.current.focus()

        document.addEventListener("keydown", listener)

        return () => {
            document.removeEventListener("keydown", listener)
        }
    }, [ref, listener])

    return (
        <AsyncCreatableSelect
            ref={ref}
            name="tags"
            value={{}}
            loadOptions={(value) => promiseOptions(value, tags)}
            menuPlacement={'auto'}
            components={{ LoadingIndicator: null, Option, SinleValue }}
            classNamePrefix="select"
            placeholder=""
            styles={tagsListStyles}
            cacheOptions
            onCreateOption={handleCreateOption}
            onChange={addTag}
        />
    )
})

// "fetch" options from "backend"
const promiseOptions = (inputValue, tags) =>
    new Promise((resolve) => {
        setTimeout(() => {
            resolve(filterTags(inputValue, tags))
        }, 1000)
    }
)

// filter already selected tags
// and filter tags from "backend" by input value
const filterTags = (inputValue, tags) => {
    return TAGS.filter(x => !tags.includes(x)).filter((i) =>
        i.label.toLowerCase().includes(inputValue.toLowerCase())
    )
}

const createOption = (value) => ({
    id: nanoid(),
    value,
    label: value,
    color: COLORS[16]
})

// And let's add some custom styling to react-select component
const SinleValue = (props) => {

    const { data } = props

    return (
        <components.SingleValue {...props}>
            <div className="Select-option">
                <span className="SelectColorSingleValue" style={{
                    backgroundColor: data.color
                }}>
                    {data.label}
                </span>
            </div>
        </components.SingleValue>
    )
}

const Option = (props) => {

    const {data} = props

    return (
        <components.Option {...props}>
            <div className="Select-option">
                <span>
                    {data.label}
                </span>
            </div>
        </components.Option>
    )
}

const tagsListStyles = ({
    container: (provided) => ({
        ...provided,
        width: "100%"
    }),

    control: (provided, state) => ({
        ...provided,
        height: 28,
        minHeight: 28,
        width: "100%",
        fontSize: 14,
        borderRadius: 6,
        padding: '0 0 0 8px',
        ':hover': {
            cursor: 'pointer'
        },
        borderColor: 'transparent',
        border: state.isFocused ? '1px solid transparent' : '1px solid #transparent',
        boxShadow: state.isFocused ? 0 : 0,
        boxSizing: 'border-box',
        '&:hover': {
            borderColor: state.isFocused ? 'transparent' : 'transparent',
            boxShadow: state.isFocused ? 0 : 0,
            boxSizing: 'border-box',
        }
    }),

    valueContainer: (provided) => ({
        ...provided,
        padding: 0
    }),

    indicatorSeparator: (provided) => ({
        ...provided,
        display: 'none'
    }),

    indicatorContainer: (provided) => ({
        ...provided,
        padding: 3
    }),

    dropdownIndicator: (provided) => ({
        ...provided,
        display: 'none'
    }),

    menu: (provided) => ({
        ...provided,
        boxShadow: '0 0 0 1px rgb(111 119 130 / 15%), 0 5px 20px 0 rgb(21 27 38 / 8%)',
        background: '#fff',
        width: "100%",
        boxSizing: 'border-box',
        margin: 0
    }),

    option: (provided, {isSelected}) => ({
        ...provided,
        color: "#151b26",
        fontSize: 14,
        minHeight: "36px",
        backgroundColor: isSelected && "#fff" ,
        ':hover': {
            cursor: 'pointer',
            backgroundColor: " #f2f6f8"
        }
    })
})

Now we can import and use in our App.js

import './App.css'
import { Tags } from './tags/Tags'

function App() {

  return (
    <div className="App">
      <div className="Tags">
        <Tags />
      </div>
    </div>
  )
}

export default App

And also add these CSS styles in our src/App.css

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.App {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
}

.Tags {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.TaskTags {
    align-items: center;
    border: 1px solid #14aaf5;
    border-radius: 8px;
    display: flex;
    min-height: 38px;
    padding: 5px;
    display: flex;
    min-width: 1px;
    width: 700px;
    flex-wrap: wrap;
    max-width: 100%;
}

.css-fyq6mk-container {
    display: flex;
    flex: 1 1 auto;
    min-width: 180px;
    width: auto !important;
}

.Select-option {
    align-items: center;
    display: flex;
}

.PopoverReferenceElement {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
}

.ActiveTaskData-content .PopoverReferenceElement {
    display: flex;
    flex: 0 0 auto;
}

.TaskTagWithColorSelect {
    align-items: center;
    display: flex;
}

.TaskTag {
    margin-bottom: 2px;
    margin-right: 4px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    color: #fff;
    fill: #fff;
    border-radius: 10px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
}

.TaskTag-label {
    text-overflow: ellipsis;
    box-sizing: border-box;
    display: block;
    font-weight: 400;
    max-width: 180px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
}

.TaskTag-deleteButton {
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    height: 12px;
    line-height: 20px;
    min-height: 12px;
    min-width: 12px;
    width: 12px;
}

.ColorSelectPopUp {
    align-items: center;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #e8ecee, 0 5px 20px 0 rgba(21, 7, 38, 0.08);
    box-sizing: border-box;
    color: #151b26;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    position: relative;
    width: 241px;
    z-index: 5000;
}

.ColorItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-width: 1px;
    border-color: #fff;
    border-style: solid;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    padding: 2px;
    transition-property: border-color;
    transition-duration: 200ms;
}

.ColorItem:hover {
    border-color: #26d1b9;
    background-color: #fff;
}

.SelectedColorItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-width: 1px;
    border-color: #26d1b9;
    border-style: solid;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    padding: 2px;
    transition-property: border-color;
    transition-duration: 200ms;
}

.ColorIndicator {
    border-radius: 50%;
    height: 18px;
    width: 18px;
}

We have finished with first part
Now we can add existing tags from list, remove selected tags and create new tags. However all new tags will be grey color.

Second topic: Function for tag color changing

And now we are goin to add possibility to select colors for all created tags.

Tags colorizing

Let me briefly describe how it will work.
When we create new tag, we add it to tags list. Next, using react-popper library, we will show popup with list of available colors, where user may select color for tag.
If user start typing new tag we simply hide popup.

Popup element should be displayed near created tag, it means we have to set last tag in the list as "referenceElement".
However tags list is an array of elements and if we want to refer to one of it's elements we need to save to the ref array of elements: ref={el => tagsRef.current[index] = el}

First of all let's modify Tags.js component: add reference element, popper element, state to show popper and tagsRef (which is an empty array).

Additionally we need to add the state to store id of active tag for which we will change color.

And finally add outsideClickHandler to hide popup.

import { useCallback, useEffect, useRef, useState } from "react"
import { TAGS } from "../data/TAGS"
import { TagsList } from "./TagsList"
import { TagsInputField } from "./TagsInputField"

export const Tags = () => {

    const [tags, setTags] = useState(TAGS.slice(0, 3))

    const [referenceElement, setReferenceElement] = useState(null)
    const [popperElement, setPopperElement] = useState(null)
    const [showPopper, setShowPopper] = useState(false)


    const [activeTagId, setActiveTagId] = useState(null)

    const tagsRef = useRef([])

    useEffect(() => {
        if (activeTagId === null) return

        if (tags.indexOf(tags.find(tag => tag.id === activeTagId)) >= 0) {
            setReferenceElement(tagsRef.current[tags.indexOf(tags.find(tag => tag.id === activeTagId))])
            setShowPopper(true)
        }
    }, [setShowPopper, tags, tagsRef, activeTagId])

    const selectRef = useRef(null)

    const outsideClickHandler = useCallback((event) => {
        if (!popperElement || popperElement.contains(event.target)) {
            return
        }
        if (popperElement && !popperElement.contains(event.target)) {
            setShowPopper(false)
            setActiveTagId(null)
        }
    }, [popperElement, setShowPopper, setActiveTagId])

    useEffect(() => {
        if (popperElement) {
            document.addEventListener("mousedown", outsideClickHandler)
            return () => {
                document.removeEventListener("mousedown", outsideClickHandler)
            }
        }
    }, [popperElement, outsideClickHandler])

    return (
        <div className="TaskTags">
            <TagsList
                referenceElement={referenceElement}
                popperElement={popperElement}
                selectRef={selectRef}
                activeTagId={activeTagId}
                tags={tags}
                tagsRef={tagsRef}
                showPopper={showPopper}
                setPopperElement={setPopperElement}
                setTags={setTags}
            />

            <TagsInputField
                ref={selectRef}
                tags={tags}
                setTags={setTags}
                setActiveTagId={setActiveTagId}
                setShowPopper={setShowPopper}
            />
        </div>
    )
}

Next we are goin to modify TagsInput.js: set active tag id when adding new tag and hide popup when user starts typing new tag title in input field.

import { forwardRef, useCallback, useEffect } from "react"
import { nanoid } from "nanoid"
import AsyncCreatableSelect from "react-select/async-creatable"
import { components } from "react-select"
import { TAGS } from "../data/TAGS"
import { COLORS } from "../data/COLORS"

export const TagsInputField = forwardRef(({
    tags,
    setTags,
    setActiveTagId,
    setShowPopper
}, ref) => {

    const addTag = (value) => setTags(prevState => [...prevState, value])

    const handleCreateOption = async (value) => {
        const additionalOption = createOption(value)

        addTag(additionalOption)

        setActiveTagId(additionalOption.id)
    }

    const listener = useCallback((e) => {
        if (e.key === 'Backspace') {
            setTags(prev => prev.filter((_, i) => i !== tags.length - 1))
            if (ref.current) ref.current.focus()
        }

        setShowPopper(false)
        setActiveTagId(null)
    }, [ref, tags, setTags, setShowPopper, setActiveTagId])

    useEffect(() => {
        if (ref.current) ref.current.focus()

        document.addEventListener("keydown", listener)

        return () => {
            document.removeEventListener("keydown", listener)
        }
    }, [ref, listener])

// other code remains without changes

React tags input component COMPLETED! 🎉

Implementation of this code can be seen in our real project - a self-hosted project management system Hubio.