DEV Community: Willyams Yujra

react-slotx

Willyams Yujra — Sun, 14 Jun 2026 17:36:52 +0000

react-slotx — Step-by-Step Tutorial

This guide will walk you through using react-slotx from scratch.

No prior knowledge of slots or portals is required — just basic React.

What is react-slotx?

react-slotx lets you declare content in one place and render it somewhere else in your React tree.

The two key building blocks are:

<Slot name="…"> — registers content into a named bucket.
<Outlet name="…"> — renders whatever was registered in that bucket.

Think of it like a two-way pipe:

<Slot name="header">  ← you put content here (deep inside a page)
    <h1>Hello</h1>
</Slot>

<Outlet name="header" />  ← it shows up here (e.g. in a layout shell)

Installation

yarn add react-slotx

Requirements:

React ≥ 18
react-dom is only needed for SSR (covered in Part 2)

Part 1 — SPA with Vite

This section shows the automatic way to use react-slotx inside a plain Vite + React project.

Step 1 — Create a new Vite project

yarn create vite my-spa-app --template react-ts
cd my-spa-app
yarn install
yarn add react-slotx

Step 2 — Clean up unused Vite template files

The Vite template generates files that are not needed for this tutorial. Remove them to keep the project clean:

Linux

rm -rf src/*
touch src/main.tsx
touch src/App.tsx
touch src/Layout.tsx
touch src/HomePage.tsx

Windows

Remove-Item src\* -Force
New-Item src\main.tsx -ItemType File -Force
New-Item src\App.tsx -ItemType File -Force
New-Item src\Layout.tsx -ItemType File -Force
New-Item src\HomePage.tsx -ItemType File -Force

Step 3 — Create the SlotClient (once, at the app root)

SlotClient is the shared store that connects every <Slot> with its matching <Outlet>. You create it once and pass it to <SlotProvider>.

Edit src/main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { SlotClient, SlotProvider } from "react-slotx";
import { App } from "./App";

// Create a single shared client for the whole app
const client = new SlotClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <SlotProvider client={client}>
      <App />
    </SlotProvider>
  </StrictMode>
);

Why wrap the whole app?

SlotProvider makes the client available to every component in the tree. Without it, <Slot> and <Outlet> cannot talk to each other.

Step 4 — Create a Layout with an Outlet

The Layout is the shell of your page. It defines where content will appear using <Outlet>.

Create src/Layout.tsx:

import { Outlet } from "react-slotx";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {/* The page title registered anywhere in the tree will render here */}
      <header>
        <Outlet name="page-title" />
      </header>

      <main>
        {children}
      </main>
    </div>
  );
}

Step 5 — Register content with Slot inside a Page

A Page component registers the title it wants to show, using <Slot>. It does not need to know where the title will actually appear.

Create src/HomePage.tsx:

import { Slot } from "react-slotx";

export function HomePage() {
  return (
    <div>
      {/* Register a title into the "page-title" slot */}
      <Slot name="page-title">
        <h1>Welcome to the Home Page</h1>
      </Slot>

      <p>This is the home page content.</p>
    </div>
  );
}

Step 6 — Wire everything together in App

Edit src/App.tsx:

import { Layout } from "./Layout";
import { HomePage } from "./HomePage";

export function App() {
  return (
    <Layout>
      <HomePage />
    </Layout>
  );
}

Step 7 — Run the app

yarn dev

Open http://localhost:5173. You will see "Welcome to the Home Page" rendered inside the <header>, even though it was declared inside <HomePage>.

How it works (diagram)

<App>
  <Layout>
    <header>
      <Outlet name="page-title" />  ← renders here
    </header>
    <main>
      <HomePage>
        <Slot name="page-title">   ← content declared here
          <h1>Welcome…</h1>
        </Slot>
      </HomePage>
    </main>
  </Layout>
</App>

Bonus — priority and multiple Slots

If two components register content into the same slot name, the mode prop on <Outlet> decides which one wins.

// PageA registers with priority 1 (the default)
<Slot name="page-title" priority={1}>
  <h1>Page A</h1>
</Slot>

// PageB registers with priority 5
<Slot name="page-title" priority={5}>
  <h1>Page B</h1>
</Slot>

// With mode="priority" (the default), the outlet renders Page B
<Outlet name="page-title" mode="priority" />

// With mode="all", both are rendered in registration order
<Outlet name="page-title" mode="all" />

mode	behaviour
`"priority"` (default)	Renders the Slot with the highest `priority` value
`"first"`	Renders the first Slot registered
`"last"`	Renders the last Slot registered
`"all"`	Renders every Slot in registration order

Part 2 — SSR with Express

Server-Side Rendering means the HTML is built on the server before it reaches the browser. react-slotx has first-class support for this through SlotSSRClient, imported from react-slotx/server.

Step 1 — Create the project

mkdir my-ssr-app
cd my-ssr-app
yarn init -y
yarn add express react react-dom react-slotx
yarn add -D tsx

Why tsx? tsx is a lightweight Node.js enhancer that understands JSX files (.jsx) with no TypeScript required. It replaces the need for a full TypeScript + Babel setup.

Step 2 — Create your React component

This component uses <Slot> exactly as in SPA mode. The component itself does not care whether it is rendered on the client or the server.

Create src/Page.jsx:

import React from "react";
import { Slot } from "react-slotx";

export function Page() {
  return (
    <div>
      {/* Register the <title> tag into the "head" slot */}
      <Slot name="head">
        <title>My SSR Page</title>
        <meta name="description" content="Built with react-slotx" />
      </Slot>

      <h1>Hello from the server!</h1>
      <p>This HTML was rendered on the server.</p>
    </div>
  );
}

Step 3 — Create the render function

This is the key difference from SPA mode. On the server you use SlotSSRClient instead of SlotClient, and after renderToString you call client.renderToString("slot-name") to extract the HTML registered in each slot.

Create src/render.jsx:

import React from "react";
import { renderToString } from "react-dom/server";
import { SlotProvider } from "react-slotx";
import { SlotSSRClient } from "react-slotx/server";
import { Page } from "./Page.jsx";

export function renderPage() {
  // 1. Create a fresh client for every request
  const client = new SlotSSRClient();

  // 2. Render the React tree to an HTML string
  //    During this step, every <Slot> registers its content in the client
  const bodyHtml = renderToString(
    <SlotProvider client={client}>
      <Page />
    </SlotProvider>
  );

  // 3. Extract slot content as HTML strings
  //    This is only possible AFTER renderToString finishes
  const headHtml = client.renderToString("head");

  // 4. Build the full HTML document
  return `<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    ${headHtml}
  </head>
  <body>
    <div id="root">${bodyHtml}</div>
  </body>
</html>`;
}

Important: create a new SlotSSRClient() on every request. Reusing the same instance across requests will mix up slot content between users.

Step 4 — Create the Express server

Create src/server.js:

import express from "express";
import { renderPage } from "./render.jsx";

const app = express();

app.get("/", (_req, res) => {
  // Call our render function and send the result as HTML
  const html = renderPage();
  res.setHeader("Content-Type", "text/html");
  res.send(html);
});

app.listen(3000, () => {
  console.log("Server running at http://localhost:3000");
});

Step 5 — Run the server

npx tsx src/server.js

Open http://localhost:3000. You will receive a fully rendered HTML page with:

<title>My SSR Page</title> and the <meta> tag injected into <head> — extracted from the "head" slot.
The page body rendered by React.

How SSR slot extraction works (step by step)

1. Client created          →  client = new SlotSSRClient()
2. renderToString runs     →  React renders the tree
                              <Slot name="head"> registers "<title>…</title>"
                              inside client
3. client.renderToString() →  extracts the registered HTML as a string
4. Template assembled      →  headHtml injected into <head>, bodyHtml into <body>

extracting multiple slots

You can have as many named slots as you need:

// In your component
<Slot name="head">
  <title>My Page</title>
</Slot>

<Slot name="scripts">
  <script src="/app.js" defer></script>
</Slot>

// In your render function
const headHtml    = client.renderToString("head");
const scriptsHtml = client.renderToString("scripts");

return `<!doctype html>
<html>
  <head>${headHtml}</head>
  <body>
    <div id="root">${bodyHtml}</div>
    ${scriptsHtml}
  </body>
</html>`;

Render mode in SSR

renderToString on the client accepts the same mode option as the <Outlet> mode prop:

// Only the highest-priority slot (default)
client.renderToString("head", { mode: "priority" });

// All registered slots concatenated
client.renderToString("head", { mode: "all" });

Quick Reference

	SPA	SSR
Install	`yarn add react-slotx`	`yarn add react-slotx react-dom`
Client class	`SlotClient`	`SlotSSRClient` (from `react-slotx/server`)
Import	`import { SlotClient } from "react-slotx"`	`import { SlotSSRClient } from "react-slotx/server"`
Client lifetime	Once, module-level	Once per request
Extract slot HTML	Not needed (React handles it)	`client.renderToString("slot-name")`
`<Slot>` / `<Outlet>`	Same as SSR	Same as SPA

Resources

Git Repository https://github.com/yracnet/react-slotx/

SPA Example https://github.com/yracnet/react-slotx/tree/main/examples/my-spa-app

SSR Example https://github.com/yracnet/react-slotx/tree/main/examples/my-ssr-app

Package https://www.npmjs.com/package/react-slotx

License

MIT

Create a CRUD with Express API + React GUI using ViteJS

Willyams Yujra — Thu, 13 Mar 2025 04:35:16 +0000

Tutorial: CRUD User API + GUI in ViteJS

Introduction

In this tutorial, you will learn how to create a user database using nedb in a ViteJS application. Additionally, we will set up an Express server to handle requests related to users, such as creating, retrieving, updating, and deleting.

Prerequisites

Before starting, ensure that you have the following:

Basic knowledge of ViteJS, Node.js, and Express.
An existing ViteJS project.
Required dependencies installed.

Project Setup

Step 0: Create a ViteJS Project

First, create a new ViteJS project using the following command:

yarn create vite app-crud

Select the React template when prompted.

Step 1: Install Dependencies

Install the necessary dependencies for the project. We will use nedb for the database and express for the server:

yarn add nedb express vite-plugin-api-routes react-bootstrap

Step 2: Project Structure

Organize your project as follows:

/src
  /server
    /api
      /user
        GET.js
        POST.js
        [userId]
          GET.js
          PUT.js
          DELETE.js
    /db
      index.js
    configure.js
  /client
    /api
      dataProvider.js
      index.js
    /user-admin
      index.jsx
    main.jsx
  index.html
vite.config.js

Execute this comand in the terminal.

# Create base directories
mkdir -p data
mkdir -p src/server/api/user/[userId]
mkdir -p src/server/db
mkdir -p src/client/api
mkdir -p src/client/user-admin

# Create empty files
touch src/server/api/user/GET.js
touch src/server/api/user/POST.js
touch src/server/api/user/[userId]/GET.js
touch src/server/api/user/[userId]/PUT.js
touch src/server/api/user/[userId]/DELETE.js
touch src/server/db/index.js
touch src/server/configure.js
touch src/client/api/dataProvider.js
touch src/client/api/index.js
touch src/client/user-admin/index.jsx
touch src/client/user-admin/table.jsx
touch src/client/user-admin/form.jsx
touch src/client/main.jsx

Backend

Step 3: Database Setup

Create the file src/server/db/index.js to manage the database using nedb:

// src/server/db/index.js
import Datastore from "nedb";

export const users = new Datastore({
  filename: "./data/users.db",
  autoload: true,
});

const db = { users };
export default db;

Step 4: Express Server Setup

Set up the Express server in the file src/server/configure.js:

// src/server/configure.js
import express from "express";

// DEV MODE
export const viteServerBefore = (server, viteServer) => {
  console.log("VITEJS SERVER");
  server.use(express.json());
  server.use(express.urlencoded({ extended: true }));
};

// DEV MODE
export const viteServerAfter = (server, viteServer) => {
  const errorHandler = (err, req, res, next) => {
    if (err instanceof Error) {
      res.writeHead(403, { "Content-Type": "application/json" });
      res.end(JSON.stringify({ error: err.message }));
    } else {
      next(err);
    }
  };
  server.use(errorHandler);
};

// PROD MODE
export const serverBefore = (server) => {
  server.use(express.json());
  server.use(express.urlencoded({ extended: true }));
};

// PROD MODE
export const serverAfter = (server) => {
  const errorHandler = (err, req, res, next) => {
    if (err instanceof Error) {
      res.status(403).json({ error: err.message });
    } else {
      next(err);
    }
  };
  server.use(errorHandler);
};

Step 5: API Routes Setup

Set up the API routes in src/server/api/user. Below are the necessary routes:

GET /api/user

// src/server/api/user/GET.js
import db from "../../db";

const GET_USERS = (req, res, next) => {
  db.users.find({}, (err, users) => {
    if (err) {
      return res.status(500).json({ error: "Error fetching users" });
    }
    res.status(200).json({ data: users });
  });
};

export default GET_USERS;

POST /api/user

// src/server/api/user/POST.js
import db from "../../db";

const CREATE_USER = (req, res, next) => {
  const { name, email } = req.body;
  db.users.insert({ name, email }, (err, user) => {
    if (err) {
      return res.status(500).json({ error: "Error inserting user" });
    }
    res.status(201).json({
      data: user,
      message: "User successfully inserted",
    });
  });
};

export default CREATE_USER;

GET /api/user/:userId

// src/server/api/user/[userId]/GET.js
import db from "../../../db";

const GET_USER = (req, res, next) => {
  const { userId } = req.params;

  db.users.findOne({ _id: userId }, (err, user) => {
    if (err) {
      return res.status(500).json({ error: "Error fetching user" });
    }
    if (!user) {
      return res.status(404).json({ error: "User not found" });
    }
    res.status(200).json({ data: user });
  });
};

export default GET_USER;

PUT /api/user/:userId

// src/server/api/user/[userId]/PUT.js
import db from "../../../db";

const UPDATE_USER = (req, res, next) => {
  const { userId } = req.params;
  const { name, email } = req.body;
  const data = { _id: userId, name, email };
  db.users.update(
    { _id: userId },
    { $set: { name, email } },
    {},
    (err, numReplaced) => {
      if (err) {
        return res.status(500).json({ data, error: "Error updating user" });
      }
      if (numReplaced === 0) {
        return res.status(404).json({ data, error: "User not found" });
      }
      res.status(200).json({ data, message: "User successfully updated" });
    }
  );
};

export default UPDATE_USER;

DELETE /api/user/:userId

// src/server/api/user/[userId]/DELETE.js
import db from "../../../db";

const DELETE_USER = (req, res, next) => {
  const { userId } = req.params;

  db.users.remove({ _id: userId }, {}, (err, numRemoved) => {
    if (err) {
      return res.status(500).json({ error: "Error deleting user" });
    }
    if (numRemoved === 0) {
      return res.status(404).json({ error: "User not found" });
    }
    res.status(200).json({ message: "User successfully deleted" });
  });
};

export default DELETE_USER;

Step 6: Configure vite-plugin-api-routes Plugin

To configure the vite-plugin-api-routes plugin, edit the vite.config.js file:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import apiRoutes from "vite-plugin-api-routes";

export default defineConfig({
  plugins: [
    react(),
    apiRoutes({
      mode: "isolated",
      configure: "src/server/configure.js", // Path to the configuration file
      dirs: [
        {
          dir: "src/server/api", // Path to the APIs
          route: "",
        },
      ],
    }),
  ],
});

Frontend

Step 7: Configure index.html

Make sure your index.html file contains the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CRUD Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/client/main.jsx"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </body>
</html>

Step 8: Configure main.jsx

Create the src/client/main.jsx file:

import { StrictMode, useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { UserAdmin } from "./user-admin";

const Timer = () => {
  const [time, setTime] = useState("");
  useEffect(() => {
    const update = () => {
      const d = new Date();
      setTime(d.toISOString());
    };
    const id = setInterval(update, 1000);
    return () => {
      clearInterval(id);
    };
  }, []);
  return <h4>{time}</h4>;
};

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Timer />
    <UserAdmin />
  </StrictMode>
);

Step 9: Create the Data Provider

Create the src/client/api/dataProvider.js file:

const NOP = (data) => data;

const getQuery = (params = {}) => {
  return Object.entries(params)
    .reduce((acc, [name, value]) => {
      acc.push(`${name}=${value}`);
      return acc;
    }, [])
    .join("&");
};

export const createDataProvider = ({
  url = "/api",
  resource = "",
  assertHeaders = NOP,
  assertOptions = NOP,
} = {}) => {
  const getList = async (params = {}) => {
    const query = getQuery(params);
    const headers = assertHeaders({
      Accept: "application/json",
    });
    const options = assertOptions({ headers });
    try {
      const response = await fetch(`${url}/${resource}?${query}`, options);
      const { data, error = "", message = "" } = await response.json();
      return { data, error, message };
    } catch (error) {
      return { error: error.message || "Error fetching the list" };
    }
  };
  const getOne = async (id, params = {}) => {
    const query = getQuery(params);
    const headers = assertHeaders({
      Accept: "application/json",
    });
    const options = assertOptions({ headers });
    try {
      const response = await fetch(
        `${url}/${resource}/${id}?${query}`,
        options
      );
      const { data, error = "", message = "" } = await response.json();
      return { data, error, message };
    } catch (error) {
      return { error: error.message || "Error fetching the resource" };
    }
  };
  const createOne = async (data) => {
    const headers = assertHeaders({
      Accept: "application/json",
      "Content-Type": "application/json",
    });
    const options = assertOptions({
      headers,
      method: "POST",
      body: JSON.stringify(data),
    });
    try {
      const response = await fetch(`${url}/${resource}`, options);
      const { data, error = "", message = "" } = await response.json();
      return { data, error, message };
    } catch (error) {
      return { error: error.message || "Error creating the resource" };
    }
  };

  const updateOne = async (id, data) => {
    const headers = assertHeaders({
      Accept: "application/json",
      "Content-Type": "application/json",
    });
    const options = assertOptions({
      headers,
      method: "PUT",
      body: JSON.stringify(data),
    });
    try {
      const response = await fetch(`${url}/${resource}/${id}`, options);
      const { data, error = "", message = "" } = await response.json();
      return { data, error, message };
    } catch (error) {
      return { error: error.message || "Error updating the resource" };
    }
  };

  const deleteOne = async (id) => {
    const headers = assertHeaders({
      Accept: "application/json",
    });
    const options = assertOptions({
      headers,
      method: "DELETE",
    });
    try {
      const response = await fetch(`${url}/${resource}/${id}`, options);
      const { data, error = "", message = "" } = await response.json();
      return { data, error, message };
    } catch (error) {
      return { error: error.message || "Error deleting the resource" };
    }
  };

  return { getList, getOne, createOne, updateOne, deleteOne };
};

Create the src/client/api/index.js file:

import { createDataProvider } from "./dataProvider";

export const userDP = createDataProvider({ resource: "user" });

Step 10: Creating the `UserAdmin` Component

Now, create the component src/client/user-admin/index.jsx:

import React, { createContext, useContext, useEffect, useState } from "react";
import {
  Alert,
  Button,
  ButtonGroup,
  Col,
  Container,
  Form,
  InputGroup,
  Row,
  Spinner,
  Table,
} from "react-bootstrap";
import { userDP } from "../api";

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [selectedKey, setSelectedKey] = useState(null);
  const [shouldReload, setShouldReload] = useState(true);

  return (
    <UserContext.Provider
      value={{ selectedKey, setSelectedKey, shouldReload, setShouldReload }}
    >
      {children}
    </UserContext.Provider>
  );
};

const useUserContext = () => useContext(UserContext);

const UserTable = () => {
  const { shouldReload, setShouldReload, setSelectedKey } = useUserContext();
  const [searchQuery, setSearchQuery] = useState("");

  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [message, setMessage] = useState(null);

  const handleEdit = async (userId) => {
    setSelectedKey(userId);
  };

  const handleDelete = async (userId) => {
    const { message, error } = await userDP.deleteOne(userId);
    setData([]);
    setError(error);
    setMessage(message);
    setSelectedKey(null);
    if (!error) {
      handleSearch();
    }
  };

  const handleSearch = async () => {
    const { data, message, error } = await userDP.getList({ q: searchQuery });
    setData(data);
    setError(error);
    setMessage(message);
    setShouldReload(false);
  };

  useEffect(() => {
    if (shouldReload) {
      handleSearch();
    }
  }, [shouldReload]);

  return (
    <div className="mb-3">
      <InputGroup>
        <Form.Control
          type="text"
          placeholder="Buscar..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <Button onClick={handleSearch}>Buscar</Button>
      </InputGroup>
      {shouldReload && <Spinner animation="border" />}
      {error && <Alert variant="danger">{error}</Alert>}
      {message && <Alert variant="success">{message}</Alert>}
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Email</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          {data.map((user) => (
            <tr key={user._id}>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>
                <ButtonGroup>
                  <Button
                    variant="warning"
                    onClick={() => handleEdit(user._id)}
                  >
                    Editar
                  </Button>
                  <Button
                    variant="danger"
                    className="ml-2"
                    onClick={() => handleDelete(user._id)}
                  >
                    Eliminar
                  </Button>
                </ButtonGroup>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

const UserForm = () => {
  const { selectedKey, setSelectedKey, setShouldReload } = useUserContext();

  const [user, setUser] = useState({
    name: "",
    email: "",
  });
  const [error, setError] = useState(null);
  const [message, setMessage] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { data, error, message } = selectedKey
      ? await userDP.updateOne(user._id, user)
      : await userDP.createOne(user);
    setError(error);
    setMessage(message);
    setUser(data);
    setShouldReload(true);
  };

  const handleReset = async () => {
    const {
      data = {
        name: "",
        email: "",
      },
      message,
      error,
    } = selectedKey ? await userDP.getOne(selectedKey) : {};
    setError(error);
    setMessage(message);
    setUser(data);
  };

  const onChangeAttr = (name, value) => {
    setUser((prev) => {
      return { ...prev, [name]: value };
    });
  };

  const handleNew = async () => {
    setError("");
    setMessage("");
    setUser({
      name: "",
      email: "",
    });
    setSelectedKey(null);
  };

  useEffect(() => {
    handleReset();
  }, [selectedKey]);

  return (
    <div>
      <Form.Control
        type="text"
        placeholder="Nombre"
        value={user.name}
        onChange={(e) => onChangeAttr("name", e.target.value)}
      />
      <Form.Control
        type="text"
        placeholder="Email"
        value={user.email}
        onChange={(e) => onChangeAttr("email", e.target.value)}
      />
      <ButtonGroup>
        <Button
          variant="primary"
          type="submit"
          className="mt-2"
          onClick={handleSubmit}
        >
          {user._id ? "Actualizar" : "Crear"}
        </Button>
        <Button variant="secondary" onClick={handleReset} className="mt-2 ml-2">
          Resetear
        </Button>
        <Button variant="warning" onClick={handleNew} className="mt-2 ml-2">
          New
        </Button>
      </ButtonGroup>
      {error && <Alert variant="danger">{error}</Alert>}
      {message && <Alert variant="success">{message}</Alert>}
    </div>
  );
};

export const UserAdmin = () => {
  return (
    <UserProvider>
      <Container>
        <h1>Gestión de Usuarios</h1>
        <Row>
          <Col>
            <UserTable />
          </Col>
          <Col>
            <UserForm />
          </Col>
        </Row>
      </Container>
    </UserProvider>
  );
};

Step 11: Running the Application

To run your application, follow these steps:

Start the Express Server: You need to run the Express backend server in development mode.

In the root of your project, run the following command:

   yarn dev

This will start both the frontend development server (Vite) and the backend Express server, making your API routes available.

Access the Application: Open your browser and go to http://localhost:3000 (or the port displayed in your terminal) to view the user management interface.
Testing the Application:
- You can test CRUD operations for users, such as adding new users, updating, deleting, and listing all users, through the frontend interface.
- The data will be stored in the nedb database, which is a lightweight database file stored locally.

Conclusion

In this tutorial, we built a simple CRUD application for managing users using ViteJS, React, Express, and nedb.

Key Takeaways:

ViteJS provides a fast and efficient development environment for React applications.
Express is a lightweight and flexible framework for building backend APIs.
nedb is a simple, file-based NoSQL database that's great for small projects and quick prototyping.
We learned how to set up API routes for basic CRUD operations like creating, reading, updating, and deleting users.
We also saw how to build a simple user interface to interact with the backend API.

This project can be expanded with more features, such as authentication, form validation, and pagination, to handle larger datasets. It’s a great starting point for building full-stack applications with React and Express.

Further Improvements

To enhance the application, consider implementing the following features:

Authentication: Add login and authentication using sessions or JWT tokens for securing the application.
Validation: Implement form validation both on the client and server-side to ensure data integrity.
Pagination: For large datasets, add pagination in the API to avoid loading all the records at once.
Deployment: Deploy the app to a platform like Heroku, Vercel, or Netlify for production use.

Troubleshooting

If you encounter any issues, here are some tips:

CORS Issues: If you are running your frontend and backend on different ports, ensure you have configured CORS properly in your Express server.
Missing Dependencies: Ensure that all dependencies are correctly installed by running yarn install.
API Routes: Double-check the API routes and ensure that they are being handled correctly. Make sure the vite-plugin-api-routes plugin is correctly configured.

If you get an error message related to the database, check the permissions for the users.db file and make sure that the database file exists in the specified location.

References

ViteJS: https://vitejs.dev
ReactJS: https://reactjs.org
ExpressJS: https://expressjs.com
nedb: https://github.com/louischatriot/nedb
react-bootstrap: https://react-bootstrap.github.io
vite-plugin-api-routes: https://github.com/yracnet/vite-plugin-api-routes

Isolated API Routing in ViteJS with `vite-plugin-api-routes`

Willyams Yujra — Thu, 13 Mar 2025 04:09:40 +0000

Tutorial: Isolated API Routing in ViteJS with `vite-plugin-api-routes`

Introduction

In this tutorial, we will learn how to enhance isolated API routing in ViteJS using the vite-plugin-api-routes plugin. This plugin improves visibility and project structure in Node.js and Express by mapping the directory structure to route rules.

Prerequisites

Before we begin, make sure you have the following:

Basic knowledge of ViteJS, Node.js, and Express.
An existing ViteJS project.
Read the preview tutorial Enhancing API Routing in Vite.js with vite-plugin-api

Step 1: Installation

To install the vite-plugin-api-routes plugin, run the following command:

yarn add vite-plugin-api-routes

Step 2: Configuration

In your ViteJS project, open the vite.config.ts file and add the following code:

import { defineConfig } from "vite";
import apiRoutes from "vite-plugin-api-routes";

export default defineConfig({
  plugins: [
    apiRoutes({
      mode: "isolated",
      // Configuration options go here
    }),
  ],
});

Step 3: Directory Structure

Next, let's create the API directory structure in your project's source folder (src/api). Here's an example structure:

> tree src/api/
src/api/:
└───user
    ├───USE.js
    ├───GET.js
    ├───POST.js
    └───[userId]          // NextJS Format
        ├───GET.js
        ├───PUT.js
        └───DELETE.js

Step 4: Exporting Route Rules

In each API file within the directory structure, you can export the allowed request methods. For example, in the src/api/user/[userId]/DELETE.js file, you can export the default method for DELETE:

///file:src/api/user/[userId]/DELETE.js
export default (req, res, next) => {
  res.send("DELETE REQUEST");
};

Similarly, the file names GET.js or POST.js will be exported as request parameters, such as /user/:userId/, following the Next.js/Remix framework.

Step 5: Add Middlewares

For every route you can export an array for middlewares. This can be used for authentication purposes or any other sort of middleware that you need.

///file:src/api/user/[userId]/DELETE.js
import authMiddleware from "...";

const USER_DELETE = (req, res, next) => {
  res.send("DELETE REQUEST");
};

export default [authMiddleware, USER_DELETE];

Step 6: Configure Aliases

In order to have proper access to the plugin's alias definitions, you need to include /.api/env.d.ts in either src/vite-env.d.ts or in your tsconfig.json. This will allow you to use the alias correctly throughout your project.

Option 1: Add to `vite-env.d.ts`

In your src/vite-env.d.ts, add the following line:

/// <reference path="../.api/env.d.ts" />

Step 7: Run the Server

Now, you can start the server using ViteJS, and the API routes will be automatically generated based on the directory structure and exported route rules.

Conclusion

Congratulations! You have successfully enhanced API routing in your ViteJS project using the vite-plugin-api-routes plugin. This improves project structure and simplifies configuration, making your development process more efficient.

Remember to refer to the plugin's documentation for more advanced configuration options and customization possibilities.

Happy coding!

SSH Connection Using Private Key

Willyams Yujra — Tue, 25 Feb 2025 15:47:56 +0000

SSH Connection Using Private Key (PK)

This tutorial will guide you through three methods to connect to an SSH server using public key authentication. Ensure that the remote server already has the public key configured in its ~/.ssh/authorized_keys file.

Prerequisites

Private Key on your local machine.
Public Key already uploaded to the remote server in the ~/.ssh/authorized_keys file of the user you're authenticating with.

Method 1: Use the Default Private Key (`id_rsa`)

The first method involves using the default private key file, called id_rsa. This is the default behavior of SSH.

Steps:

Ensure that you have your private key in the ~/.ssh/ folder (by default).

   ls ~/.ssh/

If you have a file called id_rsa (or another key file, depending on the type), SSH will use it automatically.

Ensure that the private key has the correct permissions:

   chmod 600 ~/.ssh/id_rsa

Connect to the SSH server without specifying any key (since id_rsa is the default):

   ssh user@server_ip

If the public key is correctly set up on the server, the connection will be successful without requiring a password.

Note: In this case, only one private key (`id_rsa` or another default key type) is supported.

Method 2: Specify a Custom Private Key with `-i`

This method is useful if you prefer to use a private key with a different name or if you have multiple keys for different servers.

Steps:

Locate your private key in any directory you prefer (not necessarily in ~/.ssh/).
Ensure the key file has the correct permissions:

   chmod 600 /path/to/your/private_key

Connect to the SSH server by specifying the private key with the -i option:

   ssh -i /path/to/your/private_key user@server_ip

This method allows you to use any private key file, regardless of its name or location. You just need to make sure to specify the correct file in the ssh command.

Method 3: Use the `~/.ssh/config` File

The ~/.ssh/config file allows you to simplify and automate SSH connections. You can define multiple servers with custom configurations, such as which key to use, the username, and more.

Steps:

Open or create the SSH configuration file:

   nano ~/.ssh/config

Define an entry for the server:

You can specify various options such as the alias for the server, the username on the server, and the private key to use.

Basic example:

   Host myAliasServer
   HostName server_ip
   User root
   IdentityFile ~/.ssh/my_private_key

Host: Alias for the server. You can choose any name to identify the server.
HostName: The IP address or domain name of the server.
User: The username you use to authenticate on the server.
IdentityFile: The path to your private key.

Connect using the alias:

Now, to connect to the server, simply use the alias you defined in the ~/.ssh/config file:

   ssh myAliasServer

SSH will automatically look for the specified key file in IdentityFile and use that key for authentication.

More configurations possible in the `~/.ssh/config` file:

You can add more configurations in the ~/.ssh/config file to further customize your connection. Here are some additional examples:

Use a Custom Port:

If your SSH server is configured on a port other than the default (22), you can specify it:

Host remote_server
HostName server_ip
User user
IdentityFile ~/.ssh/my_private_key
Port 2222

Specify Multiple Keys for Different Servers:

If you have multiple keys for different servers, you can define several entries in the configuration file:

Host aliasRemoteServer1
HostName server_ip1
User user
IdentityFile ~/.ssh/key_server1

Host aliasRemoteServer2
HostName server_ip2
User user
IdentityFile ~/.ssh/key_server2

Configure to Skip Host Key Checking (Not recommended for production):

Host \*
StrictHostKeyChecking no

This configuration disables host key verification, which is useful for automated environments, but not recommended for production due to security implications.

Summary of Connection Methods:

Method 1: Use the Default Private Key (id_rsa):
Connect automatically with the private key located in ~/.ssh/id_rsa.
Method 2: Specify a Custom Private Key with -i:
Use the ssh -i command to specify any private key file.
Method 3: Use the ~/.ssh/config File:
Configure easier SSH connections with an alias, specifying the key file and port.

Troubleshooting

If you experience issues connecting, follow these steps:

Check the public key on the server: Ensure that the corresponding public key is correctly configured in the ~/.ssh/authorized_keys file on the server.
Verify private key permissions:

   chmod 600 ~/.ssh/my_private_key

Check the ~/.ssh/config file configuration: If you're using a config file, make sure the private key path is correctly specified.
Verify the ~/.ssh/authorized_keys file on the server: The public key must match the private key on your local machine exactly.

With these three methods, you should be able to connect to your SSH server without passwords using private keys!

Create an SSR Application with Vite, React, React Query and React Router

Willyams Yujra — Fri, 10 Jan 2025 00:32:20 +0000

Create an SSR Application with Vite, React, React Query and React Router

In this tutorial, we will create a server-side rendered (SSR) application using Vite, React, React Query, React Bootstrap, and React Router. We'll also configure the vite-plugin-ssr-config plugin to handle SSR rendering.

Prerequisites

Before starting, ensure you have:

Node.js installed (version 20 or higher)
Yarn package manager
Basic knowledge of React and vite ecosystem

1. Create the Application

First, create a new Vite project with the React template:

yarn create vite my-ssr-app --template react
cd my-ssr-app

2. Install Required Libraries

Install the following dependencies:

yarn add react-router react-bootstrap @tanstack/react-query react-slotx express
yarn add -D vite-plugin-ssr-config vite-plugin-web-routes

Let's understand what each package does:

react-router-dom: Handles routing in React applications.
- Provides components like Route, Link, and routing hooks
- Enables client-side navigation
- Manages URL parameters and query strings
react-bootstrap: React components that implement Bootstrap's design system.
- Provides pre-built, responsive UI components
- Includes navigation, forms, cards, and other UI elements
- No need to write Bootstrap classes manually
@tanstack/react-query: Powerful data synchronization library for React.
- Manages server state in React applications
- Provides hooks for data fetching, caching, and updates
- Handles loading and error states automatically
react-slotx: Slot-based content management system for SSR and SEO.
- Manages dynamic content injection through slots
- Enables dynamic head management (meta tags, OG tags, etc.)
- Integrates seamlessly with server-side rendering
- Supports client-side slot providers for flexible content placement
vite-plugin-ssr-config: Plugin that enables server-side rendering in Vite applications.
- Handles SSR configuration
- Manages client/server code splitting
vite-plugin-web-routes: File system based routing plugin for Vite.
- Creates routes based on file structure
- Supports dynamic routes
- Integrates with react-router-dom
express: Server.

3. Configure Project Structure

3.1 Move the Index File

Move the /index.html file to /spa/index.html. This separation allows us to maintain both SSR and SPA versions of the application:

mkdir spa
mv index.html spa/

Note: The /spa/index.html file will serve as the entry point for the SPA version, while SSR will use a different entry point.

3.2 Create SSR Directory Structure

Create the necessary directories for SSR:

mkdir -p ssr/pages/posts/[id]

4. Create Application Pages

4.1 Layout Page

Create /ssr/pages/LAYOUT.jsx:

import { Slot } from "react-slotx";
import { Container, Navbar, Nav } from "react-bootstrap";
import { Link, Outlet } from "react-router";

export default function Layout() {
  return (
    <>
      <Slot name="head">
        <title>Vite SSR App Template</title>
      </Slot>
      <Container>
        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="/myapp/">Vite SSR</Navbar.Brand>
          <Navbar.Toggle aria-controls="navbarNav" />
          <Navbar.Collapse id="navbarNav">
            <Nav className="me-auto">
              <Nav.Link to="/" as={Link}>
                Home
              </Nav.Link>
              <Nav.Link to="/posts" as={Link}>
                Posts
              </Nav.Link>
              <Nav.Link href="/myapp/spa">Vite SPA Entry</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </Container>
      <Container>
        <Outlet />
      </Container>
    </>
  );
}

4.2 Home Page

Create /ssr/pages/PAGE.jsx:

import { Slot } from "react-slotx";
import { Container, Button } from "react-bootstrap";
import { Link } from "react-router";

export default function HomePage() {
  return (
    <Container>
      <h1>Welcome to the Vite + React SSR App</h1>
      <Button as={Link} to="/posts">
        Go to Posts
      </Button>
      <Slot name="head">
        <title>Home — Vite SSR App</title>
        <meta name="description" content="Welcome to the Vite + React SSR App" />
      </Slot>
    </Container>
  );
}

4.3 Posts List Page

Create /ssr/pages/posts/PAGE.jsx:

import { Slot } from "react-slotx";
import { Card, Col, Row } from "react-bootstrap";
import { useQuery } from "@tanstack/react-query";
import { Link } from "react-router";

const getPosts = () =>
  fetch("https://jsonplaceholder.typicode.com/posts").then((r) => r.json());

export default function PostsPage() {
  const { data = [] } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });
  return (
    <div>
      <Row>
        {data.map((post) => (
          <Col key={post.id} sm={12} md={6} lg={4} className="mb-4">
            <Card>
              <Card.Body>
                <Card.Title>{post.title}</Card.Title>
                <Card.Text>{post.body}</Card.Text>
                <Card.Link as={Link} to={`/posts/${post.id}`}>
                  Read More
                </Card.Link>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
      <Slot name="head" priority={2}>
        {/* title support only string */}
        <title>{`Post List ${data.length} Rows`}</title>
      </Slot>
    </div>
  );
}

4.4 Single Post Page

Create /ssr/pages/posts/[id]/PAGE.jsx:

import { Slot } from "react-slotx";
import { Card } from "react-bootstrap";
import { useQuery } from "@tanstack/react-query";
import { Link, useParams } from "react-router";

const getPost = (id) =>
  fetch("https://jsonplaceholder.typicode.com/posts/" + id).then((r) =>
    r.json(),
  );

export default function PostPage() {
  const { id } = useParams();
  const { data = [] } = useQuery({
    queryKey: ["posts", id],
    queryFn: () => getPost(id),
  });
  return (
    <Card>
      <Slot name="head" priority={2}>
        {/* title support only string */}
        <title>{`Post #${id}: ${data.title}`}</title>
        <meta name="description" content={data.body} />
        <meta property="og:title" content={data.title} />
      </Slot>
      <Card.Header>{data.title}</Card.Header>
      <Card.Body>
        <Card.Text>{data.body}</Card.Text>
        <Card.Link as={Link} to="/posts">
          Back to Posts
        </Card.Link>
      </Card.Body>
    </Card>
  );
}

4.5 Create the Root Document

Create /ssr/root.jsx to define the root document structure for server-side rendering:

import { LiveReload } from "@ssr/liveReload.jsx";
import { ViteScripts } from "@ssr/viteScripts.jsx";
import { Container, Nav, Navbar } from "react-bootstrap";
import { Outlet as OutletSlot } from "react-slotx";
import { Link, Outlet as OutletRoutes } from "react-router";

export const RootDocument = () => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="vite.svg" type="image/svg" />
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
        />
        <LiveReload />
        <OutletSlot name="head" />
        {/** see .ssr/entryRender.jsx for check was inject slot in SSR */}
      </head>
      <body>
        <OutletRoutes />
        <ViteScripts />
      </body>
    </html>
  );
};

5. Configure Vite

Modify the existing vite.config.js file:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import web from "vite-plugin-web-routes";
import ssr from "vite-plugin-ssr-config";

export default defineConfig({
  base: "/myapp",
  plugins: [
    react(),
    web({
      moduleId: "ssr-pages",
      dirs:[{
        dir:'ssr/pages',
        route:''
      }]
    }),
    ssr({
      rootDocument: './ssr/root.jsx'
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        spa: "spa/index.html", // Include the original React SPA entry point
      },
    },
  },
});

Legacy project

If you use the vite-plugin-pages, you need config the moduleId

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import pages from "vite-plugin-pages";
import ssr from "vite-plugin-ssr-config";

export default defineConfig({
  base: "/myapp",
  plugins: [
    react(),
    // Don't support LAYOUT, Include the Main Layout in root.jsx
    pages({
      moduleId: "ssr-pages",
      routeStyle: "remix",
      dirs: "ssr/pages",
    }),
    ssr({
      rootDocument: "ssr/root.jsx",
    })
  ],
  build: {
    rollupOptions: {
      input: {
        spa: "spa/index.html", // Include the original React SPA entry point
      },
    },
  },
});

7. Development and Production

7.1 Development Server

Run the development server:

yarn dev

Access your application at:

SSR version: http://localhost:5173/myapp
SPA version: http://localhost:5173/myapp/spa

7.2 Production Build

Build the application:

yarn build

You should see output similar to this:

yarn run v1.22.22
$ vite build
vite v6.0.7 building for production...

CLIENT BUILD
vite v4.5.5 building for production...
✓ 396 modules transformed.
dist/client/spa/index.html                0.64 kB │ gzip:  0.35 kB
dist/client/manifest.json                 1.49 kB │ gzip:  0.38 kB
dist/client/assets/react-35ef61ed.svg     4.13 kB │ gzip:  2.05 kB
dist/client/assets/index-a36d8b68.css     1.39 kB │ gzip:  0.72 kB
dist/client/chunks/index-600303c7.js      0.46 kB │ gzip:  0.32 kB
dist/client/chunks/index-ef84de97.js      0.55 kB │ gzip:  0.37 kB
dist/client/assets/spa-dc418d3e.js        0.94 kB │ gzip:  0.50 kB
dist/client/chunks/preload-753c2a40.js    1.70 kB │ gzip:  0.89 kB
dist/client/assets/main-79767691.js       2.74 kB │ gzip:  1.16 kB
dist/client/chunks/vendor-d8646257.js   240.50 kB │ gzip: 75.98 kB
✓ built in 1.33s

SERVER BUILD
vite v4.5.5 building SSR bundle for production...
✓ 13 modules transformed.
dist/bin/index-066b4199.js    0.81 kB
dist/bin/index-b8b66606.js    0.92 kB
dist/bin/virtual-6df6f849.js  0.98 kB
dist/app.js                   1.22 kB
dist/bin/ssr-27500c0d.js      4.52 kB
✓ built in 52ms

✓ 31 modules transformed.
✓ built in 1.92s
Done in 2.43s.

The build will generate:

/dist/
  ├── app.js           # Application runtime
  ├── bin/             # SSR assets
  ├── public/          # SPA-SSR assets
  └── public/spa/      # SPA assets

Enter the 'dist' directory and run the server

cd dist
node app.js

7.3 Sandbox Production Server Configuration

For production deployment, you can configure sanbox server settings using a private directory:

Create /private/package.json for server-specific dependencies

{
  "name": "app",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    // Chech the version
    "@tanstack/react-query": "^5.101.0",
    "express": "^5.2.1",
    "react": "^19.2.6",
    "react-bootstrap": "^2.10.10",
    "react-dom": "^19.2.6",
    "react-router": "^7.17.0",
    "react-slotx": "^0.1.1"
  }
}

Create /private/.env for server configuration:

SERVER_HOST=127.0.0.1
SERVER_PORT=4000

Start the production server for the Sandbox project

cd dist
yarn install
yarn start

Note: The server will be running at: http://127.0.0.1:4000/myapp

Additional Resources

For more detailed information and resources related to vite-plugin-ssr-config, please refer to the following:

npm Package: vite-plugin-ssr-config
GitHub Repository: yracnet/vite-plugin-ssr-config
For a complete working example, visit the GitHub example repository and check the packages/examples/my-ssr-app directory.
For more information about the SSR plugin, refer to the vite-plugin-ssr-config documentation.
For more information about the WEB routes, refer to the vite-plugin-web-routes documentation.
For more information about the SLOT, refer to the react-slotx documentation.

Summary

This tutorial has shown you how to:

Set up a Vite project with SSR capabilities
Integrate React Query, React Bootstrap, and React Router
Create both SSR and SPA versions of your application
Configure development and production environments
Handle server-side rendering of React components

The resulting application provides a solid foundation for building performant, server-rendered React applications while maintaining the option to serve a traditional SPA version when needed.

Setting Up Dual Compilation (SSR + CSR) in ViteJS with vite-plugin-builder

Willyams Yujra — Wed, 08 Jan 2025 21:24:03 +0000

Using `vite-plugin-builder` to Set Up an SSR and CSR Project in Vite

In this tutorial, I will show you how to create a project from scratch with Vite, configure it to build both Server-Side Rendering (SSR) and Client-Side Rendering (CSR) using the vite-plugin-builder plugin, which simplifies the whole process with a single command.

What is `vite-plugin-builder`?

vite-plugin-builder is a plugin for Vite that simplifies the setup and compilation of applications requiring both SSR and CSR in a single project (dual build). With it, you can easily manage both server and client entry points, which is ideal for modern applications that need to process content both on the server and on the client.

Steps to Create the Project and Set Up the Plugin

Below, I'll walk you through setting up Vite and vite-plugin-builder from scratch.

1. Create the Project with Vite

First, create a new Vite project using the following command. We will use React as an example, but you can choose any other framework if you prefer.

# Follow the steps to create a React project with TS or JS.
yarn create vite my-app
cd my-app

2. Install the Required Dependencies

Now, install vite-plugin-builder as a development dependency:

yarn add -D vite-plugin-builder

3. Configure the `vite.config.ts` File

Open the vite.config.ts file and configure the vite-plugin-builder plugin to handle both the server and client. Here’s a basic example:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import builder from "vite-plugin-builder";

// https://vite.dev/config/
export default defineConfig({
  base: "/",
  plugins: [
    react(),
    builder({
      // Server entry point
      serverEntry: "server/main.js",
      // Client entry point (optional as it inherits Vite's config)
      clientEntry: {
        main: "index.html",
      },
    }),
  ],
});

4. Create the `server/main.js` File

The next step is to create the server/main.js file, which will serve as the entry point for your server (SSR). This file will represent your backend entry. Here’s a basic example of what it could contain:

console.log("Server is running...");
// You can create an Express server or configure another server depending on your app stack
// Server-side logic for SSR

You can check out a full example at https://github.com/yracnet/vite-plugin-builder/tree/main/packages/examples

5. Build the Project for Production

Finally, to compile the project and prepare it for production, use:

yarn build

This will generate two directories: one for the client and one for the server.

The expected structure will look like this:

# Server Output
/dist/app.js
/dist/bin/[name]-[hash].[ext]
/dist/assets/[name]-[hash].[ext]

# Client Output
/dist/public/index.html
/dist/public/assets/[name]-[hash].[ext]
/dist/public/chunks/[name]-[hash].[ext]

6. Customizing the Project

According to the plugin documentation, you can customize various aspects, such as the output directories for the server and client, which can be different based on your needs.

Here’s an example of how to customize it:

import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react-swc";
import builder from "vite-plugin-builder";

// https://vite.dev/config/
export default defineConfig({
  base: "/",
  plugins: [
    react(),
    builder({
      // Path to the server entry file
      serverEntry: "server/main.js",
      // (optional) Configuration for the server build
      serverConfig: {
        outDir: "app-sanbox/server", // Server output directory
        privateDir: "private-files", // Directory with private files to copy
        // Define variables for server-side compilation
        define: {
          "BUILD.BASE": '"/"',
          "BUILD.BASE_API": '"/api"',
          // Change to output client directory
          "BUILD.STATIC_DIR": '"../client"',
          "BUILD.SERVER_IP": '"0.0.0.0"',
          "BUILD.SERVER_PORT": "3001",
        },
      },
      // Client configuration
      clientConfig: {
        outDir: "app-sanbox/client",
      },
    }),
  ],
});

This way, the server will use these variables during the final compilation:

import express from "express";
import { api } from "./api";
import { site } from "./site";

// ENV
const { SERVER_IP = BUILD.SERVER_IP, SERVER_PORT = BUILD.SERVER_PORT } =
  process.env;

// APP
const app = express();

// RUN
app.use(BUILD.BASE_API, api);
app.use(BUILD.BASE, site);
app.listen(SERVER_PORT, SERVER_IP, () =>
  console.log(`Server running on port ${SERVER_IP}:${SERVER_PORT}`)
);

You can also configure the copying of static files inside the server directory using the serverConfig.privateDir variable, which will copy files from the private-files folder to /app-sanbox/server.

The private-files directory might include files such as:

# Private directory
/private-files/package.json
/private-files/.env

The expected output for this configuration will look like this:

# Server Output
/app-sanbox/server/app.js
/app-sanbox/server/bin/[name]-[hash].[ext]
/app-sanbox/server/assets/[name]-[hash].[ext]
/app-sanbox/server/package.json
/app-sanbox/server/.env

# Client Output
/app-sanbox/client/index.html
/app-sanbox/client/assets/[name]-[hash].[ext]
/app-sanbox/client/chunks/[name]-[hash].[ext]

Conclusion

With vite-plugin-builder, you can easily set up a project that supports both SSR and CSR in Vite. The plugin simplifies the configuration and build process, allowing you to focus on developing your application without additional complications.

For more details or more complex examples, you can check out the official documentation on GitHub.

That’s it! Now you have a hybrid project with both SSR and CSR running in Vite.

Load Environment Variables using dotenv-local

Willyams Yujra — Wed, 08 Jan 2025 18:22:10 +0000

How to Use `dotenv-local` to Load Environment Variables for Applications and Environments

dotenv-local is a utility library designed to load environment variables with a specific priority order, ideal for managing configurations across different environments like development, production, or testing. In this tutorial, we will show you how to use dotenv-local to load environment variables for different applications and environments.

Installation

To get started, install the library via npm or yarn:

npm install dotenv-local
# or
yarn add dotenv-local

Usage

For a detailed explanation of the available options, refer to the official repository documentation.

Import the Library

Import loadEnv from dotenv-local:

import { loadEnv } from "dotenv-local";

Example for MongoDB Variables

Let's say you have multiple .env files:

.env: Contains generic environment variables.
.env.local: Contains local development overrides.
.env.production: Contains production-specific variables.
.env.production.local: Contains production overrides.

Using dotenv-local, you can ensure that environment variables related to MongoDB are loaded correctly, with the proper overrides depending on your environment.

Basic Usage

Here is a simple example to load all environment variables, without specific prefixes or options:

import { loadEnv } from "dotenv-local";
const envVariables = loadEnv();
console.log(envVariables);

This will load all the environment variables available in the .env files.

Custom Options for MongoDB

Now, let’s load only MongoDB-related environment variables, with custom options:

import { loadEnv } from "dotenv-local";

const { MONGO_URI, MONGO_PASSWORD } = loadEnv({
  envPrefix: "MONGO_",
  envInitial: {
    MONGO_URI: "mongodb://localhost:27017",
    MONGO_PASSWORD: "mongodb://localhost:27017",
  },
  removeEnvPrefix: false,
});
console.log({ MONGO_URI, MONGO_PASSWORD });

This will load only the environment variables that start with MONGO_, and it will not remove the prefix.

Custom Options for Express

Next, let’s load only environment variables related to Express, using a different prefix:

import { loadEnv } from "dotenv-local";

const { HOST, PORT } = loadEnv({
  envPrefix: "DEPLOY_",
  envInitial: {
    DEPLOY_HOST: "127.0.0.1",
    DEPLOY_PORT: "3000",
  },
  removeEnvPrefix: true,
});
console.log({ HOST, PORT });

This will load the variables DEPLOY_HOST and DEPLOY_PORT from your environment files, removing the DEPLOY_ prefix.

Load Multiple Variables for MongoDB and Express

Now, let’s load environment variables related to both MongoDB and Express using different prefixes:

import { loadEnv } from "dotenv-local";

const { MONGO_URI, MONGO_PASSWORD, DEPLOY_HOST, DEPLOY_PORT } = loadEnv({
  envPrefix: ["DEPLOY_", "MONGO_"],
  envInitial: {
    MONGO_URI: "mongodb://localhost:27017",
    MONGO_PASSWORD: "mongodb://localhost:27017",
    DEPLOY_HOST: "127.0.0.1",
    DEPLOY_PORT: "3000",
  },
  removeEnvPrefix: false,
});
console.log({ MONGO_URI, MONGO_PASSWORD, DEPLOY_HOST, DEPLOY_PORT });

This will load the variables DEPLOY_HOST and DEPLOY_PORT from your environment files, as well as MONGO_URI and MONGO_PASSWORD, without removing their prefixes.

Conclusion

Using dotenv-local, you can easily manage environment variables for different applications and environments (e.g., development, production). By defining custom prefixes, initial values, and the loading order, you can ensure that only the relevant variables for MongoDB, Express, or any other service are loaded, making your configuration process clean and efficient.

For more details on available options and how to configure them, check the official documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Use Remix with Vite (vite-plugin-remix)

Willyams Yujra — Thu, 01 Jun 2023 17:17:42 +0000

Change

Please see https://www.npmjs.com/package/vite-plugin-ssr-config as a away to configure SSR on ViteJS

Introduction

In this tutorial, we will explore how to use the vite-plugin-remix plugin to integrate the Remix Framework into a Vite project. By using this plugin, we can leverage the benefits of both Vite and Remix, including web module imports and Hot Module Replacement (HRM) functionalities.

Prerequisites

Before we begin, make sure you have the following:

Basic knowledge of ViteJS and Remix Framework.
An existing Vite project.

Step 1: Installation

First, we need to install the vite-plugin-remix package and its dependencies. Run the following command in your project directory:

yarn add -D vite-plugin-remix

Additionally, install the required Remix dependencies:

yarn add @remix-run/react
yarn add -D @remix-run/dev @remix-run/express @remix-run/server-runtime

Step 2: Configuration

In your Vite project, open the vite.config.ts file and add the following code:

// Vite Remix Plugin Config
import { defineConfig } from "vite";
import { remixPlugin } from "vite-plugin-remix";
export default defineConfig({
  plugins: [
    // Remix Vite Plugin
    remixPlugin({
      appDirectory: "src",
      future: {
         // unstable_dev: false,
         // unstable_postcss: false,
         // unstable_tailwind: false,
         // v2_errorBoundary: false,
         v2_meta: true,
         // v2_normalizeFormMethod: false,
         // v2_routeConvention: false,
       },
    }),
  ],
});

Step 3: Configure Request Handler

To use vite-plugin-remix, we need to configure a request handler. Create a handler.ts file in your ${appDirectory} (e.g., src/handler.ts) and add the following code:

import { createRequestHandler } from "@remix-run/express";
import express from "express";
// Remix Vite
import { build } from "@remix-vite/serverBuild";
let requestHandler = createRequestHandler({
  build,
  mode: "production",
});
export const handler = express();
const onRender = async (req, res, next) => {
  try {
    req.url = req.originalUrl; // Fix for supporting base path deployment on the server
    await requestHandler(req, res, next);
  } catch (error) {
    next(error);
  }
};
handler.get("*", onRender);

Step 4: Configure LiveReload

In your root file (e.g., src/root.tsx), you need to import the LiveReload component from @remix-vite/ui and include it in your HTML structure. Here's an example:

import { LiveReload, Welcome } from "@remix-vite/ui";
import {
  useCatch,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
const Root = () => {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <LiveReload /> {/* Placed at the top of the page */}
        <Meta />
        <Links />
      </head>
      <body>
        <Welcome />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
};
export default Root;

Step 5: Create a basic file route Remix

To create a basic file route, follow these steps:

Open your project's /src/routes directory.
Create a new file named index.jsx (or index.tsx if you're using TypeScript) in the /src/routes directory.
Inside the index.jsx file, add the following code to create a basic page:

import { Link } from "react-router-dom";

export const meta = () => {
 return [
    { title: "My first page" },
    { name: "description", content: "REMIX in VITEJS" },
  ];
};

export default function Index() {
  return (
    <div className="card w-50 m-auto mt-5">
      <div className="card-header">
        <h1>Mollit fugiat aliquip sunt adipisicing qui non veniam deserunt.</h1>
      </div>
      <div className="card-body">
        <p>
          Sunt veniam nisi sunt Lorem tempor exercitation cupidatat est. Esse eu
          ipsum adipisicing fugiat do culpa labore sint aute occaecat. Nulla
          excepteur esse labore exercitation laboris minim proident aliqua
          tempor.
        </p>
        <Link to="./app">App</Link>
      </div>
    </div>
  );
}

Step 6: Run the App

To run your Vite app with Remix integration, use the Vite development server:

yarn run dev

Conclusion

Congratulations! You have successfully integrated the Remix Framework into your ViteJS project using the vite-plugin-remix plugin. This allows you to take advantage of both Vite and Remix features while developing your application.
Feel free to explore the example project provided in the "example" folder for a practical implementation.

Remember to refer to the plugin's documentation for more advanced configuration options and optimizations.
Happy coding!

You can see the full example in: https://github.com/yracnet/vite-plugin-remix

Create API Routing in Express with Vite

Willyams Yujra — Thu, 01 Jun 2023 17:05:07 +0000

Tutorial: Enhancing API Routing in ViteJS with `vite-plugin-api-routes`

Introduction

In this tutorial, we will learn how to enhance API routing in ViteJS using the vite-plugin-api-routes plugin. This plugin improves visibility and project structure in Node.js and Express by mapping the directory structure to route rules.

Prerequisites

Before we begin, make sure you have the following:

Basic knowledge of ViteJS, Node.js, and Express.
An existing ViteJS project.

Step 1: Installation

To install the vite-plugin-api-routes plugin, run the following command:

yarn add vite-plugin-api-routes

Step 2: Configuration

In your ViteJS project, open the vite.config.ts file and add the following code:

import { defineConfig } from "vite";
import apiRoutes from "vite-plugin-api-routes";

export default defineConfig({
  plugins: [
    apiRoutes({
      // Configuration options go here
    }),
  ],
});

Step 3: Directory Structure

Next, let's create the API directory structure in your project's source folder (src/api). Here's an example structure:

> tree src/api/
src/api/:
├───v1
│   │   auth.js
│   │   index.js
│   ├───auth
│   │       login.js
│   │       status.js
│   └───user
│           $userId.js    // Remix Format
│           index.js
└───v2
    │   user.js
    ├───auth
    │       login.js
    │       status.js
    └───user
            index.js
            [userId].js    // NextJS Format

Step 4: Exporting Route Rules

In each API file within the directory structure, you can export the allowed request methods. For example, in the src/api/v1/user/$userId.js file, you can export the DELETE and PUT methods:

///file:src/api/v1/user/$userId.js
export const DELETE = (req, res, next) => {
  res.send("DELETE REQUEST");
};
export const PUT = async (req, res, next) => {
  res.send("PUT REQUEST");
};

Similarly, the file names [userId].js or $userId.js will be exported as request parameters, such as /user/:userId, following the Next.js/Remix framework.

Step 5: Add Middlewares

For every route you can export an array for middlewares. This can be used for authentication purposes or any other sort of middleware that you need.

//file:src/api/v1/user/$userId.js

import authMiddleware from '...';
// or
function authMiddleware(req, res, next) => {
  // ...
}

export default [
  authMiddleware
];

Step 6: Configure Aliases

Option 1: Add to `vite-env.d.ts`

In your src/vite-env.d.ts, add the following line:

/// <reference path="../.api/env.d.ts" />

Step 7: Run the Server

Now, you can start the server using ViteJS, and the API routes will be automatically generated based on the directory structure and exported route rules.

Conclusion

Remember to refer to the plugin's documentation for more advanced configuration options and customization possibilities.

Happy coding!

You see the examples code in: https://github.com/yracnet/vite-plugin-api-routes/tree/main/packages/examples

vite-plugin-remix

Willyams Yujra — Thu, 01 Jun 2023 16:56:19 +0000

I wanted to use the Remix Framework within the ViteJS environment, while keeping the web module imports and HRM (Hot Module Replacement) functionalities. RemixJS comes with a custom server, but this plugin allows you to use the Vite server during development.

https://github.com/yracnet/vite-plugin-remix

DEV Community: Willyams Yujra

react-slotx

react-slotx — Step-by-Step Tutorial

What is react-slotx?

Installation

Part 1 — SPA with Vite

Step 1 — Create a new Vite project

Step 2 — Clean up unused Vite template files

Linux

Windows

Step 3 — Create the SlotClient (once, at the app root)

Step 4 — Create a Layout with an Outlet

Step 5 — Register content with Slot inside a Page

Step 6 — Wire everything together in App

Step 7 — Run the app

How it works (diagram)

Bonus — priority and multiple Slots

Part 2 — SSR with Express

Step 1 — Create the project

Step 2 — Create your React component

Step 3 — Create the render function

Step 4 — Create the Express server

Step 5 — Run the server

How SSR slot extraction works (step by step)

extracting multiple slots

Render mode in SSR

Quick Reference

Resources

License

Create a CRUD with Express API + React GUI using ViteJS

Tutorial: CRUD User API + GUI in ViteJS

Introduction

Prerequisites

Project Setup

Step 0: Create a ViteJS Project

Step 1: Install Dependencies

Step 2: Project Structure

Backend

Step 3: Database Setup

Step 4: Express Server Setup

Step 5: API Routes Setup

GET /api/user

POST /api/user

GET /api/user/:userId

PUT /api/user/:userId

DELETE /api/user/:userId

Step 6: Configure vite-plugin-api-routes Plugin

Frontend

Step 7: Configure index.html

Step 8: Configure main.jsx

Step 9: Create the Data Provider

Step 10: Creating the UserAdmin Component

Step 11: Running the Application

Conclusion

Further Improvements

Troubleshooting

References

Isolated API Routing in ViteJS with `vite-plugin-api-routes`

Tutorial: Isolated API Routing in ViteJS with vite-plugin-api-routes

Introduction

Prerequisites

Step 1: Installation

Step 2: Configuration

Step 3: Directory Structure

Step 4: Exporting Route Rules

Step 5: Add Middlewares

Step 6: Configure Aliases

Option 1: Add to vite-env.d.ts

Step 7: Run the Server

Conclusion

SSH Connection Using Private Key

SSH Connection Using Private Key (PK)

Prerequisites

Method 1: Use the Default Private Key (id_rsa)

Steps:

Note: In this case, only one private key (id_rsa or another default key type) is supported.

Method 2: Specify a Custom Private Key with -i

Steps:

Method 3: Use the ~/.ssh/config File

Steps:

Step 10: Creating the `UserAdmin` Component

Tutorial: Isolated API Routing in ViteJS with `vite-plugin-api-routes`

Option 1: Add to `vite-env.d.ts`

Method 1: Use the Default Private Key (`id_rsa`)

Note: In this case, only one private key (`id_rsa` or another default key type) is supported.

Method 2: Specify a Custom Private Key with `-i`

Method 3: Use the `~/.ssh/config` File

More configurations possible in the `~/.ssh/config` file:

Using `vite-plugin-builder` to Set Up an SSR and CSR Project in Vite

What is `vite-plugin-builder`?

3. Configure the `vite.config.ts` File

4. Create the `server/main.js` File

How to Use `dotenv-local` to Load Environment Variables for Applications and Environments

Tutorial: Enhancing API Routing in ViteJS with `vite-plugin-api-routes`