Skip to content

Commit 52530b8

Browse files
cblanqueracblanquera
authored
Merge pull request #6 from patlouis/nest-example
added NestJS example 1d
2 parents c080e7a + ed1cae6 commit 52530b8

20 files changed

Lines changed: 595 additions & 0 deletions

‎examples/with-nest/README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<p align="center">
2+
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
3+
</p>
4+
5+
[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
6+
[circleci-url]: https://circleci.com/gh/nestjs/nest
7+
8+
<p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
9+
<p align="center">
10+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
11+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
12+
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
13+
<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
14+
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
15+
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
16+
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
17+
<a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
18+
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
19+
<a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
20+
</p>
21+
<!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
22+
[![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
23+
24+
## Description
25+
26+
[Nest](https://github.com/nestjs/nest) framework with Reactus and React.
27+
28+
## Project setup
29+
30+
```bash
31+
$ yarn
32+
```
33+
34+
## Compile and run the project
35+
36+
```bash
37+
# development
38+
$ yarn start
39+
40+
# watch mode (nest start --watch)
41+
$ yarn start:dev
42+
43+
# production mode
44+
$ yarn start:prod
45+
```
46+
47+
## Run tests
48+
49+
```bash
50+
# unit tests
51+
$ yarn test
52+
```
53+
54+
## Resources
55+
56+
Check out a few resources that may come in handy when working with NestJS:
57+
58+
- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
59+
- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
60+
- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
61+
- Deploy your application to AWS with the help of [NestJS Mau](https://mau.nestjs.com) in just a few clicks.
62+
- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
63+
- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
64+
- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
65+
- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
66+
67+
## Support
68+
69+
Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
70+
71+
## Stay in touch
72+
73+
- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
74+
- Website - [https://nestjs.com](https://nestjs.com/)
75+
- Twitter - [@nestframework](https://twitter.com/nestframework)
76+
77+
## License
78+
79+
Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).

‎examples/with-nest/components/Edit.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
export default function Edit({ name }: { name: string }) {
4+
return (
5+
<p className="py-4">
6+
Edit <code>pages/{name}.tsx</code> and save to test HMR
7+
</p>
8+
)
9+
}

‎examples/with-nest/jest.config.mjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default {
2+
preset: 'ts-jest/presets/default-esm',
3+
testEnvironment: 'node',
4+
extensionsToTreatAsEsm: ['.ts'],
5+
transform: {
6+
'^.+\\.ts$': ['ts-jest', { useESM: true }]
7+
},
8+
moduleNameMapper: {
9+
'^(\\.{1,2}/.*)\\.js$': '$1'
10+
}
11+
};

‎examples/with-nest/nest-cli.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"$schema": "https://json.schemastore.org/nest-cli",
3+
"collection": "@nestjs/schematics",
4+
"sourceRoot": "src",
5+
"compilerOptions": {
6+
"deleteOutDir": true
7+
}
8+
}

‎examples/with-nest/package.json‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "reactus-with-nest",
3+
"version": "1.0.0",
4+
"private": true,
5+
"license": "UNLICENSED",
6+
"type": "module",
7+
"scripts": {
8+
"build": "tsx scripts/build.ts",
9+
"start": "nest start",
10+
"start:dev": "nest start --watch",
11+
"start:debug": "nest start --debug --watch",
12+
"start:prod": "NODE_ENV=production nest start --prod",
13+
"test": "jest --config jest.config.mjs",
14+
"test:watch": "jest --watch",
15+
"test:cov": "jest --coverage",
16+
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
17+
"test:e2e": "jest --config ./test/jest-e2e.json"
18+
},
19+
"dependencies": {
20+
"@nestjs/common": "^11.0.1",
21+
"@nestjs/core": "^11.0.1",
22+
"@nestjs/platform-express": "^11.0.1",
23+
"react": "^19.1.0",
24+
"react-dom": "^19.1.0",
25+
"reactus": "^0.2.10",
26+
"reflect-metadata": "^0.2.2",
27+
"rxjs": "^7.8.1"
28+
},
29+
"devDependencies": {
30+
"@nestjs/cli": "^11.0.0",
31+
"@nestjs/schematics": "^11.0.0",
32+
"@nestjs/testing": "^11.0.1",
33+
"@swc/cli": "^0.6.0",
34+
"@swc/core": "^1.10.7",
35+
"@types/express": "^5.0.0",
36+
"@types/jest": "^29.5.14",
37+
"@types/node": "^22.15.3",
38+
"@types/react": "^19.1.2",
39+
"@types/react-dom": "^19.1.3",
40+
"@types/supertest": "^6.0.2",
41+
"@vitejs/plugin-react": "^4.4.1",
42+
"globals": "^16.0.0",
43+
"jest": "^29.7.0",
44+
"source-map-support": "^0.5.21",
45+
"supertest": "^7.0.0",
46+
"ts-jest": "^29.2.5",
47+
"ts-loader": "^9.5.2",
48+
"ts-node": "^10.9.2",
49+
"tsconfig-paths": "^4.2.0",
50+
"tsx": "^4.19.4",
51+
"typescript": "^5.8.3",
52+
"vite": "^6.3.4"
53+
},
54+
"jest": {
55+
"moduleFileExtensions": [
56+
"js",
57+
"json",
58+
"ts"
59+
],
60+
"rootDir": "src",
61+
"testRegex": ".*\\.spec\\.ts$",
62+
"transform": {
63+
"^.+\\.(t|j)s$": "ts-jest"
64+
},
65+
"collectCoverageFrom": [
66+
"**/*.(t|j)s"
67+
],
68+
"coverageDirectory": "../coverage",
69+
"testEnvironment": "node"
70+
}
71+
}

‎examples/with-nest/pages/about.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import './page.css';
2+
import React from 'react';
3+
import Edit from '../components/Edit.js';
4+
5+
export function Head({ styles = [] }: { styles?: string[] }) {
6+
return (
7+
<>
8+
<title>About Reactus</title>
9+
<meta name="description" content="About Reactus" />
10+
<link rel="icon" type="image/svg+xml" href="/react.svg" />
11+
<link rel="stylesheet" type="text/css" href="/global.css" />
12+
{styles.map((href, index) => (
13+
<link key={index} rel="stylesheet" type="text/css" href={href} />
14+
))}
15+
</>
16+
)
17+
}
18+
19+
export default function AboutPage() {
20+
return (
21+
<>
22+
<h1 className="uppercase">About Reactus</h1>
23+
<div className="p-4">
24+
<Edit name="about" />
25+
<a href="/">Home Page</a>
26+
</div>
27+
</>
28+
)
29+
}

‎examples/with-nest/pages/home.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import './page.css';
2+
import React, { useState } from 'react';
3+
import Edit from '../components/Edit.js';
4+
5+
export function Head({ styles = [] }: { styles?: string[] }) {
6+
return (
7+
<>
8+
<title>Reactus</title>
9+
<meta name="description" content="Reactus" />
10+
<link rel="icon" type="image/svg+xml" href="/react.svg" />
11+
<link rel="stylesheet" type="text/css" href="/global.css" />
12+
{styles.map((href, index) => (
13+
<link key={index} rel="stylesheet" type="text/css" href={href} />
14+
))}
15+
</>
16+
)
17+
}
18+
19+
export default function HomePage() {
20+
const [count, setCount] = useState(0)
21+
22+
return (
23+
<>
24+
<h1>React + Reactus with NestJS!</h1>
25+
<div className="p-4">
26+
<button className="text-reactus" onClick={() => setCount((count) => count + 1)}>
27+
count is {count}
28+
</button>
29+
<Edit name="about" />
30+
<a href="/about">About Reactus</a>
31+
</div>
32+
</>
33+
)
34+
}

‎examples/with-nest/pages/page.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root { display: initial; }
2+
#root {
3+
max-width: 1280px;
4+
margin: 0 auto;
5+
padding: 2rem;
6+
text-align: center;
7+
}

‎examples/with-nest/public/global.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
:root {
2+
display: none;
3+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
4+
line-height: 1.5;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
a:hover {
24+
color: #535bf2;
25+
}
26+
27+
body {
28+
margin: 0;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
button {
41+
border-radius: 8px;
42+
border: 1px solid transparent;
43+
padding: 0.6em 1.2em;
44+
font-size: 1em;
45+
font-weight: 500;
46+
font-family: inherit;
47+
background-color: #1a1a1a;
48+
cursor: pointer;
49+
transition: border-color 0.25s;
50+
}
51+
button:hover {
52+
border-color: #646cff;
53+
}
54+
button:focus,
55+
button:focus-visible {
56+
outline: 4px auto -webkit-focus-ring-color;
57+
}
58+
59+
@media (prefers-color-scheme: light) {
60+
:root {
61+
color: #213547;
62+
background-color: #ffffff;
63+
}
64+
a:hover {
65+
color: #747bff;
66+
}
67+
button {
68+
background-color: #f9f9f9;
69+
}
70+
}

‎examples/with-nest/scripts/build.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
//node
2+
import path from 'node:path';
3+
//reactus
4+
import { build } from 'reactus';
5+
6+
async function builder() {
7+
const cwd = process.cwd();
8+
const engine = build({
9+
cwd,
10+
//path where to save assets (css, images, etc)
11+
assetPath: path.join(cwd, 'public/assets'),
12+
//path where to save and load (live) the client scripts (js)
13+
clientPath: path.join(cwd, 'public/client'),
14+
//path where to save and load (live) the server script (js)
15+
pagePath: path.join(cwd, '.build/pages')
16+
});
17+
18+
await engine.set('@/pages/home');
19+
await engine.set('@/pages/about');
20+
21+
const responses = [
22+
...await engine.buildAllClients(),
23+
...await engine.buildAllAssets(),
24+
...await engine.buildAllPages()
25+
].map(response => {
26+
const results = response.results;
27+
if (typeof results?.contents === 'string') {
28+
results.contents = results.contents.substring(0, 100) + ' ...';
29+
}
30+
return results;
31+
});
32+
33+
//console.log(responses);
34+
//fix for unused variable :)
35+
if (responses.length) return;
36+
}
37+
38+
builder().catch(e => {
39+
console.error(e);
40+
process.exit(1);
41+
});

0 commit comments

Comments
 (0)