Skip to content

chore(sample-app): enhance frontend setup with Vite and Rspack integr… #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore(sample-app): enhance frontend setup with Vite and Rspack integr… #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b60f24
chore(sample-app): enhance frontend setup with Vite and Rspack integr…
vinayak25 Mar 30, 2025
e9fbb27
Merge branch 'main' of github.com:intentjs/intent into feature/react-ssr
vinayak25 May 25, 2025
a636391
refactor: update console log messages for clarity
vinayak25 Jun 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions integrations/sample-app/app/http/controllers/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,29 @@ import {
Res,
Response,
} from '@intentjs/core/http';
import { ReactRenderer } from '@intentjs/core/frontend';
import { Inject } from '@intentjs/core';

@Controller('')
export class UserController {
constructor(private readonly service: UserService) {}
constructor(
private readonly service: UserService,
private readonly reactRenderer: ReactRenderer,
) {}

@Get()
async getHello(@Req() req: Request, @Res() res: Response) {
return res.json({ hello: 'Intent2' });
return this.reactRenderer.renderUsingVite('home', req, res);
// return res.json({ hello: 'Intent2' });
}

@Get('hello/')
@Get('contact')
async contactPage(@Req() req: Request, @Res() res: Response) {
return this.reactRenderer.render('contact', req, res);
// return res.json({ hello: 'Intent2' });
}

@Get('hello')
async getHello2(@Req() req: Request) {
const order = { id: 123, product: 'A book' };
const event = new OrderPlacedEvent(order);
Expand Down
16 changes: 9 additions & 7 deletions integrations/sample-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,18 +51,19 @@
"@aws-sdk/credential-providers": "^3.687.0",
"@aws-sdk/s3-request-presigner": "^3.689.0",
"@intentjs/core": "*",
"@tailwindcss/vite": "^4.0.17",
"bcrypt": "^5.1.1",
"class-transformer": "^0.5.1",
"class-validator": "^0.14.1",
"jsonwebtoken": "^9.0.2",
"knex": "^3.1.0",
"lucide-react": "^0.485.0",
"node-cache": "^5.1.2",
"objection": "^3.1.4",
"pg": "^8.13.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"reflect-metadata": "^0.2.0",
"resend": "^4.0.1-alpha.0",
"tailwindcss": "^4.0.17",
"ulid": "^2.3.0",
"winston": "^3.14.2"
},
Expand All @@ -72,19 +73,21 @@
"@intentjs/ts-node": "*",
"@nestjs/testing": "^10.0.0",
"@rollup/plugin-typescript": "^12.1.2",
"@rspack/cli": "^1.2.8",
"@rspack/core": "^1.2.8",
"@rspack/cli": "^1.3.0",
"@rspack/core": "^1.3.0",
"@rspack/plugin-react-refresh": "^1.0.1",
"@swc/cli": "^0.4.1-nightly.20240914",
"@swc/core": "^1.7.26",
"@types/bcrypt": "^5.0.2",
"@types/express": "^4.17.17",
"@types/jest": "^29.5.2",
"@types/jsonwebtoken": "^9.0.7",
"@types/node": "^20.3.1",
"@types/react": "^19.0.10",
"@types/supertest": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"@vitejs/plugin-react": "^4.3.4",
"babel-loader": "^10.0.0",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
Expand All @@ -98,8 +101,7 @@
"tsconfig-paths": "^4.2.0",
"tslib": "^2.8.1",
"typescript": "^5.8.2",
"vite": "^6.2.2",
"vite-plugin-node": "^4.0.0"
"vite": "^6.2.3"
},
"jest": {
"moduleFileExtensions": [
Expand Down
2 changes: 0 additions & 2 deletions integrations/sample-app/public/assets/client.js
View file
Open in desktop

This file was deleted.

49 changes: 0 additions & 49 deletions integrations/sample-app/public/assets/client.js.LICENSE.txt
View file
Open in desktop

This file was deleted.

26 changes: 12 additions & 14 deletions integrations/sample-app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NestJS React SSR</title>
</head>
<body>
<div id="root">${content}</div>
<script>
<initial-data></initial-data>
</script>
<script src="/assets/assets/client.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intent2</title>
<link href="/resources/styles/global.css" rel="stylesheet">
</head>
<body>
<div id="root"><!--ssr-outlet--></div>
<script type="module" src="/resources/views/client.tsx"></script>
</body>
</html>
9 changes: 9 additions & 0 deletions integrations/sample-app/resources/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

@import "tailwindcss";

@theme {
--font-primary: "Urbanist", sans-serif;
--font-code: "JetBrains Mono", sans-serif;
}
10 changes: 10 additions & 0 deletions integrations/sample-app/resources/views/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { hydrateRoot } from 'react-dom/client';
import App from './pages/home.js';
import { BrowserRouter } from 'react-router-dom';

hydrateRoot(
document.getElementById('root'),
<BrowserRouter>
<App />
</BrowserRouter>,
);
11 changes: 11 additions & 0 deletions integrations/sample-app/resources/views/entry-server.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { renderToString } from 'react-dom/server';
import App from './pages/home.js';
import { StaticRouter } from 'react-router-dom';

export function render(url: string) {
return renderToString(
<StaticRouter location={url}>
<App />
</StaticRouter>,
);
}
3 changes: 3 additions & 0 deletions integrations/sample-app/resources/views/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"type": "module"
}
14 changes: 14 additions & 0 deletions integrations/sample-app/resources/views/pages/contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// import { useState } from 'react';

export default function ContactPage(props: any) {
console.log(props);

return (
<div>
<h1>Contact Page</h1>
<p> What's up bitch???</p>
{/* <button onClick={() => setCount(count + 1)}>Click me</button>
<p>{count}</p> */}
</div>
);
}
66 changes: 66 additions & 0 deletions integrations/sample-app/resources/views/pages/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { BookTextIcon, Github, GithubIcon } from 'lucide-react';

export default function Index() {
return (
<div>
<div className="bg-[#111111] min-h-screen p-4">
<div className="flex flex-col items-center justify-center min-h-screen">
<div className="flex flex-col items-center justify-center">
<div className="mb-6 flex flex-row justify-start items-center w-full gap-1">
<img
src="https://tryintent.com/intent-logo-light.png"
alt="Intent Logo"
className="h-12"
aria-label="Intent logo"
/>
<h1 className="text-white text-2xl font-bold font-primary">
Intent
</h1>
</div>
<div className="text-center font-code flex flex-col items-start justify-start w-full text-white">
<p>
1. Get started by editing22{' '}
<code className="bg-black/[.05] text-[#9AD422] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
views/pages/home.tsx
</code>
</p>
<p>2. Save and see your changes instantly.</p>
</div>
<div className="flex flex-row items-start justify-start w-full gap-2 mt-8">
<a
href="#"
className="border border-gray-700 text-white px-4 py-2 rounded-2xl font-code"
>
<span className="mr-2 flex flex-row items-center justify-center gap-2">
<BookTextIcon size={16} />
Read our docs
</span>
</a>
<a
href="https://github.com/intentjs/intent/issues"
className="border border-gray-700 text-white px-4 py-2 rounded-2xl font-code"
>
<span className="mr-2 flex flex-row items-center justify-center gap-2">
<GithubIcon size={16} />
Raise Issue on GitHub
</span>
</a>
</div>
</div>

{/* <div className="flex gap-8 mt-16 text-gray-400">
<a href="#" className="flex items-center">
<span className="mr-2">📚</span> Learn
</a>
<a href="#" className="flex items-center">
<span className="mr-2">📝</span> Examples
</a>
<a href="https://nextjs.org" className="flex items-center">
Go to nextjs.org <span className="ml-1">→</span>
</a>
</div> */}
</div>
</div>
</div>
);
}
9 changes: 9 additions & 0 deletions integrations/sample-app/resources/views/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function Index() {
return (
<div>
<div className="bg-gray-700 min-h-screen p-4">
<h1 className="text-3xl font-semibold underline">Hello world!</h1>
</div>
</div>
);
}
20 changes: 20 additions & 0 deletions integrations/sample-app/resources/views/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { RouteObject } from 'react-router-dom';

// Define routes that can be shared between client and server
const routes: RouteObject[] = [
{
path: '/',
element: <>Home Page</>,
},
{
path: '/about',
element: <>About Page</>,
},
{
path: '*',
element: <>404 Page</>,
},
];

export default routes;
12 changes: 12 additions & 0 deletions integrations/sample-app/resources/views/tsconfig.client.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": "@intentjs/tooling/tsconfig.client.json",
"compilerOptions": {
"outDir": "./dist",
"baseUrl": ".",
"rootDir": ".",
"moduleResolution": "bundler"
},
"include": ["resources"],
"exclude": ["node_modules", "dist"]
}

Loading
Loading