New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

express-inertia

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

express-inertia

A lightweight Express.js middleware/adapter for Inertia.js that lets you build modern single-page applications with server-side rendering.

latest

Source

npm

Version: 2.0.0

Version published: 5 months ago

Weekly downloads: 4

Maintainers: 1

Weekly downloads

Created: 7 months ago

Source

express-inertia

A lightweight Express.js middleware/adapter for Inertia.js that lets you build modern single-page applications with server-side rendering. It allows seamless integration of React, Vue, or Svelte components while preserving the simplicity of classic apps.

Demo

Check out a live demo of express-inertia in action: Pingcrm

Features

Server-Side Rendering (SSR) support for improved SEO and performance
Vite integration for fast development and optimized builds
Framework agnostic - works with React, Vue, or Svelte
Lightweight Express middleware with minimal configuration
TypeScript support with full type definitions

Quick Start

The fastest way to get started is using our official templates:

# For React
npx degit mahendra7041/express-inertia/examples/react my-inertia-app

# For Vue
npx degit mahendra7041/express-inertia/examples/vue my-inertia-app

# For Svelte
npx degit mahendra7041/express-inertia/examples/svelte my-inertia-app

cd my-inertia-app
npm install
npm run dev

Setup Guide

Prerequisites

Node.js 18 or higher
Express.js
Vite

Step 1: Create a Vite Project

First, create a new project using Vite with your preferred framework:

# For React (used in this guide)
npm create vite@latest my-inertia-app -- --template react

# For Vue
npm create vite@latest my-inertia-app -- --template vue

# For Svelte
npm create vite@latest my-inertia-app -- --template svelte

cd my-inertia-app

Step 2: Install Required Packages

Install the necessary dependencies for Express and Inertia:

# For React (used in this guide)
npm install express-inertia express express-session @inertiajs/react

# For Vue
npm install express-inertia express express-session @inertiajs/vue3

# For Svelte
npm install express-inertia express express-session @inertiajs/svelte

# Additional dev dependencies
npm install -D nodemon

Step 3: Project Structure

Set up your project structure as follows:

my-inertia-app/
├── build/                 # Generated build artifacts
├── public/                # Static assets
├── src/
│   ├── pages/            # Inertia page components
│   ├── assets/           # Styles, images, etc.
│   ├── main.jsx          # Client entry point (or .js/.vue/.svelte)
│   └── ssr.jsx           # SSR entry point (optional)
├── index.html            # HTML template
├── vite.config.js        # Vite configuration
├── server.js             # Express server
└── package.json

Step 4: Update HTML Template (`index.html`)

<!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" />
    <!-- @inertiaHead -->
  </head>
  <body
    class="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"
  >
    <!-- @inertia -->
    <script type="module" src="/src/main.Jsx"></script>
  </body>
</html>

Step 5: Express Server Setup (`server.js`)

import express from "express";
import session from "express-session";
import inertia from "express-inertia";

async function bootstrap() {
  const app = express();
  const PORT = process.env.PORT || 3000;

  // Serve static assets (only in production)
  if (process.env.NODE_ENV === "production") {
    app.use(express.static("build/client", { index: false }));
  }

  // Session middleware (required for flash messages)
  app.use(
    session({
      secret: process.env.SESSION_SECRET || "secret",
      resave: false,
      saveUninitialized: false,
      cookie: {
        secure: process.env.NODE_ENV === "production",
      },
    })
  );

  // Inertia middleware setup
  app.use(
    await inertia({
      rootElementId: "root", // DOM element ID for Inertia app (default: app)
      assetsVersion: "v1", // change to bust client-side cache
      ssrEnabled: true, // enable SSR
      ssrEntrypoint: "src/ssr.jsx", // entry file for SSR in dev
      ssrBuildEntrypoint: "build/ssr/ssr.js", // built SSR file for production
    })
  );

  // Example route
  app.get("/", (req, res) => {
    res.inertia.render("home");
  });

  app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
  });
}

bootstrap().catch(console.error);

Step 6: Update Package.json Scripts

{
  "scripts": {
    "dev": "nodemon server.js",
    "start": "cross-env NODE_ENV=production node server.js",
    "build": "npm run build:ssr && npm run build:client",
    "build:client": "vite build --outDir build/client",
    "build:ssr": "vite build --outDir build/ssr --ssr src/ssr.jsx"
  }
}

Step 7: Client Entry Point (src/main.jsx)

Update your framework's main entry point accordingly. For more details, visit Inertia.js Client-Side Setup:

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";

createInertiaApp({
  id: "root",
  resolve: (name) => {
    const pages = import.meta.glob("./pages/**/*.jsx", { eager: true });

    return pages[`./pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Step 8: SSR Entry Point (src/ssr.jsx) - Optional

Add Server-Side Rendering support for improved SEO and performance.

import ReactDOMServer from "react-dom/server";
import { createInertiaApp } from "@inertiajs/react";

export default function render(page) {
  return createInertiaApp({
    id: "root",
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => {
      const pages = import.meta.glob("./pages/**/*.jsx", { eager: true });

      return pages[`./pages/${name}.jsx`];
    },
    setup: ({ App, props }) => <App {...props} />,
  });
}

Configuration

Middleware Options

Option	Type	Default	Description
`rootElementId`	`string?`	`"app"`	DOM element ID where the Inertia app mounts
`assetsVersion`	`string?`	`"v1"`	Version string used for inertia
`encryptHistory`	`boolean?`	`true`	Encrypts the Inertia history state for security
`indexEntrypoint`	`string?`	`"index.html"`	Path to your base HTML template (used in dev mode)
`indexBuildEntrypoint`	`string?`	`"build/client/index.html"`	Path to the built client HTML entrypoint (used in production)
`ssrEnabled`	`boolean?`	`false`	Enables/disables server-side rendering (SSR)
`ssrEntrypoint`	`string?`	Required if `ssrEnabled: true`	Path to your SSR entry file (used in development)
`ssrBuildEntrypoint`	`string?`	Required if `ssrEnabled: true`	Path to the built SSR bundle (used in production)
`vite`	`ViteResolveConfig?`	`{ server: { middlewareMode: true }, appType: "custom" }`	Passes custom options to the Vite dev server

API Reference

`inertia(config?, vite?)`

Initializes and returns the Express middleware.

app.use(await inertia(config));

`res.inertia.render(component, props?)`

Renders an Inertia page component.

app.get('/users', (req, res) => {
  const users = await User.findAll();

  res.inertia.render('user/index', {
    users: users,
    page: req.query.page || 1
  });
});

`res.inertia.share(data)`

Shares data with the current and subsequent requests.

app.use((req, res, next) => {
  res.inertia.share({
    auth: {
      user: req.user,
      permissions: req.user?.permissions,
    },
  });
  next();
});

`res.inertia.redirect(urlOrStatus, url?)`

Redirects the user to a different location while preserving Inertia’s client-side navigation.

app.get("/home", (req, res) => {
  // Redirect with default status (302 Found)
  res.inertia.redirect("/dashboard");

  // Redirect with explicit status
  res.inertia.redirect(301, "/new-home");
});

Examples

Shared Data Example

// Middleware to share data across all requests
app.use((req, res, next) => {
  res.inertia.share({
    auth: {
      user: req.user,
      isAdmin: req.user?.role === "admin",
    },
  });
  next();
});

Form Handling Example

app.post("/contact", async (req, res) => {
  try {
    await Contact.create(req.body);
    req.flash("success", "Message sent successfully!");
    res.inertia.redirect("/contact");
  } catch (error) {
    req.flash("error", "Failed to send message");
    res.inertia.redirect("/contact");
  }
});

Here’s an updated Contributing section with a clear note about discussing breaking changes before implementation:

Contributing

We welcome contributions! Please feel free to submit issues, feature requests, or pull requests.

Guidelines

Fork the repository
Create your feature branch:
```
git checkout -b feat/amazing-feature
```
Commit your changes with a descriptive message:
```
git commit -m "feat: add amazing feature"
```
Push to your branch:
```
git push origin feat/amazing-feature
```
Open a Pull Request

Breaking Changes

If your contribution introduces a breaking change (e.g. changes to configuration options, API methods, or default behavior), please open an issue or discussion first before submitting a PR. This ensures we can:

Discuss the impact on existing users
Decide if a major version bump is required
Provide a clear migration path in the documentation

License

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

Resources

Keywords

express-inertiajs-adapter

FAQs

What is express-inertia?

Is express-inertia popular?

Is express-inertia well maintained?

Package last updated on 05 Nov 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

express-inertia

express-inertia

Demo

Features

Quick Start

Setup Guide

Prerequisites

Step 1: Create a Vite Project

Step 2: Install Required Packages

Step 3: Project Structure

Step 4: Update HTML Template (index.html)

Step 5: Express Server Setup (server.js)

Step 6: Update Package.json Scripts

Step 7: Client Entry Point (src/main.jsx)

Step 8: SSR Entry Point (src/ssr.jsx) - Optional

Configuration

Middleware Options

API Reference

inertia(config?, vite?)

res.inertia.render(component, props?)

res.inertia.share(data)

res.inertia.redirect(urlOrStatus, url?)

Examples

Shared Data Example

Form Handling Example

Contributing

Guidelines

Breaking Changes

License

Resources

Keywords

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up

Step 4: Update HTML Template (`index.html`)

Step 5: Express Server Setup (`server.js`)

`inertia(config?, vite?)`

`res.inertia.render(component, props?)`

`res.inertia.share(data)`

`res.inertia.redirect(urlOrStatus, url?)`