{"id":17668580,"url":"https://github.com/evanshortiss/rhmap-hello-world-typescript-react","last_synced_at":"2025-08-25T23:12:30.257Z","repository":{"id":66153942,"uuid":"95041788","full_name":"evanshortiss/rhmap-hello-world-typescript-react","owner":"evanshortiss","description":"An RHMAP Hello World application written using TypeScript and React","archived":false,"fork":false,"pushed_at":"2018-04-04T00:04:10.000Z","size":2657,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T09:10:39.498Z","etag":null,"topics":["browserify","cordova","feedhenry","javascript","mobile","mobile-app","react","rhmap","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/evanshortiss.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":"2017-06-21T20:10:01.000Z","updated_at":"2018-04-04T00:04:12.000Z","dependencies_parsed_at":"2023-07-04T12:05:23.667Z","dependency_job_id":null,"html_url":"https://github.com/evanshortiss/rhmap-hello-world-typescript-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/evanshortiss/rhmap-hello-world-typescript-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanshortiss%2Frhmap-hello-world-typescript-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanshortiss%2Frhmap-hello-world-typescript-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanshortiss%2Frhmap-hello-world-typescript-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanshortiss%2Frhmap-hello-world-typescript-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evanshortiss","download_url":"https://codeload.github.com/evanshortiss/rhmap-hello-world-typescript-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanshortiss%2Frhmap-hello-world-typescript-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272144679,"owners_count":24881145,"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","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["browserify","cordova","feedhenry","javascript","mobile","mobile-app","react","rhmap","typescript"],"created_at":"2024-10-23T23:23:08.269Z","updated_at":"2025-08-25T23:12:30.206Z","avatar_url":"https://github.com/evanshortiss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RHMAP Hello World using TypeScript and React\nSince the RHMAP JavaScript SDK supports TypeScript we've provided this example\nof how you could implement our standard [hello world](https://github.com/feedhenry-templates/helloworld-app)\nclient in TypeScript while using React to manage UI components and state.\n\n\n## Running the Application\n\n### Prerequisites\nThese are a guideline, newer versions should work too:\n\n* node.js v4.4.3\n* npm v4.6.1\n* Visual Studio Code or a similar TypeScript ready text editor or IDE\n\n### On RHMAP\nRunning this appliaction on RHMAP can be achieved by going to your domain and\nselecting an existing project or creating a new blank project as shown below:\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/1-create-project.png)\n\nOnce you have a project you can add a new Client Application to it using the\nplus icon in the corner as shown below:\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/2-project-created.png)\n\nWhen adding the Client Application choose \"Import Existing Application\" and when\nprompted to select a type choose \"Cordova\":\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/3-create-client.png)\n\nNow, enter the HTTPS link to this repository when prompted and choose the\nmaster branch:\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/4-create-client-import.png)\n\nOnce the import is complete you can return to the project screen and add a Cloud\nApplication similar to how you added the client:\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/5-client-created.png)\n\nSelect the regular \"Cloud App\" template and give it a name:\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/6-create-cloud.png)\n\nOnce the Cloud Application is created you can navigate back to your Client\nApplication. Go to the \"Build\" screen and build the application for the platform\nof your choice! Don't foget to deploy the Cloud Application!\n\n![](https://raw.githubusercontent.com/evanshortiss/rhmap-hello-world-typescript-react/master/screenshots/7-build-client.png)\n\n### On a Local Development Machine\nBefore running locally be sure to get the [Hello World Cloud](https://github.com/feedhenry-templates/helloworld-cloud) setup locally.\n\nTo run this example simply clone it locally and do the following inside the\nrepository:\n\n```\n# install dependencies...might take a minute or two\nnpm install\n```\n\n#### Browser\nTo view this application in a browser simply run: \n\n```\n# start will run a local http server on port 8080 to serve the application\nnpm start\n```\n\nNow you can open `http://localhost:8080/?url=http://localhost:8001` in a browser\nand play with the application.\n\n\n#### iOS/Android Simulator\n\n_Note: You will need the applicable developer tools installed for the platform\nyou are targetting. For iOS this means a recent version of macOS and the XCode\nDeveloper Tools for iOS are installed. Similarly, for Android you'll need the\nAndroid Developer tools installed. More detail is provided by the\n[Apache Cordova Platforms Guide](https://cordova.apache.org/docs/en/latest/guide/platforms/android/)._\n\nIf you'd like to view this application in an iOS or Android simulator you'll\nneed to update the file `www/fhconfig.json` with the following lines:\n\n```\n\"host\": \"http://localhost:8001\",\n\"local\": true\n```\n\nThese lines tell the SDK it's running locally and that it should target the\nspecified host - similar to the `url` querystring parameter in the Browser\nexample above.\n\nNow you can run either `npm run ios-sim` or `npm run android-sim` to start the\napplication inside an simulator/emulator and have it communicate with the local\nCloud Application. It can also communicate with a Cloud Application running on\nRHMAP if you leave the standard `fhconfig.json` entries intact.\n\n\n## Application Overview\nThis application is a simple example of using the following technologies to\ncreate a structured, statically typed, Cordova application that sends data to\na Red Hat Mobile Application Platform via HTTPS and prints the response.\n\nThe best place to start reading the code is in the `www/index.html` and\n`src/index.tsx` files. Did you notice that `index.html` references JavaScript\nfiles that aren't checked into the repository? This is because they are\ngenerated when you run `npm start` or `npm run compile` inside the repository.\n\n### Technologies\n\n#### TypeScript\nTypeScript is a superset of JavaScript that provides optional static typing and\nnew JavaScript language features. It compiles down to ES5 JavaScript so it can\nbe safely deployed in older browsers and JavaScript engines. Most popular\nJavaScript libraries and frameworks support TypeScript by providing type\ndefinitions. This improves the development experience by catching errors before\nruntime, making code easier to read and understand, and enabling excellent\nintellisense.\n\n#### FeedHenry JS SDK\nThe FeedHenry JavaScript SDK provides multiple features such as HTTPS secured\nData Synchronisation capabilties bewteen mobile devices and a node.js server\nrunning on RHMAP. Recent versions of the SDK provide TypeScript type definitions\nto provide an improved, more efficient developer experience and better\ndocumentation.\n\n#### Cordova\nCordova wraps a web application inside a native container to faciliate building\nnative mobile applications. It provides an interface that facilitates\ncommunication between the JavaScript layer and native mobile APIs so developers\ncan create a native-like user experience using their favourite web technolgies.\n\n#### React\nReact is a JavaScript library that enables developers to create applications\nby composing isolated UI components that manage their own internal state. When\nchanges to state are made React will update the DOM efficiently by only\nre-rendering the affected components.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanshortiss%2Frhmap-hello-world-typescript-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevanshortiss%2Frhmap-hello-world-typescript-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanshortiss%2Frhmap-hello-world-typescript-react/lists"}