{"id":19475472,"url":"https://github.com/artdecocode/irio","last_synced_at":"2025-07-15T12:44:53.534Z","repository":{"id":57276822,"uuid":"136244844","full_name":"artdecocode/irio","owner":"artdecocode","description":"The best full stack framework for building universal websites and progressive web apps in Node.js.","archived":false,"fork":false,"pushed_at":"2018-06-06T03:31:57.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T20:55:30.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://irio.app","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/artdecocode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-06-05T23:13:38.000Z","updated_at":"2018-06-08T05:05:42.000Z","dependencies_parsed_at":"2022-09-13T03:50:49.402Z","dependency_job_id":null,"html_url":"https://github.com/artdecocode/irio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/artdecocode/irio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Firio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Firio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Firio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Firio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artdecocode","download_url":"https://codeload.github.com/artdecocode/irio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Firio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437294,"owners_count":23765119,"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-11-10T19:33:01.899Z","updated_at":"2025-07-15T12:44:53.508Z","avatar_url":"https://github.com/artdecocode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# irio\n\n`irio` is a full-stack universal framework for creating fast ultra-modern website and web applications while enjoying great developer experience and saving precious time.\n\nThe progressive web app qualities are achieved due to the use of the service-worker.\n\n## Installing `Irio`\n\nTo bootstrap an `irio` website, the `mnp` package is used which needs to be installed globally.\n\n```sh\nnpm i -g mnp\n```\n\nTo then make a new package which contains the website, the following command should be used:\n\n```sh\nmnp my-irio-app -s irio\n```\n\nIt will create a `my-irio-app` package in the current directory with everything needed to develop and run the website.\n\n## What Is `Irio`\n\n`irio` is a Node.js framework software that allows to build both `back-end` and `front-end` applications at the same time with the help of `JSX` syntax. One does not need to have to know a lot about the `React` product to write such syntax, which makes it possible for the small team of developers or a single developer to tackle the problem of creating a modern websites. Moreover, the website being developed automatically becomes a progressive web app, which gives the opportunity to reach a more wide group of users, and provide them with the wonderful experience brought by the closer integration with the native OS (such as an iPhone or Android device),\n\nBy reusing React components on both **server-side code** and **bundled browser code**, loading of applications becomes very fast. This fact plays an important role when it comes to Search Engine Optimisation.\n\n## Why Use `Irio`\n\nCoupled with the principle of splitting each page into a separate folder and automatically initialising as pages on the website, `irio` achieves the aim of making a new **universal website** in seconds. The bundles are generated with `browserify` and dead-code elimination can take place. By contrast to `Webpack`, one does not have to be tied to the building paradigm, as `browserify` presents as more flexible software. `Hacking browserify pipeline` produces more fun than playing with corporate webpack.\n\n## Configuration\n\nThe server is configured via the main `app.js` file, where a new instance of `irio` is created. The configuration is passed the the first argument, however is not necessary, since `irio` will work with default settings, but more extended methods can be specified, such as caching.\n\n```js\nimport idio from 'idio'\n\nconst { url, app, methods, router } = await irio({\n\n})\n```\n\n## Structure\n\n`irio` expects the structure to be normalised so that it can easily initiate it and start the website. It assumes that the website is centred around the `GET` pages, so that every __route__ is put into the `pages` folder. The `POST` request are handled with `forms` subdirectory in route.\n\nAll JavaScript files found in the `scripts` directory will be embedded into the page and served as static files. The scripts are compiled with `babel` so the newest language features are available to the programmer, including `async/await`, `import Component from '../Component'` and JSX `\u003cComponent data={...data}\u003e\u003cComponent\u003e`.\n\nThe styles should be put in the `styles` directory and also served as static files and embedded into the page using the `\u003clink\u003e` tag.\n\nWhen a user makes a request to a given route, the server executes the `index.jsx` script which should require the `Page.jsx` found in components. The react internal representation will be built according to this logic (this means that the hydration will be executed against the `Page.jsx` component in the main `div` of the website). Because the rendering of the page is done on the server, the website is served extremely fast, and once the React bundle is loaded, the client will perform only local navigation, that is render pages client-side without querying the server. The dynamic data is then fetched via an AJAX API interface of the app. Because the user might not interact with the website for the first 10 seconds, during that time the browser bundle is loaded and evaluated, so that the next page can be available in no time.\n\n```fs\nirio/\n├── index.js\n├── dev.js\n├── package.json\n├── pages\n│   ├── index\n│   │   ├── images\n│   │   │   └── world.jpg\n│   │   ├── scripts\n│   │   │   ├── index.js\n│   │   ├── styles\n│   │   │   └── index.css\n│   │   ├── Components\n│   │   │   └── Page.jsx\n│   │   └── index.jsx\n│   ├── editorial\n│   │   ├── scripts\n│   │   ├── styles\n│   │   ├── Components\n│   │   │   └── Page.jsx\n│   │   └── index.js\n│   └── special\n│       ├── scripts\n│       ├── styles\n│       ├── Components\n│       │   └── Page.jsx\n│       └── index.js\n├── static\n│   ├── jquery.js\n│   └── service-worker.js\n└── upload\n```\n\n## Starting Server\n\nThe `yarn start` or `yarn dev` commands can be run to start the server. The first one will attempt to build the website and serve the built version (as used in the Docker container), whereas the `dev` command will run a local version tailed for the developer experience.\n\n## Deployment In Cloud\n\nAn easy and solid deployment process is achieved with the Docker image. Based on the Node-alpine docker image with `yarn` support, the website can be deployed to a Linux container.\n\n## Deployment to `demimonde.cc`\n\n[`Demimonde`](https://demimonde.cc) is a service to host `irio` websites. For easy deployment of the applications, a `demimonde` account with an API key can be registered. It also provides access to the analytics of site usage via the back-end and not the front end (that is, from the server logs with the `ElasticSearch` integration), without having to embed third-party script bundles (such as analytics scripts).\n\n## Privacy Notice\n\nThe privacy notice to comply with the regulations is shown to users when session is made use of for the first time. This means if no tracking of usage is performed by the application and it does not send analytical data, the notice is not required, but on the condition that the data gathered using back-end analytics engine Elastic Search is depersonalised and could not be used to devise each natural person's identity.\n\nHowever, if the application does store the user data, a Privacy Policy generator feature of `irio` can be used to make a special section in regards to the privacy. Via this feature, website creators can go through a guided process of creating such policy for their website in order to comply with the European Data Protection Regulation 2018. A number of templates are provided.\n\u003c!-- , and phone support and consultations are provided by **Demimonde**. --\u003e\n\n\u003c!-- gain access to a check-list and step-by-step instructions along with the recommendations and suggestions in the user interface are --\u003e\n\n## Mongo Database\n\n`irio` enjoys the implementation of a database interface. The mongo connection will be established when the connection string is passed, however by default, the database is not used.\n\n```js\n{\n  \"database\": process.env.MONGO_URL\n}\n```\n\n## Service Worker\n\nThe `service-worker.js` script makes the app __progressive__ as it allows to load the application shell quickly and cache it for later use from the device.\n\n## Image Optimisation\n\nThe developers do not have to worry about embedding the right type of image, and can put the maximum resolution possible. During the `build` process, `irio` will generate smaller versions of the image.\n\nWhen an image is added to the source code of the page with `\u003cimage\u003e` component, and the parser pick up those tags to adapt the image to be responsive to different resolutions, and include correct `html` required to render the optimised image.\n\nFor example, the following snippet is used to generate an html for a page:\n\n```jsx\n\u003cdiv id=\"Hello\"\u003e\n  \u003cimage src=\"images/world.jpg\" alt=\"World is everywhere around you.\"\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cfigure\u003e\n    \u003cpicture\u003e\n    \u003csource media=\"(min-width: 750px)\"\n            srcset=\"images/world-1600_large_2x.jpg 2x,\n                    images/world-800_large_1x.jpg\" /\u003e\n    \u003csource media=\"(min-width: 500px)\"\n            srcset=\"images/world_medium.jpg\" /\u003e\n    \u003cimg src=\"images/world_small.jpg\" alt=\"World is everywhere around you.\"\u003e\n    \u003c/picture\u003e\n    \u003cfigcaption\u003eWorld is everywhere around you.\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\nhttps://developers.google.com/web/ilt/pwa/lab-responsive-images\n\n### Offline Caching\n\nBecause pages are read from the `pages` directory, `irio` makes a representation of the website (including aliases) accessible for browser caching via the `service-worker`.\n\nIt is not enabled by default but when it is, it will cache specified pages on a user's device.\n\nPages for caching can be added using the code below:\n\n```js\n{\n  cache: [\n    \"world\"\n  ]\n}\n```\n\nAlternatively, caching can be enabled on the individual basis and be set from pages, e.g.,\n\n```js\n/* pages/world/index.jsx */\nexport default async (ctx, next) =\u003e {\n  ctx['service-worker'].cache({\n    includeAssets: true, // adds assets by default\n  })\n  // ---^ adds this page and aliases to cache\n}\n```\n\n\u003c!-- Pages for caching can be excluded using the following option:\n\n```js\n{\n  excludeCache: [\n    '/weather'\n  ],\n}\n``` --\u003e\n\nhttps://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker\n\n### Push Notifications\n\nRequest permissions for `push notifications` and make use of Amazon Lambda functions to process emails and push messages to the SNS. Such functionality is achieved with the `pompeii` package which provides the lambda function and the means to push it to the S3 bucket, and automatically configure a new function.\n\nhttps://developers.google.com/web/ilt/pwa/introduction-to-push-notifications\n\nWith proposed structure the applications can use `service-worker` to cache pages for progressive web apps, and receive push notifications.\n\n### Site Map Generation\n\n### Static Site Generator\n\n## building\n\n### minification\n\nThe minifaction is achieved with `uglifyify`\n\n### tree-shaking\n\nSome form of tree shaking was made possible thanks to `common-shakeify`.\n\n### CDN resources\n\nThe `react` and other external vendor distributions are imported into the page with UMD syntax, that is in the global variable via `window`. For instance, the following scripts will be added into the document to make the whole idea possible.\n\n`https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js`\n`https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js`\n`https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js`\n`https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js`\n\nAlthough not shown above, the resources will be added with the `sha256` validation, e.g.,\n\n```js\n\u003cscript\n  src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js\"\n  integrity=\"sha256-R9mHnFtrqNBSv0u7IGrwrn8TxfZaWD0UjHo9xvqDHSM\"\n  origin=\"anonymous\"\n\u003e\n\u003c/script\u003e\n```\n\nFor [bootstrap](#bootstrap-grid), the viewport `width=device-width, initial-scale=1, shrink-to-fit=no` will be set,\n\nWhen running a local version, the local js files corresponding to the above are added to the source code of pages. This makes development without an internet connection possible.\n\n## Bootstrap grid\n\nBootstrap is assumed to be the preferred grid system.\n\n## jQuery\n\njQuery can be used, however it is not configured by default. This should be done when using bootstrap's JS.\n\n## Markdown support\n\nPages can be written in mark down and sent as part of the stream.\n\n## Developer Nicesities\n\nBecause developers develop websites, they need to have the best tools to do it in the most effective way -- in other words, to work smart. `irio` puts the developer on the first place and prioritises the developer experience.\n\n### Hot Module Reload\n\nClient-side React component replacement is made possible due to the use of `livereactload``@4` package. When the `NODE_ENV` is set to `development`, it will wrap the bundle in the code necessary to perform the hot module reload of React components. This allows for instant refresh of the page appearance in the browser window after a change in the source code.\n\nWhen `NODE_ENV` is set to `production`, the code wrapping is disabled by pruning the `if (process.env.NODE_ENV == 'development') { ... }` tree during the minification process.\n\n### Hot Route Reload\n\nServer-side reload will refresh a particular route when it sees an update to files in the route directory. Whereas **hot module reload** performs the refresh of the page via the `socket.io`client, the hot route reload just updates the back-end handler to use the newer version of the page.\n\n## `irio():void`\n\nCall this function to get a result you want.\n\n```js\nimport irio from 'irio'\n\n(async () =\u003e {\n  irio()\n})()\n```\n\n---\n\n(c) [artdecocode][1] 2018\n\n[1]: https://artdeco.bz\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdecocode%2Firio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartdecocode%2Firio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdecocode%2Firio/lists"}