{"id":13400837,"url":"https://github.com/facebookarchive/react-page-middleware","last_synced_at":"2025-03-14T06:31:57.800Z","repository":{"id":9673482,"uuid":"11616000","full_name":"facebookarchive/react-page-middleware","owner":"facebookarchive","description":"Connect/Express middleware to use React to generate whole websites","archived":true,"fork":false,"pushed_at":"2015-10-29T22:59:46.000Z","size":383,"stargazers_count":106,"open_issues_count":0,"forks_count":36,"subscribers_count":39,"default_branch":"master","last_synced_at":"2024-04-14T17:44:28.936Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/facebookarchive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-23T18:36:37.000Z","updated_at":"2023-03-08T03:16:27.000Z","dependencies_parsed_at":"2022-09-01T03:51:05.378Z","dependency_job_id":null,"html_url":"https://github.com/facebookarchive/react-page-middleware","commit_stats":null,"previous_names":["reactjs/react-page-middleware"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Freact-page-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Freact-page-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Freact-page-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facebookarchive%2Freact-page-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/facebookarchive","download_url":"https://codeload.github.com/facebookarchive/react-page-middleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243537943,"owners_count":20307098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:56.021Z","updated_at":"2025-03-14T06:31:57.793Z","avatar_url":"https://github.com/facebookarchive.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"- - -\n\n**_This project is not actively maintained. Proceed at your own risk!_**\n\n- - -\n\nreact-page-middleware\n===============================================\nMiddleware for building full page apps using React, JSX, and CommonJS.\n\nIf you want to get started with server rendered React apps, go directly to\n[react-page](http://www.github.com/facebook/react-page/). This project is the\n  implementation of the router/server-side-page-assembler/packager.\n\n\n###Features\n\n  - Server-side JavaScript rendering of pages/apps using React.\n  - Pages rendered on server, seamlessly brought to life in the browser.\n  - No special glue code to write - \"Just works\" on client/server.\n  - CommonJS + React + optional JSX.\n\n\u003cbr\u003e\n\n###Requirements\n\n    - node (a more recent version)\n    - npm\n\n###Install\n\n\u003e Let npm do all the installing - just create a directory structure anywhere as\n\u003e follows:\n\n    yourProject/\n     ├── package.json              # Add npm dependencies here.\n     ├── server.js                 # Start web server with `node server.js`\n     └── src                       # All your application JS.\n         ├── index.js              # localhost:8080/index.html routed here\n         └── pages                 # Configure the page root using pageRouteRoot\n             └── about.js          # localhost:8080/about.html\n\n\u003e List your dependencies in `package.json`:\n\n    // Shows how to depend on bleeding edge versions. One niceness of\n    // `react-page-middleware`, is depending on the main React repo as\n    // `require('React')` Not all JS packagers understand the pure git repo for\n    // React.\n    \"dependencies\": {\n      \"React\": \"git://github.com/facebook/react.git\",\n      \"react-page-middleware\": \"git://github.com/facebook/react-page-middleware.git\",\n      \"connect\": \"2.8.3\"\n    },\n\n\u003e Download your project's dependencies:\n\n    cd yourProject\n    npm install\n\n\n\u003e Create a `server.js` file that requires `react-page-middleware`, and set the\n\u003e proper directory search paths and routing paths.\n\n    var reactMiddleware = require('react-page-middleware');\n    var REACT_LOCATION = __dirname + '/node_modules/react-tools/src';\n    var ROOT_DIR = __dirname;\n    var app = connect()\n      .use(reactMiddleware.provide({\n        logTiming: true,\n        pageRouteRoot: ROOT_DIR,           // URLs based in this directory\n        useSourceMaps: true,                // Generate client source maps.\n        projectRoot: ROOT_DIR,          // Search for sources from\n        ignorePaths: function(p) {          // Additional filtering\n          return p.indexOf('__tests__') !== -1;\n        }\n      }))\n      .use(connect['static'](__dirname + '/src/static_files'));\n    http.createServer(app).listen(8080);\n\n\n\u003e Run the server and open index.html:\n\n\n   node server\n   open http://localhost:8080/index.html\n\n\n\u003e The [react-page](http://www.github.com/facebook/react-page/) project has a\n\u003e much more thorough explanation of the motivation and features.\n\n\n### JavaScript-centric Routing And Page Rendering For JavaScript.\n\nThe default router is JavaScript-centric. You simply specify the path to the JS\ncomponent you want to use to render the entire page.\n[react-page](http://www.github.com/facebook/react-page/) for more information\nabout the routing.\n\n### Source Maps\n\n`react-page-middleware` has them.\n\n\n### Run and Build on the Fly\n\n\u003e  Just hit your browser's refresh button to run an always-up-to-date version of\n\u003e  your app.\n\n- Dynamically packages/compiles your app on each server request.\n\n### Purpose\n\n`react-page-middleware` is a rapid development environment where you can experiment with\nentirely new ways of building production web apps powered by React. It provides\na common environment that allows sharing of modules client/server architecture\nprototypes.\n\nIn order to use this technology in a production environment, you would need to\naudit and verify that the server rendering strategy is safe and suitable for\nyour purposes.\n\n- In particular, you would want to ensure that a proper server\nsandbox is enforced. However, `react-page` _does_ run your UI rendering code\ninside of contextify as a preliminary sandbox.\n\n- The packaging/transforming features of `react-page` would not be needed in a\nproduction environment where the packages can be prebuilt once, stored in a CDN\nand not be repackaged on the fly, but the server rendering feature is very\ncompelling for production environments where page load performance is of great\nconcern.\n\n- Among other things, additional connect middleware should be added to prevent\nstack traces from showing up in the client.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacebookarchive%2Freact-page-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffacebookarchive%2Freact-page-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacebookarchive%2Freact-page-middleware/lists"}