{"id":14957629,"url":"https://github.com/raathigesh/react-atmo","last_synced_at":"2025-05-02T07:32:53.951Z","repository":{"id":83260004,"uuid":"100114131","full_name":"Raathigesh/react-atmo","owner":"Raathigesh","description":":sparkles: Custom react renderer for express js","archived":false,"fork":false,"pushed_at":"2017-08-17T08:26:24.000Z","size":141,"stargazers_count":42,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-12T16:03:16.701Z","etag":null,"topics":["express-js","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Raathigesh.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-12T13:30:34.000Z","updated_at":"2021-05-09T12:34:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b1368cd-ed7c-4f89-8f7c-fa75f2dde709","html_url":"https://github.com/Raathigesh/react-atmo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Freact-atmo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Freact-atmo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Freact-atmo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Freact-atmo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raathigesh","download_url":"https://codeload.github.com/Raathigesh/react-atmo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224305847,"owners_count":17289446,"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":["express-js","react"],"created_at":"2024-09-24T13:15:15.849Z","updated_at":"2024-11-12T16:04:50.554Z","avatar_url":"https://github.com/Raathigesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"./docs/ReactAtmo.png\" width=\"600\" alt=\"react-atmo\" \u003e \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e \n  \u003ca href=\"https://github.com/Raathigesh/react-atmo/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/express.svg?maxAge=2592000\u0026style=flat-square\"\n         alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/packages/react-atmo\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-atmo.svg?style=flat-square\"\n         alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\nReact atmo is a custom renderer for [express js](https://expressjs.com/). This is an experimental project, supports very minimal features and not suitable for production apps. **But it's a great fit for creating mock APIs for demos and presentations.**\n\n## Is this a good idea?\nI'm pretty sure it's not! But it's lot of fun!\n\n## Getting Started\n\nStart with the [starter kit](https://github.com/Raathigesh/react-atmo-sample) powered by [backpack](https://github.com/jaredpalmer/backpack).\n\n```\nyarn add react-atmo\n```\n\n## Hello, world!\n\n```javascript\nimport React from \"react\";\nimport Atmo, { Headers } from \"react-atmo\";\n\nAtmo.listen(\n  \u003cserver port=\"9001\"\u003e\n    \u003cmiddlewares\u003e\n      \u003cbodyparser /\u003e\n    \u003c/middlewares\u003e\n    \u003croute method=\"get\" url=\"/unicorns\"\u003e\n      \u003cheaders\u003e\n        \u003cHeaders.CrossOriginHeader /\u003e\n        \u003cHeaders.JsonContentTypeHeader /\u003e\n      \u003c/headers\u003e\n      \u003cresponse\u003e\n        {() =\u003e ({\n          name: \"Adiana\",\n          description: \"The fiery one\"\n        })}\n      \u003c/response\u003e\n    \u003c/route\u003e\n  \u003c/server\u003e\n);\n```\nHave a look at the examples [here](https://github.com/Raathigesh/react-atmo/tree/master/examples).\n\n## API\n### `Atmo.listen(element, [callback])`\nStarts an express server.\n\n## Elements\n### `\u003cserver\u003e`\nCreates a server app and starts listening on the provided port\n\n\u003e `port` | Server port\n\n### `\u003croute\u003e`\nAttaches the route to the express app\n\u003e `method` | Http method name for the route.\n\n\u003e `url` | Url of the route.\n\n### `\u003cresponse\u003e`\nRepresents the response of the route. Takes a function as a children. Whatever the function returns would be returned by the route.\n\nResponse function also receives request and response objects of express, if you want to do something interesting.\n```javascript\n\u003cresponse\u003e\n  {(request, response) =\u003e {\n    // play with the request and response object of express\n    return {\n      status: 'alive'\n    }\n  }}\n\u003c/response\u003e\n```\n\n### `\u003cheaders\u003e`\nTakes ```\u003cheader /\u003e``` as children.\n\n#### `\u003cheader\u003e`\nRepresents a response header\n```javascript\n\u003cheader name=\"x-powered-by\" value=\"Unicorn JS\" /\u003e\n```\n\u003e `name` | Header name\n\n\u003e `value` | Header value\n  \nSave some typing and use the following header presets.\n\n```javascript\nimport Atmo, { Headers } from \"react-atmo\";\n```\n* ```\u003cHeaders.JsonContentTypeHeader /\u003e``` - Adds JSON content type header\n* ```\u003cHeaders.CrossOriginHeader /\u003e``` - Adds Cross origin header\n\n### `\u003cstatus\u003e`\n\u003e `code` | Satus code number\n\nShould be a childen of the ```\u003croute /\u003e``` element.\n\nSave some typing and use the following status presets.\n```javascript\nimport Atmo, { Status } from \"react-atmo\";\n```\n\n* ```\u003cStatus.Ok /\u003e``` - Code 200\n* ```\u003cStatus.Unauthorized /\u003e``` - Code 401\n* ```\u003cStatus.BadRequest /\u003e``` - Code 400\n* ```\u003cStatus.Forbidden /\u003e``` - Code 403\n* ```\u003cStatus.NotFound /\u003e``` - Code 404\n* ```\u003cStatus.InternalServerError /\u003e``` - Code 500\n\n### `\u003cdelay\u003e`\nIf you are creating a mock API and wants to simulate slowness, delay is the one you are looking for.\n```javascript\n\u003cdelay time={1000} /\u003e\n```\n\u003e `time` | Delay in milliseconds.\n\n\n## `\u003cmiddlewares\u003e`\nAccepts ```\u003cmiddleware /\u003e``` as children.\n\n### `\u003cstatic\u003e`\nThe static middleware.\n```javascript\n\u003cstatic path=\"./\" /\u003e\n```\n\u003e `path` | Path of the folder to expose as static directory.\n\n### `\u003cbodyparser\u003e`\nThe body parser middleware.\n```javascript\n\u003cbodyparser /\u003e\n```\n\n### `\u003cmiddleware\u003e`\nYour own, custom middleware.\n```javascript\n\u003cmiddleware\u003e\n{app =\u003e {\n  // use the app and do whatever you want\n}}\n\u003c/middleware\u003e\n```\n\n### `\u003cservers\u003e`\nWhen you are not happy with a single instance and wants multiple apps listening on different ports.\n\n```javascript\nimport React, { Component } from \"react\";\nimport Atmo from \"react-atmo\";\n\nAtmo.listen(\n  \u003cservers\u003e\n    \u003cserver port=\"9001\"\u003e    \n      \u003croute method=\"get\" url=\"/unicorns\"\u003e\n        \u003cresponse\u003e\n          {() =\u003e ({\n            name: \"Adiana\",\n            description: \"The fiery one\"\n          })}\n        \u003c/response\u003e\n      \u003c/route\u003e\n    \u003c/server\u003e\n    \u003cserver port=\"9002\"\u003e    \n      \u003croute method=\"get\" url=\"/unicorns\"\u003e\n        \u003cresponse\u003e\n          {() =\u003e ({\n            name: \"Adiana\",\n            description: \"The fiery one, from server 2\"\n          })}\n        \u003c/response\u003e\n      \u003c/route\u003e\n    \u003c/server\u003e\n  \u003c/servers\u003e\n);\n```\n\n## Kitchen sink\n```javascript\nimport React, { Component } from \"react\";\nimport Atmo, { Headers, Status } from \"react-atmo\";\n\nAtmo.listen(\n  \u003cserver port=\"9001\"\u003e\n    \u003cmiddlewares\u003e\n      \u003cstatic path=\"./\" /\u003e\n      \u003cbodyparser /\u003e\n      \u003cmiddleware\u003e\n        {app =\u003e {\n          // use the app and do whatever you want\n        }}\n      \u003c/middleware\u003e\n    \u003c/middlewares\u003e\n    \u003croute method=\"get\" url=\"/unicorns\"\u003e\n      \u003cheaders\u003e\n        \u003cHeaders.CrossOriginHeader /\u003e\n        \u003cHeaders.JsonContentTypeHeader /\u003e\n        \u003cheader name=\"x-powered-by\" value=\"Unicorn JS\" /\u003e\n      \u003c/headers\u003e\n      \u003cresponse\u003e\n        {() =\u003e ({\n          name: \"Adiana\",\n          description: \"The fiery one\"\n        })}\n      \u003c/response\u003e\n      \u003cdelay time={3000} /\u003e\n      \u003cStatus.Ok /\u003e\n    \u003c/route\u003e\n  \u003c/server\u003e\n);\n\n```\n\n## Inspiration and Reference\n[React-ionize](https://github.com/mhink/react-ionize) is a react custom renderer which targets electron. I have used react-ionize as a reference to build react-atmo. Infact, I have used it as a boilerplate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraathigesh%2Freact-atmo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraathigesh%2Freact-atmo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraathigesh%2Freact-atmo/lists"}