Forem: herudi

Single-Port between Backend and Frontend.

herudi — Sat, 25 Oct 2025 05:08:01 +0000

herudi

Oct 25 '25

React + Express + Vite. Same Port in Dev or Prod.

#react #express #vite

Comments 2

3 min read

React + Express + Vite. Same Port in Dev or Prod.

herudi — Sat, 25 Oct 2025 05:04:15 +0000

Developing a full-stack Single Page Application (SPA) often means juggling two separate servers — one for the frontend and one for the backend — running on different ports. This leads to extra configuration, CORS headaches, and a fragmented development experience. Enter vite-spa-server: a powerful Vite plugin that unifies your frontend and backend on a single port.

One Port, One Fight!

Designed for the Single Fighter Developer, vite-spa-server lets you build modern full-stack apps with ease, using React + Express (or any other combo) — all served from the same port during development and production.

Why Use `vite-spa-server`?

Problem	Solution with `vite-spa-server`
Two ports (`3000` for Vite, `5000` for API)	Single port (e.g., `3000`) for both
CORS configuration	Not needed — same origin
Proxy setup in `vite.config.ts`	Eliminated
HMR only for frontend	Full HMR support while backend runs
Complex production deployment	Simple `node dist`

Features

Single-Port Architecture – Frontend and backend share the same port.
Type Sharing – Easily share TypeScript types between client and server.
Framework Agnostic Backend – Works with Express, Hono, NHttp, etc.
HMR for Frontend – Instant reloads during development.
Zero-config Integration – Works with React, Vue, Svelte, etc.
Multiple Apps via area – Serve different SPAs from subpaths (/admin, /app, etc.)
Simple Production Build – Just run node dist

Getting Started: React + Express in One Port

Let’s build a minimal full-stack app with React as the frontend and Express as the backend — all on port 3000.

Step 1: Create a Vite + React Project

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Step 2: Install Dependencies

npm install express
npm install vite-spa-server @types/express --save-dev

Step 3: Configure `vite.config.ts`

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import spaServer from "vite-spa-server";

export default defineConfig({
  plugins: [
    react(),
    spaServer({
      entry: "./src/server.ts",
      port: 3000,
      serverType: "express",
    }),
  ],
});

Step 4: Create Backend Server

// ./src/server.ts
import express from "express";

const app = express();

// API route — accessible at http://localhost:3000/api/user
app.get("/api/user", (req, res) => {
  res.json({
    name: "John",
    message: "Hello from the backend!",
  });
});

export default app;

Step 5: Use the API in React

// src/App.tsx
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then(setData);
  }, []);

  return (
    <div>
      <h1>Vite + React + Express (Single Port!)</h1>
      {data ? (
        <p>
          {data.message} – <strong>{data.name}</strong>
        </p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

Step 6: Run Development Server

npm run dev

Open http://localhost:3000 — your React app loads, and the /api/user endpoint is served from the same port!

Production Build

npm run build
node dist

The built server runs your Express backend and serves the static React files — no extra reverse proxy needed.

Advanced: Handle 404 for API Routes

Avoid fallback to index.html for unknown API routes:

app.use((req, res, next) => {
  if (req.url.startsWith("/api")) {
    res.header("spa-server", "false").status(404);
    return res.send({ error: "API endpoint not found" });
  }
  next();
});

Multiple Apps with `area`

Want to serve /admin, /dashboard, etc., as separate SPAs?

spaServer({
  port: 3000,
  serverType: "express",
  area: {
    "/": "./index.html",
    "/admin": "./admin.html",
    "/sign": "./sign.html",
  },
})

Each path serves its own HTML entry point — perfect for micro-frontends or multi-app dashboards.

Configuration Options

Option	Description	Default
`port`	Server port	—
`serverType`	Backend framework (`express`, `hono`, etc.)	—
`entry`	Backend entry file	`./src/server.ts`
`runtime`	Runtime (`node`)	`node`
`area`	Map paths to HTML files	—
`routerType`	Frontend router (`browser`, `hash`, `none`)	—

License

MIT License

Conclusion

With vite-spa-server, you no longer need to:

Run two dev servers
Configure CORS
Set up proxies
Deploy separate services

Just one port, one process, one command.

Perfect for solo developers, prototypes, or full production apps.

GitHub: https://github.com/herudi/vite-spa-server

NPM: npm i vite-spa-server -D

One Port. One Fight. Win.

Deno React SSR with React Router Dom

herudi — Mon, 24 May 2021 08:00:14 +0000

Build simple website with deno + react + react-router-dom and support server side rendering. no webpack or babel.

lets the code:

Make dependencies for server ./deps-server.ts

this is dependencies for server app.

export { Dero } from "https://deno.land/x/dero@0.2.7/mod.ts";
export type { HttpRequest, HttpResponse, NextFunction } from "https://deno.land/x/dero@0.2.7/mod.ts";
export { default as ReactDOMServer } from "https://dev.jspm.io/react-dom@17.0.2/server";

Make dependencies for client ./deps-client.ts

this is dependencies for client side such as react.

// maybe you can put @deno-types. example use anywhere :)
import ReactClient from "https://dev.jspm.io/react@17.0.2";
import ReactDOMClient from "https://dev.jspm.io/react-dom@17.0.2";
import ReactRouterDomClient from "https://dev.jspm.io/react-router-dom@5.2.0";

const React = ReactClient as any;
const ReactDOM = ReactDOMClient as any;
const ReactRouterDom = ReactRouterDomClient as any;

declare global {
    namespace JSX {
        interface IntrinsicElements {
            [k: string]: any;
        }
    }
}

export { React, ReactDOM, ReactRouterDom };

next, make folder page and create file Home.tsx and About.tsx. for example i'm create 2 page.

Make page Home ./page/Home.tsx

import { React } from "./../deps-client.ts";

export const Home = ({ initData }: any) => {
    return (
        <h1>Welcome Home</h1>
    )
}

Make page About ./page/About.tsx

import { React } from "./../deps-client.ts";

export const About = ({ initData }: any) => {
    return (
        <h1>Welcome About</h1>
    )
}

next, make the router

Make router ./routes.tsx

import { Home } from "./page/Home.tsx";
import { About } from "./page/About.tsx";

export const routes = [
    {
        path: '/',
        exact: true,
        component: Home,
        seo: {
            title: 'Welcome to home',
            description: 'This description sample for page Home'
        }
    },
    {
        path: '/about',
        component: About,
        seo: {
            title: 'Welcome to about',
            description: 'This description sample for page about'
        }
    }
]

next, make the component Navigation Bar

Make component Navigation Bar ./component/Navbar.tsx

import { React, ReactRouterDom } from "./../deps-client.ts";

const { Link } = ReactRouterDom;

export const Navbar = () => {
    return (
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
            </ul>
        </nav>
    )
}

next, create app

Make app ./app.tsx

import { React, ReactRouterDom } from "./deps-client.ts";
import { routes } from './routes.tsx';
import { Navbar } from './component/Navbar.tsx';

const { Switch, Route } = ReactRouterDom;

export const App = ({ isServer, Component, initData }: any) => {

    if (isServer) return (
        <>
            <Navbar />
            <Component initData={initData} />
        </>
    )

    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <Navbar />
            <Switch>
                {routes.map((el, x) => {
                    return <Route
                        {...el}
                        key={x}
                        component={(props: any) => {
                            let _initData;
                            if ((window as any).__INITIAL_DATA__) {
                                _initData = initData;
                                delete (window as any).__INITIAL_DATA__;
                            }
                            if (el.seo) {
                                //@ts-ignore
                                document.title = el.seo.title;
                            }
                            return <el.component {...props} initData={_initData} />;
                        }}
                    />
                })}
            </Switch>
        </React.Suspense>
    );
}

create client.tsx same as index.(js|ts) in CRA.

Make client.tsx ./client.tsx

import { React, ReactDOM, ReactRouterDom } from "./deps-client.ts";
import { App } from './app.tsx';

const { BrowserRouter } = ReactRouterDom;

// need hydrate when SSR
ReactDOM.hydrate(
    <BrowserRouter>
        <App initData={(window as any).__INITIAL_DATA__} />
    </BrowserRouter>,
    //@ts-ignore
    document.getElementById('root')
);

next create the server side.

Make server.tsx ./server.tsx

import { Dero, ReactDOMServer } from "./deps-server.ts";
import { React, ReactRouterDom } from "./deps-client.ts";
import { routes } from './routes.tsx';
import { App } from './app.tsx';

const { StaticRouter, matchPath } = ReactRouterDom;

const { files } = await Deno.emit(
    "./client.tsx",
    {
        check: false,
        bundle: "module",
        compilerOptions: {
            lib: ["dom", "dom.iterable", "esnext"],
        }
    },
);

const BROWSER_PATH = '/dev-client.js';

class Server extends Dero {
    constructor(){
        super();
        // build middleware and mutate body for react
        this.use((req, res, next) => {
            res.return.push((body) => {
                if (React.isValidElement(body)) {
                    res.type("text/html");
                    const content = (ReactDOMServer as any).renderToString(body);
                    const seo = res.locals.seo;
                    return `
                        <!doctype html>
                        <html>
                        <head>
                            <title>${seo.title}</title>
                            <meta name="description" content="${seo.description}">
                            <script>window.__INITIAL_DATA__ = ${JSON.stringify(seo)};</script>
                        </head>
                        <body>
                            <div id="root">${content}</div>
                            <script src="${BROWSER_PATH}" defer></script>
                        </body>
                        </html>
                    `;
                }
                return;
            });
            next();
        });
        // get the client js
        this.get(BROWSER_PATH, (req, res) => {
            res.type('application/javascript').body(files["deno:///bundle.js"]);
        });
        // exact for all route
        this.get("/*", (req, res) => {
            const route = routes.find(r => matchPath(req.url, r));
            if (route) {
                res.locals.seo = route.seo;
                return (
                    <StaticRouter location={req.url}>
                        <App isServer={true} Component={route.component} initData={{ seo: route.seo }} />
                    </StaticRouter>
                );
            }
            res.status(404).body("Not Found");
        });
    }
}
await new Server().listen(3000, () => console.log('> Running on http://localhost:3000/'));

Now, run server

deno run --allow-read --allow-net --unstable server.tsx

I hope the code above can help you in finding Deno React SSR
Demo => https://deno-react-ssr.herokuapp.com
Repo => https://github.com/herudi/deno-react-ssr-movies

Thanks.. very grateful if you give a star or fork.

Deno Rest APIs CRUD mysql

herudi — Thu, 08 Apr 2021 08:27:40 +0000

Hi everyone, my name is Herudi, to day i'm build CRUD mysql with Deno. CRUD is a Create Read Update Delete. CRUD is a basic code for programmer to learn it. Deno is a secure runtime for JavaScript and TypeScript. Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. I also build a Dero is a Fast micro framework for Deno. i also love a simple code. and let's go write the code.

Create database and items table.

CREATE DATABASE IF NOT EXISTS `dero-crud`;
USE `dero-crud`;
CREATE TABLE IF NOT EXISTS `items` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `name` VARCHAR(100) NOT NULL,
    `brand` VARCHAR(100) NOT NULL,
    `price` INT(11) NOT NULL,
    PRIMARY KEY (`id`)
)
ENGINE=InnoDB DEFAULT CHARSET=latin1;

Rest APIs (route)

// find all items
GET /api/v1/items

// search items with query params text
GET /api/v1/items/search?text=blabla

// find by items id
GET /api/v1/items/:id

// save items
POST /api/v1/items

// update items by id
PUT /api/v1/items/:id

// delete by items id
DELETE /api/v1/items/:id

Make the simple mysql connection client.ts.

import { Client } from "https://deno.land/x/mysql@v2.8.0/mod.ts";

export default await new Client().connect({
    hostname: "127.0.0.1",
    username: "root",
    db: "dero-crud",
    password: "secret"
});

Full doc mysql for deno => https://github.com/denodrivers/mysql

Make the class items for validator items/items.ts.

see doc class-validator

import { IsNumber, IsString } from "https://cdn.skypack.dev/class-validator?dts";

export default class Items {
    @IsString()
    name!: string;

    @IsString()
    brand!: string;

    @IsNumber()
    price!: number;
}

Make the service for Rest APIs items/items_service.ts.

import client from "./../client.ts";
import Items from "./items.ts";

export default class ItemsService {

    async findAll() {
        const sql = `select * from items`;
        const { rows } = await client.execute(sql);
        return {
            status: 200,
            data: rows
        }
    }

    async findById(id: number) {
        const sql = `select * from items where id = ?`;
        const { rows } = await client.execute(sql, [id]);
        const data = rows && rows.length ? rows[0] : null;
        return {
            status: 200,
            data
        }
    }

    async search(text: string | null | undefined) {
        if (!text) {
            throw new Error("query parameter text is required");
        }
        const sql = `select * from items where name like '%${text}%' or brand like '%${text}%'`;
        const { rows } = await client.execute(sql);
        return {
            status: 200,
            data: rows
        }
    }

    async save(body: Items) {
        const sql = `insert into items(name, brand, price) values(?, ?, ?)`;
        await client.execute(sql, [
            body.name,
            body.brand,
            body.price
        ]);
        return {
            status: 201,
            messsage: "Success save items"
        };
    }

    async update(id: number, body: Items) {
        const sql = `update items set name = ?, brand = ?, price = ? where id = ?`;
        await client.execute(sql, [
            body.name,
            body.brand,
            body.price,
            id
        ]);
        return {
            status: 200,
            messsage: "Success update items"
        }
    }

    async destroy(id: number) {
        const sql = `delete from items where id = ?`;
        await client.execute(sql, [id]);
        return {
            status: 200,
            messsage: "Success delete items"
        }
    }
}

Make the controller for Rest APIs items/items_controller.ts.

import { 
    Get,
    Post,
    Put,
    Delete,
    Status,
    Controller,
    BaseController,
    Validate,
    Inject
} from "https://deno.land/x/dero@1.1.3/mod.ts";
import ItemsService from "./items_service.ts";
import Items from "./items.ts";

@Controller("/items")
class ItemsController extends BaseController {

    @Inject(ItemsService)
    private readonly itemsService!: ItemsService;

    @Get()
    findAll() {
        return this.itemsService.findAll();
    }

    @Get("/search")
    search() {
        const { text } = this.request.query;
        return this.itemsService.search(text);
    }

    @Get("/:id")
    findById() {
        const { id } = this.request.params;
        return this.itemsService.findById(Number(id));
    }

    @Status(201)
    @Validate(Items)
    @Post()
    save() {
        const body = this.request.parsedBody as Items;
        return this.itemsService.save(body);
    }

    @Validate(Items)
    @Put("/:id")
    update() {
        const { id } = this.request.params;
        const body = this.request.parsedBody as Items;
        return this.itemsService.update(Number(id), body);
    }

    @Delete("/:id")
    destroy() {
        const { id } = this.request.params;
        return this.itemsService.destroy(Number(id));
    }
}

export default ItemsController;

Now, create app.ts

import { Dero } from "https://deno.land/x/dero@1.1.3/mod.ts";
import { validateOrReject } from "https://cdn.skypack.dev/class-validator?dts";
import ItemsController from './items/items_controller.ts';
import client from './client.ts';

class App extends Dero {
    constructor() {
        super({
            // register class validator
            classValidator: validateOrReject
        });

        // register class controller with prefix /api/v1
        this.use({ 
            prefix: "/api/v1", 
            class: [
                ItemsController
            ] 
        });
    }

    public async start(port: number) {
        await this.listen(port, async (err) => {
            if (err) {
                console.log(err);
                await client.close();
            }
            console.log("> Running on port " + port);
        })
    }
}

await new App().start(3000);

Now, you can run app.ts :

deno run --allow-net --allow-read app.ts

I hope the code above can help you in finding crud deno mysql.
full source code https://github.com/herudi/dero/tree/main/examples/with_crud_mysql

very grateful if you give a star or fork.

Forem: herudi

Single-Port between Backend and Frontend.

React + Express + Vite. Same Port in Dev or Prod.

React + Express + Vite. Same Port in Dev or Prod.

Why Use vite-spa-server?

Features

Getting Started: React + Express in One Port

Step 1: Create a Vite + React Project

Step 2: Install Dependencies

Step 3: Configure vite.config.ts

Step 4: Create Backend Server

Step 5: Use the API in React

Step 6: Run Development Server

Production Build

Advanced: Handle 404 for API Routes

Multiple Apps with area

Configuration Options

License

Conclusion

Deno React SSR with React Router Dom

Make dependencies for server ./deps-server.ts

Make dependencies for client ./deps-client.ts

Make page Home ./page/Home.tsx

Make page About ./page/About.tsx

Make router ./routes.tsx

Make component Navigation Bar ./component/Navbar.tsx

Make app ./app.tsx

Make client.tsx ./client.tsx

Make server.tsx ./server.tsx

Deno Rest APIs CRUD mysql

Create database and items table.

Rest APIs (route)

Make the simple mysql connection client.ts.

Make the class items for validator items/items.ts.

Make the service for Rest APIs items/items_service.ts.

Make the controller for Rest APIs items/items_controller.ts.

Now, create app.ts

Why Use `vite-spa-server`?

Step 3: Configure `vite.config.ts`

Multiple Apps with `area`