{"id":13989783,"url":"https://github.com/phenax/plasmajs","last_synced_at":"2025-07-22T11:31:43.345Z","repository":{"id":57325588,"uuid":"72923191","full_name":"phenax/plasmajs","owner":"phenax","description":"An isomorphic nodeJS framework based on react","archived":true,"fork":false,"pushed_at":"2020-09-04T00:55:00.000Z","size":502,"stargazers_count":134,"open_issues_count":14,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-12T14:52:45.035Z","etag":null,"topics":["es2015","isomorphic-nodejs-framework","nodejs","react"],"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/phenax.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":"2016-11-05T11:57:19.000Z","updated_at":"2023-05-21T18:49:53.000Z","dependencies_parsed_at":"2022-09-21T01:02:44.803Z","dependency_job_id":null,"html_url":"https://github.com/phenax/plasmajs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/phenax/plasmajs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fplasmajs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fplasmajs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fplasmajs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fplasmajs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenax","download_url":"https://codeload.github.com/phenax/plasmajs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fplasmajs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266483727,"owners_count":23936404,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["es2015","isomorphic-nodejs-framework","nodejs","react"],"created_at":"2024-08-09T13:02:03.699Z","updated_at":"2025-07-22T11:31:42.137Z","avatar_url":"https://github.com/phenax.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PlasmaJS\n\n[![Build Status](https://travis-ci.org/phenax/plasmajs.svg?branch=master)](https://travis-ci.org/phenax/plasmajs)\n[![npm version](https://img.shields.io/npm/v/plasmajs.svg)](https://www.npmjs.com/package/plasmajs)\n[![license](https://img.shields.io/npm/l/plasmajs.svg)](https://github.com/phenax/plasmajs/blob/master/LICENSE)\n[![dependency status](https://david-dm.org/phenax/plasmajs/status.svg)](https://david-dm.org/phenax/plasmajs)\n[![Discord](https://img.shields.io/discord/425972740688838656.svg)](https://discord.gg/b9Z4b6r)\n\n[![NPM](https://nodei.co/npm/plasmajs.png?downloadRank=true)](https://www.npmjs.com/package/plasmajs)\n\nAn isomorphic NodeJS framework powered with React for building web apps.\n\n**[Use the starter-kit to get up and running with PlasmaJS](https://github.com/phenax/plasmajs-starter-kit) [OUTDATED]**\n\n**[Join us on discord](https://discord.gg/b9Z4b6r)**\n\n\u003cbr /\u003e\n\n[Getting Started](https://github.com/ManuelPortero/plasmajs/blob/ManuelPortero-patch-1/docs/gettingStarted.md)\n\n\u003cbr /\u003e\n\n[Middlewares](https://github.com/ManuelPortero/plasmajs/blob/ManuelPortero-patch-1/docs/middlewares.md)\n\n\u003cbr /\u003e\n\n[Routes](https://github.com/ManuelPortero/plasmajs/blob/ManuelPortero-patch-1/docs/routes.md)\n\n\u003cbr /\u003e \n\n## Features\n\n* Declarative syntax\n* Isomorphic routing\n* Isolated routing for API endpoints\n* Middlewares that are maintanable\n* ES6 syntax with babel\n\n\u003cbr /\u003e\n\n## Installation\n\n* Install with npm `npm i --save plasmajs`(you can also install it globally with `npm i -g plasmajs`)\n* To run the server, `plasmajs path/to/server.js`(Add it to your package.json scripts for local install)\n\n\u003cbr /\u003e\n\n## Guide\n\n### Import it to your app.js\n\n```javascript\nimport { Server, Route, Router, NodeHistoryAPI } from 'plasmajs';\n```\n\n### Writing A Server\n\n```javascript\nconst HeadLayout = props =\u003e (\n  \u003chead\u003e\n    \u003ctitle\u003e{props.title}\u003c/title\u003e\n  \u003c/head\u003e\n);\nconst WrapperLayout = props =\u003e \u003cbody\u003e{props.children}\u003c/body\u003e;\nconst HomeLayout = props =\u003e \u003cdiv\u003eHello World\u003c/div\u003e;\nconst ErrorLayout = props =\u003e \u003cdiv\u003e404 Not Found\u003c/div\u003e;\n\nexport default class App extends React.Component {\n  // Port number (Default=8080)\n  static port = 8080;\n\n  render() {\n    const history = new NodeHistoryAPI(this.props.request, this.props.response);\n    return (\n      \u003cServer\u003e\n        \u003cHeadLayout title=\"Test\" /\u003e\n        \u003cRouter history={history} wrapper={WrapperLayout}\u003e\n          \u003cRoute path=\"/\" component={HomeLayout} /\u003e\n          \u003cRoute errorHandler={true} component={ErrorLayout} /\u003e\n        \u003c/Router\u003e\n      \u003c/Server\u003e\n    );\n  }\n}\n```\n\n\u003cbr /\u003e\n\n### Middlewares\n\n#### Writing custom Middlewares\n\nIn MyMiddleWare.jsx...\n\n```javascript\nimport { MiddleWare } from 'plasmajs';\n\nexport default class MyMiddleWare extends MiddleWare {\n  onRequest(req, res) {\n    // Do your magic here\n    // Run this.terminate() to stop the render and take over\n  }\n}\n```\n\nAnd in App's render method...\n\n```html\n\u003cServer\u003e\n\n  \u003cMyMiddleWare {...this.props} /\u003e\n\n  // ...\n\u003c/Server\u003e\n```\n\n\u003cbr /\u003e\n\n#### Logger Middleware\n\nIt logs information about the request made to the server out to the console.\n\n````javascript\nimport {Logger} from 'plasmajs' // and add it in the server but after the router declaration.\n````\n```html\n\u003cServer\u003e\n  // ...\n\n  \u003cLogger {...this.props} color={true} /\u003e\n\u003c/Server\u003e\n```\n\n* Props\n  * `color` (boolean) - Adds color to the logs if true\n\n\u003cbr /\u003e\n\n#### StaticContentRouter Middleware\n\nAllows you to host a static content directory for public files\n\n````javascript\nimport {StaticContentRouter} from 'plasmajs'\n````\n```html\n\u003cServer\u003e\n  \u003cStaticContentRouter {...this.props} dir='public' hasPrefix={true} /\u003e\n\n  // ...\n\u003c/Server\u003e\n```\n\n* Props\n  * `dir` (string) - The name of the static content folder to host\n  * `hasPrefix` (boolean) - If set to false, will route it as http://example.com/file instead of http://example.com/public/file\n  * `compress` (boolean) - If true, will enable gzip compression on all static content if the client supports it\n\n\u003cbr /\u003e\n\n#### APIRoute Middleware\n\nAllows you to declare isolated routes for requests to api hooks\n\n```javascript\n  import {APIRoute} from 'plasmajs'\n  \n  //...\n  // API request handler for api routes\n  _apiRequestHandler() {\n\n    // Return a promise\n    return new Promise((resolve, reject) =\u003e {\n\n      resolve({\n        wow: \"cool cool\"\n      });\n    });\n  }\n\n  render() {\n    return (\n      \u003cServer\u003e\n        \u003cAPIRoute {...this.props} method='POST' path='/api/stuff' controller={this._apiRequestHandler} /\u003e\n        //...\n      \u003c/Server\u003e\n    );\n  }\n```\n\n* Props\n  * `method` (string) - The http request method\n  * `path` (string or regex) - The path to match\n  * `controller` (function) - The request handler\n\n\u003cbr /\u003e\n\n### Routing\n\nIsomorphic routing which renders the content on the server-side and then lets the javascript kick in and take over the interactions. (The server side rendering only works for Push State routing on the client side, not Hash routing).\n\n`NOTE: Its better to isolate the route definitions to its own file so that the client-side and the server-side can share the components`\n\n#### History API\n\nThere are 3 types of routing available - Backend routing(`new NodeHistoryAPI(request, response)`), Push State routing(`new HistoryAPI(options)`), Hash routing(`new HashHistoryAPI(options)`)(NOTE: The naming is just for consistency)\n\n\u003cbr /\u003e\n\n#### The Router\n\n```html\n\u003cRouter history={history} wrapper={Wrapper}\u003e\n  {allRouteDeclarations}\n\u003c/Router\u003e\n```\n\n* Props\n  * `history` (object) - It's the history api instance you pass in depending on the kind of routing you require.\n  * `wrapper` (React component class) - It is a wrapper for the routed contents\n\n\u003cbr /\u003e\n\n#### Declaring a route\n\nIf `Homepage` is a react component class and `/` is the url.\n\n```html\n\u003cRoute path='/' component={HomePage} /\u003e\n```\n\n* Props\n  * `path` (string or regex) - The url to route the request to\n  * `component` (React component class) - The component to be rendered when the route is triggered\n  * `statusCode` (integer) - The status code for the response\n  * `caseInsensitive` (boolean) - Set to true if you want the url to be case insensitive\n  * `errorHandler` (boolean) - Set to true to define a 404 error handler\n\n\n## Want to help?\nPRs are welcome. You can also join us on [discord](https://discord.gg/b9Z4b6r) for discussions about plasmajs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fplasmajs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenax%2Fplasmajs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fplasmajs/lists"}