{"id":15413199,"url":"https://github.com/tomwayson/ember-react-arcgis-hub-test","last_synced_at":"2025-07-28T08:38:37.999Z","repository":{"id":148607033,"uuid":"151622868","full_name":"tomwayson/ember-react-arcgis-hub-test","owner":"tomwayson","description":"Test how to share Bootstrap styles and i18n messages between an Ember application and React components","archived":false,"fork":false,"pushed_at":"2018-10-04T20:04:16.000Z","size":119,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-11T16:23:58.729Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomwayson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-10-04T19:09:27.000Z","updated_at":"2018-10-04T20:04:17.000Z","dependencies_parsed_at":"2023-05-20T16:45:15.105Z","dependency_job_id":null,"html_url":"https://github.com/tomwayson/ember-react-arcgis-hub-test","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"a913a770cc4359eb320772f5fb33f8dd04c9c084"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomwayson%2Fember-react-arcgis-hub-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomwayson%2Fember-react-arcgis-hub-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomwayson%2Fember-react-arcgis-hub-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomwayson%2Fember-react-arcgis-hub-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomwayson","download_url":"https://codeload.github.com/tomwayson/ember-react-arcgis-hub-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247385695,"owners_count":20930600,"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-10-01T16:56:00.527Z","updated_at":"2025-04-05T18:46:17.397Z","avatar_url":"https://github.com/tomwayson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-react-arcgis-hub-test\n\nThis application tests how to share Bootstrap styles and i18n messages between an Ember application and React components. I created [react-arcgis-hub](https://github.com/tomwayson/react-arcgis-hub) as a library of React components that are specifically designed to work in both React and Ember applications that use Bootstrap and either [react-intl](https://github.com/yahoo/react-intl) or [ember-intl] respectively. This application verifies that those components work in an Ember application using [ember-cli-react], [ember-intl], and [ember-bootstrap].\n\n![react-in-ember](https://user-images.githubusercontent.com/662944/46497205-c3fb0b00-c7ce-11e8-847f-36b5dd9f0bf7.gif)\n\n## How it works\nAll I had to do to make the React components available to the Ember app was:\n\n```bash\nember i ember-cli-react\nember i ember-auto-import\nember i ember-intl\nyarn add react-arcgis-hub\n```\n\nThanks to the magic of   [ember-auto-import](https://github.com/ef4/ember-auto-import) and [ember-cli-react], I was then able to write DDAU-style React components in my app [like this](./app/components/HubAuthForm.jsx) that `import` components from react-arcgis-hub and pass down properties and closure actions:\n\n```hbs\n{{hub-auth-form intl=intl onSignIn=(action 'signIn') }}\n```\n\n#### i18n\n\nNotice how I pass in ember-intl's [intl](https://github.com/ember-intl/ember-intl/blob/2.x/docs/ember-service-api.md) service? The React components use that service to look up translations. Their translations need to be merged with those of the Ember app in order for this to work. Right now this happens via [an in-repo addon that has a copy of  react-arcgis-hub translations](./lib/ember-react-arcgis-hub/translations). However there are still some [kinks to be worked out](https://github.com/tomwayson/ember-react-arcgis-hub-test/issues/1).\n\n#### Styles\nThis example application uses [ember-cli-sass](https://github.com/aexmachina/ember-cli-sass) to [import and compile the .scss files that are distributed with react-arcgis-hub](./app/styles/app.scss) along with the Bootstrap sass files provided by [ember-bootstrap]. This allows the application to overwrite component styles by setting variables. Alternatively the application could have used the [compiled CSS that react-arcgis-hub distributes](https://unpkg.com/react-arcgis-hub@0.0.1/dist/css/) along with Bootstrap's own pre-compiled CSS.\n\n### Limitations\n\nFirst, ember-cli-react describes itself as an \"experimental addon\" that [the authors are not even using yet in production](https://github.com/AltSchool/ember-cli-react).\n\nBeyond that, there are a few [constraints I had to follow when authoring the React component library](https://github.com/tomwayson/react-arcgis-hub/blob/master/README.md#limitations).\n\n## Prerequisites\n\nYou will need the following things properly installed on your computer.\n\n* [Git](https://git-scm.com/)\n* [Node.js](https://nodejs.org/)\n* [Yarn](https://yarnpkg.com/)\n* [Ember CLI](https://ember-cli.com/)\n* [Google Chrome](https://google.com/chrome/)\n\n## Installation\n\n* `git clone \u003crepository-url\u003e` this repository\n* `cd ember-react-arcgis-hub-test`\n* `yarn install`\n\n## Running / Development\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).\n\n### Code Generators\n\nMake use of the many generators for code, try `ember help generate` for more details\n\n### Running Tests\n\n* `ember test`\n* `ember test --server`\n\n### Building\n\n* `ember build` (development)\n* `ember build --environment production` (production)\n\n### Deploying\n\nSpecify what it takes to deploy your app.\n\n## Further Reading / Useful Links\n\n* [ember.js](https://emberjs.com/)\n* [ember-cli](https://ember-cli.com/)\n* Development Browser Extensions\n  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)\n  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)\n\n[ember-cli-react]:https://github.com/AltSchool/ember-cli-react\n[ember-bootstrap]:https://www.ember-bootstrap.com/\n[ember-intl]:https://github.com/ember-intl/ember-intl\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomwayson%2Fember-react-arcgis-hub-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomwayson%2Fember-react-arcgis-hub-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomwayson%2Fember-react-arcgis-hub-test/lists"}