[{"_1":2,"_154":-5,"_155":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_133":134},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":-5,"_85":86,"_124":-5,"_125":11,"_126":17,"_127":11,"_128":-5,"_129":11,"_130":-5,"_131":132},"canonicalUrl","https://hub.docker.com/r/michielbdejong/generator-solid-react/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","michielbdejong","reponame","generator-solid-react","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":11,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2019-11-26T13:57:57.3763Z","description","","is_private","last_updated","2019-11-26T14:13:31.642944Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",189,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# Solid React Application Generator\nBased on Facebook's Create React App.\n\nApplication Generator for [Solid](https://solid.inrupt.com) React applications. Part of the [Solid React SDK by inrupt](https://github.com/inrupt/solid-react-sdk).\n\n## External Dependencies\n\n* [Solid React Components](https://github.com/inrupt/solid-react-components)\n* [Solid Style Guide by inrupt](https://design.inrupt.com)\n* [LDFlex](https://github.com/solid/query-ldflex)\n* [React Toast Notifications](https://jossmac.github.io/react-toast-notifications/)\n* [Styled Components](https://www.styled-components.com)\n\n## Prerequisites \n### npm and Yeoman\nTo install the Generator, you will need [npm](https://www.npmjs.com/get-npm), and [Yeoman](https://yeoman.io) if you don't already have them. \n* [npm](https://www.npmjs.com/get-npm) makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing. We recommend the use of a node version manager (nvm) to manage multiple versions of npm, and will also set up your npm permissions properly. To install using a nvm, follow the instructions [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-node-js-and-npm).\n* [Yeoman](https://yeoman.io) provides a generator ecosystem to scaffold complete projects. You can install Yeoman by running the command: ```npm install -g yo```\n### Note on npm permissions\nIf you receive EACCES permission errors, or other permission-related errors when trying to run `npm install -g`, please refer to [this npm document](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) on how to set your permissions correctly.\n## Installation\n\nTo install the generator:\n\n```\nnpm install -g @inrupt/generator-solid-react\n```\n\n## Usage\nOnce the generator is installed, you can create a new application with just a few steps.\n\n1. In a console window, navigate to the desired parent folder of the new application.\n2. Use the command: ``` yo @inrupt/solid-react ```\n3. You will be prompted:\n 1. An application name. This will also be the name of the new folder in which the new application lives.\n 2. Whether or not to install a sample application, or a simple one-page application skeleton\n 3. A version number.\n 4. Whether the application is private or public.\n4. Navigate into the new folder.\n5. If you would like to start the application, simply run ``` npm run start ``` in the new folder, otherwise you can begin editing and writing your application!\n 1. If you would like to run the application in HTTPS mode, you can run the command ```HTTPS=true npm start```, which will launch your app on localhost, using the HTTPS protocol.\n\nNote: We have noticed an error is sometimes thrown when the generator tries to install one of the dependencies of application. If this occurs, try installing [Git](https://git-scm.com/downloads) and then recreating your application.\n\n## What is a Generator?\n\nA [Yeoman generator](https://yeoman.io/) is a scaffolding tool at its core. You can use Yeoman to install applications based on templates. This repo is an example of a template - an application with a build, code structure, and dependencies added and organized for you!\n\nUsing a generator accelerates application development. You don't have to worry about best practices for foundational elements, because we've incorporated them. Our template generates a fully functional application foundation that becomes the base of your new project.\n\nWe have included integrations with essential libraries, as well as pages, routes, and components that are both useful in most Solid applications (like login pages) but also serve as example code to demonstrate how to interface with Solid and [Linked Data](https://solid.inrupt.com/docs/intro-to-linked-data).\n\nThe generated application also incorporates our [Solid Style Guide by inrupt](https://design.inrupt.com) (source available [here](https://github.com/inrupt/solid-style-guide)), featuring a nice integration with [Styled Components](https://www.styled-components.com).\n\n## The Solid React Application\n\nOnce you've [run the generator](#installation-and-usage) and created your starter application, you'll have a site with some basic functionality and style guide integration. As the SDK is continually evolving, take a look at the [Release Timeline](https://github.com/inrupt/solid-react-sdk/tree/master#release-timeline) for what has been implemented and what is currently planned.\n\nIf you would like to add your own look and feel, there are two options. First, you can override the styles from the style guide on demand. A list of the classes and example code can be found on the github page. Second, you could remove the style guide entirely, by removing the dependency from npm / package.json. Note if you do this, the application will lose almost all of its styling, and will need work to look \"right\" again.\n\nNext, you can start building your application! Feel free to remove any pages or code you no longer need. You can use pages (such as the Welcome Page) provided by the generator as a template for how to build your next pages.\n\nThere are also examples of how to use libraries like [LDFlex](https://github.com/solid/query-ldflex) for reading and writing data to a POD, and examples of using existing components.\n\n\n## Error Handling\n\nWe provide different types of error handling in the generated application, which ultimately fall into the following two groups:\n\n1. ***Service Errors***: These errors usually come from an external resource, like a server, library, or other dependency. In our case, this also includes errors from the Solid Server. We use try/catch blocks to display a message to the user.\n\n2. ***UI Errors***: Data errors when a component waits for formatted data typically lead to these. If the data format is wrong, or there are missing properties that are required, this kind of error could trigger. We're using [React Error Boundaries](https://reactjs.org/docs/error-boundaries.html) to show custom messages to the user, rather than the default, which is to show the component tree.\n\n\n ### Service Errors\n\n We provide a custom wrapper component around the React Toast Notifications library to handle Service Errors.\n\n***Usage***\n\nFirst, you will need to import ToastConsumer to have Toaster methods available:\n\n```javascript\nimport { ToastConsumer } from 'react-toast-notifications';\n```\nSecond, call the add method to show a toaster notification\n\n```javascript\n\n\n {({ add }) => (\n \n )}\n\n\n ```\n\n You can also use [Higher-Order Components](https://reactjs.org/docs/higher-order-components.html) to have props available in your component:\n\n ```javascript\n withToastManager(YourComponent);\n ```\n\n The idea is to catch all of the errors from external services and show the user as much detail as we can about the source of the error.\n\n### UI Errors\n\nWe are using [React Error Boundaries](https://reactjs.org/docs/error-boundaries.html), and we have a top level component called ```ErrorBoundaries``` located in the ```components``` folder to catch all possible errors in our components.\n\nAlso included in the same folder is a custom markup component for these global errors, appropriately called ```GlobalErrors```. It contains the actual HTML markup and default text for this component.\n\nIn the event you want more specific errors in a given component, you can call ErrorBoundaries and create your own custom markup:\n\n```javascript\n } >\n \n \n ```\n \n## Internationalization\nInternationalization (commonly known as i18n) is a core part of many web applications. We have integrated the sample application with the common i18n tool, called [react-i18next](https://react.i18next.com/), which is a React plugin for the popular [i18next plugin](https://www.i18next.com/).\n\n### Resource Files\nOur language and translation files are added as JSON files stored in the application. You can find the files in the installed application, under the public/locales folder.\n\nHere you will find a folder per supported language, with a translation.json file inside. The JSON structure inside of the file is broken down by feature area, such as Welcome for the Welcome page.\n\n### Setting a Language\nThe react-i18next plugin is automatically checking for a language code in the localStorage item `i18nextLng`. When the user takes an action that should change the language, simple store the language code (e.g. `en-us`) in this localStorage setting.\n\nAn example of both setting and getting a language can be seen in our component `LanguageDropdown` under /src/components/Utils.\n\n### Adding a new language\nTo add a new language:\n \n 1. First add a new folder and translation file to the /public/locales folder, with translations in place.\n\n 2. Next, inside language-dropdown.component.js, add the new language to `const languages`. This object contains the languages, with an id and an icon. In this case, the icon maps to a flag, which is mapped using [flag-icon-css](http://flag-icon-css.lip.is/). This will add the language and flag to the dropdown.\n\nOnce those two steps are complete then the new language should be compatible with the generated application.\n\n## Access Control\nWhen building new apps, it's crucial to be able to create and manage access to files and containers. Currently your application requests permissions when the user first authenticates, granting permissions to your application. \n\nHowever, many applications will also need to create files or containers and grant access to other people. To that end, the SDK includes examples of creating files and granting access to other users.\n\nFor more information, please see the solid-react-components.\n\n## Notifications\nA key part of modern web applications is notifications. Alongside the solid-react-components library, the generated application now has built-in real time notifications. It reads from both the global inbox (if there is one) and the application-specific inbox that the app generates using the components library.\n\nNotifications are generated via the TicTacToe game example. Invites are sent to webIDs provided in the game creation form, and whenever a move is taken in the game a notification is sent to the opponent.\n\n## Deployment\n\nOnce your application is ready, you can deploy it to a server of your choice.\n\nIt is ***highly recommended*** that you ensure your server is utilizing TLS. If not, you may encounter security-related errors in the browser, particularly in Google Chrome.\n\n\n","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",479992184,"orgData","recentTags",[87],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":96,"_46":113,"_114":90,"_115":29,"_116":52,"_53":117,"_118":119,"_120":104,"_121":113,"_122":62,"_123":17},"content_type","creator",1662,"full_size",479980859,"id",77802556,"images",[97],{"_98":99,"_100":101,"_102":44,"_103":104,"_105":106,"_107":108,"_109":44,"_110":-5,"_111":92,"_59":62,"_112":-5},"architecture","amd64","digest","sha256:b842bfd3f6f065cfecaad8c32ae6f4871096f4f5925d24fae7b6be59ff1a1fff","features","last_pulled","2026-09-15T14:47:49.116675281Z","last_pushed","2019-11-26T14:13:32Z","os","linux","os_features","os_version","size","variant","2019-11-26T14:13:31.307086Z","last_updater","last_updater_username","media_type","latest","repository",8083348,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","showSbxLogoOverride","sbxTrademarkText","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":135,"_142":143,"_131":152,"_153":11},{"_36":136,"_38":137,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":138,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":139,"_75":11,"_76":141,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":140},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_144":60,"_145":-5,"_146":-5,"_147":148},"count","next","previous","results",[149],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":150,"_46":113,"_114":90,"_115":29,"_116":52,"_53":117,"_118":119,"_120":104,"_121":113,"_122":62,"_123":17},[151],{"_98":99,"_100":101,"_102":44,"_103":104,"_105":106,"_107":108,"_109":44,"_110":-5,"_111":92,"_59":62,"_112":-5},[],"canDeleteTags","actionData","errors"]

michielbdejong/generator-solid-react

Tags for michielbdejong/generator-solid-react