lazarv / react-server Goto Github PK

View Code? Open in Web Editor NEW

68.0 68.0 3.0 734 KB

The easiest way to build React apps with server-side rendering

Home Page: https://react-server.dev

License: MIT License

JavaScript 100.00%

client-components framework nodejs react react-server react-server-components server-actions ssg ssr vite

react-server's Introduction

Well, hello there 👋

I’m Viktor Lázár, a Principal Technical Architect at OneBeyond with a passion for full-stack development. Currently, I'm focused on building and refining a React meta-framework using Vite, known as @lazarv/react-server.

🎤 About Me

🔭 I’m currently working on @lazarv/react-server - a minimalist React meta-framework using Vite
🌱 I’m proficient in JavaScript, TypeScript, React, Node.js, C/C++, Go and Rust
🤔 I’m looking for help with @lazarv/react-server
💬 Ask me about full-stack development, JavaScript, TypeScript, React, Node.js, WebAssembly, WebGL, game development and 3D
📫 How to reach me: X/Twitter dev.to

🤩 Notable Projects

@lazarv/react-server - a minimalist React meta-framework using Vite
WAD Commander - a tool to load and play WAD files of DOOM® and DOOM II®.
HTML5 Wolfenstein 3D - HTML5 port of Wolfenstein 3D

⚡ Fun Fact

Husband, father of 3, gamer, musician, retro ❤️

react-server's People

Contributors

Stargazers

Watchers

Forkers

revskill10 tobbe matyasjay

react-server's Issues

Missing css in middleware mode

Using your express middleware example, started via express server, the page is missing the css.

react-server/examples/express/package.json

Lines 7 to 8 in ed43f3d

 "dev": "node ./src/server.mjs", 

 "dev:app": "react-server ./src/app/index.jsx",

Started with pnpm run dev (middleware mode)

Started with pnpm run dev:app

Repro at https://github.com/lionelhorn/reproductions/tree/main/lazarv-reactserver-middleware-css

Thanks in advance :)

css and prod start issues on Windows

I tried to create an app using the todo example on Windows and I found two issues:
first, the CSS import didn't work, I followed the todo app description, created an index.css file, and imported the tailwind files, but the tailwind didn't load.

the second one is the prod start, the run in dev mode is working well, but the react-server start throws this issue:

Difference between dev and build

Hello,

Thanks for your previous help. Continuing on my exploration:

I'm trying to use Deepkit runtime types (https://deepkit.io/documentation/runtime-types) with react-server.

In a gist, deepkit will transform the original source code to add type information so reflection and other features will be available at runtime.

// index.tsx

import "./index.css";
import {ReflectionClass} from "@deepkit/type";

export default function Index() {
  interface User {
    username: string;
    first: string;
    last: string;
    age: number;
  }

  const r = ReflectionClass.from<User>();
  const properties = r.getPropertyNames();

  return (
    <>{JSON.stringify(properties)}</>
  );
}

In dev mode, everything works. The following code (according to vite inspect plugin) gets transpiled (via a deepkit vite plugin) to

import "./index.css";
import { ReflectionClass } from "@deepkit/type";

export default function Index() {
    const __ΩUser = ['username', 'first', 'last', 'age', 'User', 'P&4!&4"&4#\'4$Mw%y'];
    const r = (ReflectionClass.from.Ω = [[() => __ΩUser, 'n!']], ReflectionClass.from());
    const properties = r.getPropertyNames();
    return (<>{JSON.stringify(properties)}</>);
}
Index.__type = ['Index', 'P"/!'];

//# sourceMappingURL=index.jsx.map

In build + start mode, code breaks and errors. The following code is built ./index.mjs

import {Fragment as t, jsx as e} from "react/jsx-runtime";
import {ReflectionClass as o} from "@deepkit/type";

function n() {
  const r = o.from().getPropertyNames();
  return e(t, {children: JSON.stringify(r)})
}

n.__type = ["Index", 'P"/!'];
export {n as default};

For instance the following line has been removed by something in the build pipeline

const __ΩUser = ['username', 'first', 'last', 'age', 'User', 'P&4!&4"&4#\'4$Mw%y'];

Any suggestions on how to troubleshoot the issue?

Adding vite plugins with CJS build only will result in errors

Adding vite plugins following this guide :
https://react-server.dev/guide/framework/configuration

// react-server.config.ts

import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect(),
  ]
}

Will create what appears like a bundle (react-server.config.ts.39a5aafe.mjs) in /.react-server using react-server.config.ts as an entrypoint.

which will create an error if any plugin is or has deps with a CJS only build

Error: Dynamic require of "fs" is not supported
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:382
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:12396
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:1:494
    at file:///C:/PROG/_experiments/_tmp/my-first-application/.react-server/react-server.config.ts.39a5aafe.mjs:12:6150
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async loadConfig (file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@[email protected]_@[email protected]_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/config/index.mjs:59:11)
    at async Module.dev (file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@[email protected]_@[email protected]_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/lib/dev/action.mjs:23:20)
    at async file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@[email protected]_@[email protected]_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/bin/cli.mjs:76:3

Feedback and errors while following hello-world tutorial

Hello,

I recently discovered your package and started testing on a windows machine.

Following the step of https://react-server.dev/tutorials/hello-world

Issues with Node 20.8.1

> pnpm exec react-server ./App.jsx

node:internal/errors:497
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "file:///C:/PROG/_experiments/_tmp/my-first-application/node_modules/.pnpm/@[email protected]_@[email protected]_react-_6c2sbkclap3cav5wojpnsvlz5i/node_modules/@lazarv/react-server/package.json" needs an import assertion of type "json"
    at new NodeError (node:internal/errors:406:5)
    at validateAssertions (node:internal/modules/esm/assert:94:15)
    at defaultLoad (node:internal/modules/esm/load:122:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at #createModuleJob (node:internal/modules/esm/loader:290:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17)
    at async ModuleLoader.import (node:internal/modules/esm/loader:315:23) {
  code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'
}

While looking at

react-server/packages/react-server/package.json

Line 111 in e4b7fdf

"node": ">=20.0.0"

I assumed 20.8.1 would we fine.

Node 22.4.0

> [email protected] start C:\PROG\_experiments\_tmp\my-first-application
> pnpm exec react-server ./App.jsx
dep-DXWVQosX.js:1336912:08:25 [react-server] listening on http://127.0.0.1:3000
dep-DXWVQosX.js:1336912:08:25 [react-server] ✔ Ready in 720ms

Connection refused at http://127.0.0.1:3000
But it works on localhost:3000
Not sure what's going on there.

Example usage within express ?

Could we embed the middleware within an express app ?

Hello from Waku

Just saying hello, but also wondering if there's any possibility for collaboration. https://github.com/dai-shi/waku

	"dev": "node ./src/server.mjs",
	"dev:app": "react-server ./src/app/index.jsx",