{"id":13779812,"url":"https://github.com/nesterow/frontless","last_synced_at":"2025-05-11T13:31:13.354Z","repository":{"id":37735472,"uuid":"177525820","full_name":"nesterow/frontless","owner":"nesterow","description":"Build universal JS applications with Riot.JS","archived":true,"fork":false,"pushed_at":"2023-01-03T23:28:36.000Z","size":104029,"stargazers_count":110,"open_issues_count":27,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-16T23:29:57.494Z","etag":null,"topics":["expressjs","isomorphic","javascript","nodejs","riotjs","ssr"],"latest_commit_sha":null,"homepage":"https://frontless.js.org/","language":"JavaScript","has_issues":false,"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/nesterow.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-25T06:16:28.000Z","updated_at":"2024-08-23T17:38:02.000Z","dependencies_parsed_at":"2023-02-01T13:31:32.566Z","dependency_job_id":null,"html_url":"https://github.com/nesterow/frontless","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterow%2Ffrontless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterow%2Ffrontless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterow%2Ffrontless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterow%2Ffrontless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nesterow","download_url":"https://codeload.github.com/nesterow/frontless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225056738,"owners_count":17414196,"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":["expressjs","isomorphic","javascript","nodejs","riotjs","ssr"],"created_at":"2024-08-03T18:01:09.525Z","updated_at":"2024-11-17T15:30:42.103Z","avatar_url":"https://github.com/nesterow.png","language":"JavaScript","readme":"\u003cimg src=\"https://github.com/nesterow/frontless/blob/develop/assets/media/logo.svg\" height=\"50\"/\u003e \n\n[![Build Status](https://travis-ci.org/nesterow/frontless.svg?branch=master)](https://travis-ci.org/nesterow/frontless)\n[![StackShare](http://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/nesterow/frontless)\n![version](https://img.shields.io/badge/Version-1.0.0@alpha-yellow.svg)\n![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)\n\n\u003cp style=\"color: green;\"\u003e Feathers + Riot + Turbolinks + Express\u003c/p\u003e\n\u003ca href=\"https://t6mj3.sse.codesandbox.io/\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://codesandbox.io/favicon.ico\" height=\"20\"/\u003e View demo on CodeSandbox.io (refresh if you see 503 error)\n\u003c/a\u003e\n\n\n## About\n\nFrontless is a node.js stack for building universal (isomorphic) javascript applications. At the core, Frontless is just a small Express server that provides a developer with powerful tools for building SSR web applications.\n\nFrontless is built around the best javascript technologies: Feathers.JS , Riot.JS, Turbolinks, and Express.\n\n#### Motivation\n\nIn practice, the serverless approach significantly complicates work with data and causes front-end developer to write the code, which would be better performed by the server rather than a browser application. The server has to be responsible for things like routing, db requests, user state (sessions), and in some cases - component's view-model. It would make a front-end developer better concentrate on UI rather than repeating the functionality which is done by back-end in more reliable way.\n\n\n#### The Stack\n\nBefore you start, it is highly recommended to have essential understanding of following technologies:\n\u003cbr\u003e\n[FeathersJS](https://github.com/feathersjs/feathers) | \n[RiotJS](https://github.com/riot/riot) |\n[Turbolinks](https://github.com/turbolinks/turbolinks) |\n[ExpressJS](https://github.com/expressjs/express)\n\u003cdetails\u003e\u003csummary\u003eStack summary\u003c/summary\u003e\n\n\n| SERVER        | CLIENT        |\n| :------------- |:-------------|\n| Routing - *express.js* | Navigation - *turbolinks* |\n| View Model - *feathers*    | Data Representation - *riot.js* |\n| Layout Rendering - *riot/ssr* | User input - *riot.js*  |\n| Sessions - *express.js* | *JWT, Cookies* |\n| Realtime - *feathers, socket.io]* | *@feathers/client* |\n| DB Interface - *@feathers/client* | Rest/IO - *@feathers/client* |\n\n\n\u003c/details\u003e\n\n## Getting Started\n\n1. Clone [this repo](https://github.com/nesterow/frontless) or use NPX\n\n```\n  npx create-frontless \u003capp-name\u003e\n```\n2. Setup a MongoDB Server (optional). Frontless reads `MONGODB_URI` environment variable.\n```\n  # config.env\n  MONGODB_URI=mongodb://localhost:27017/frontless\n```\n3. Install dependencies and start dev. server\n```\n  npm run install\n  npm start\n```\nОpen [http://localhost:6767](http://localhost:6767) in your browser. Navigate to the playground for examples \n\n## Features\n\n**Simple routing scheme**\n\nRouting in-web applications should be as simple as it is in static sites. With that in mind, any Riot.JS component placed in the pages directory is accessible by browser: [`index.riot -\u003e GET /`, `page.riot -\u003e GET /page`].\n\nAlso, a page can accept positional arguments and it also has access to the Express request context:\n```javascript\n// GET https://example.com/foo@bar;baz\nexport default {\n  async fetch(){\n    const {args} = this.req.params;\n    const [arg1, arg2] = args;\n    console.log(arg1 === 'bar') // true\n    // arg2 = baz\n  }\n}\n```\n\n**Synchronous rendering**\n\nFrontless can render pages after all asynchronous calls are complete. Including children riot components nested inside the page markup.\n\n**Server-sent state**\n\nSome API requests can return a ready view-model for a specific component. After it happens, the target component will update its state from received response. This is convenient whenever you want to update the view after a request is done. Given that, the server should return a ready view-model which eliminates extra steps you would do to handle response.\n\n**State initialization**\n\nAll Riot components rendered on the server side initialize in browser with last state they were on the server side. \n\n\n**RestAPI/Socket.IO**\n\nStay close to the database with power of FeathersJS services.\n\n**It is just Express.JS**\n\nEverything you can do with an express application.\n\n## Documentation\n[Frontless Docs](https://frontless.js.org) | [Feathers Docs](https://docs.feathersjs.com/) | [Riot Docs](https://riot.js.org/)\n\n## ❤️ Contribute\n\nIf you found a problem and know the solution:\n- Fork repository\n- Fix the problem\n- Push your fix to a separate branch\n- Make pull request to the `development` branch\n\nIf you need help, just [open an issue](https://github.com/nesterow/frontless/issues)\n\nIf you understand how it works under the hood, or feel like you can make this project better don't hesitate to message me directly.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/nesterow/frontless/blob/master/LICENSE) file for details\n\n## Changelog v1.0.x\n[changelog.md](https://github.com/nesterow/frontless/blob/master/changelog.md)\n\n## Roadmap v2.0\n* [ ] Static site builder [10%]\n* [ ] Global state syncronization\n* [ ] Push Notifications\n\n## Authors\n\n* **Anton Nesterov** - [@nesterow](https://github.com/nesterow)\n\n## Credits\n* **Gianluca Guarini** - [@GianlucaGuarini](https://github.com/GianlucaGuarini) - *[riot/hydrate](https://github.com/riot/hydrate)*, *[Riot.js](https://github.com/riot/riot)*\n\n## Readme\n[Why B2B startups shouldn't use React](https://dev.to/snird/why-b2b-startups-shouldn-t-use-react-or-any-js-framework-3j74)\n\n","funding_links":[],"categories":["Resources"],"sub_categories":["Examples"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnesterow%2Ffrontless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnesterow%2Ffrontless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnesterow%2Ffrontless/lists"}