Integrate RSPack Build and SSR via Actix Web + Tera #1

New issue

Open

opened 2025-06-10 21:26:25 +00:00 by rileyseaburg · 0 comments

rileyseaburg commented

2025-06-10 21:26:25 +00:00

(Migrated from github.com)

🛠️ Integrate RSPack Build and SSR via Actix Web + Tera

Labels:
enhancement, ssr, frontend, rspack, actix-web, agent-task

Description:

Objective

Create an Actix Web server that performs server-side rendering using Tera templates and integrates with the RSPack bundler to compile and serve a React + TypeScript frontend (including JSS and CSS styles).

🧩 Subtasks

Set up RSPack config in Rust
- Entry: frontend/index.tsx
- Output: dist/main.js, dist/style.css
- Loaders: tsx, ts, jsx, js, css, jss
- Target: Web output in a format usable by Actix
Create run_build() function
- Use RSPack APIs to bundle assets on server startup
- Log any errors on failure
Create Tera template at templates/index.html
- Inject:
  - <link rel="stylesheet" href="/static/style.css">
  - <script src="/static/main.js"></script>
  - Placeholder <div id="root"></div> for React hydration
- Accept a title via Tera context
Configure Actix Web
- Render Tera template on GET /
- Serve static files from dist/ via /static/
- Example:
```
app.service(Files::new("/static", "./dist").prefer_utf8(true));
```
Render response
- Insert title into Tera context
- Render and return HTML using HttpResponse::Ok().content_type("text/html").body(html)
(Optional) Add --dev flag or env to support:
- RSPack in watch mode
- Simple file watcher
- Optional HMR script injection

📁 Expected Structure

my-app/
├── src/
│   └── main.rs
├── frontend/
│   └── index.tsx
│   └── styles/style.jss.ts
├── dist/
│   └── main.js
│   └── style.css
├── templates/
│   └── index.html

📦 Crate Dependencies

rspack
actix-web
actix-files
tera
serde, serde_json

🧠 Success Criteria

Visiting / renders a Tera-powered HTML page with correct title
The frontend React app is bundled and served from /static/
No hard dependency on Node.js—Rust-native wherever possible
Clean SSR-ready HTML output with hydration entrypoint

🛠️ Integrate RSPack Build and SSR via Actix Web + Tera **Labels:** `enhancement`, `ssr`, `frontend`, `rspack`, `actix-web`, `agent-task` --- **Description:** ### Objective Create an Actix Web server that performs server-side rendering using Tera templates and integrates with the RSPack bundler to compile and serve a React + TypeScript frontend (including JSS and CSS styles). --- ### 🧩 Subtasks * [ ] **Set up RSPack config in Rust** * Entry: `frontend/index.tsx` * Output: `dist/main.js`, `dist/style.css` * Loaders: `tsx`, `ts`, `jsx`, `js`, `css`, `jss` * Target: Web output in a format usable by Actix * [ ] **Create `run_build()` function** * Use RSPack APIs to bundle assets on server startup * Log any errors on failure * [ ] **Create Tera template at `templates/index.html`** * Inject: * `<link rel="stylesheet" href="/static/style.css">` * `<script src="/static/main.js"></script>` * Placeholder `<div id="root"></div>` for React hydration * Accept a `title` via Tera context * [ ] **Configure Actix Web** * Render Tera template on `GET /` * Serve static files from `dist/` via `/static/` * Example: ```rust app.service(Files::new("/static", "./dist").prefer_utf8(true)); ``` * [ ] **Render response** * Insert `title` into Tera context * Render and return HTML using `HttpResponse::Ok().content_type("text/html").body(html)` * [ ] *(Optional)* Add `--dev` flag or env to support: * RSPack in watch mode * Simple file watcher * Optional HMR script injection --- ### 📁 Expected Structure ``` my-app/ ├── src/ │ └── main.rs ├── frontend/ │ └── index.tsx │ └── styles/style.jss.ts ├── dist/ │ └── main.js │ └── style.css ├── templates/ │ └── index.html ``` --- ### 📦 Crate Dependencies * `rspack` * `actix-web` * `actix-files` * `tera` * `serde`, `serde_json` --- ### 🧠 Success Criteria * Visiting `/` renders a Tera-powered HTML page with correct title * The frontend React app is bundled and served from `/static/` * No hard dependency on Node.js—Rust-native wherever possible * Clean SSR-ready HTML output with hydration entrypoint

👀 1