{"id":21169084,"url":"https://github.com/cosmicjs/react-news-app","last_synced_at":"2025-07-09T18:31:46.829Z","repository":{"id":77502859,"uuid":"114555621","full_name":"cosmicjs/react-news-app","owner":"cosmicjs","description":"A minimal news blog boilerplate powered by React and the Cosmic API.","archived":false,"fork":false,"pushed_at":"2017-12-18T03:58:38.000Z","size":77,"stargazers_count":13,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-30T16:16:18.474Z","etag":null,"topics":["api","cms","cosmicjs","news","react"],"latest_commit_sha":null,"homepage":"https://cosmicjs.com/apps/react-news-app","language":"JavaScript","has_issues":false,"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/cosmicjs.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,"zenodo":null}},"created_at":"2017-12-17T17:32:34.000Z","updated_at":"2023-11-22T22:52:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e70ba8d-feb0-4ab3-b725-83ae7bb89573","html_url":"https://github.com/cosmicjs/react-news-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cosmicjs/react-news-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Freact-news-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Freact-news-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Freact-news-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Freact-news-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cosmicjs","download_url":"https://codeload.github.com/cosmicjs/react-news-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Freact-news-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502387,"owners_count":23618587,"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":["api","cms","cosmicjs","news","react"],"created_at":"2024-11-20T15:22:51.192Z","updated_at":"2025-07-09T18:31:46.812Z","avatar_url":"https://github.com/cosmicjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React News App\n![React news App](https://cosmic-s3.imgix.net/6aab7520-e3a5-11e7-b2c2-0d51136efa6e-react-news-app.png?w=1200)\n### [View the demo](https://cosmicjs.com/apps/react-news-app)\n\n## Why\n1. The ability to manage content using the [Cosmic JS API](https://cosmicjs.com)\n2. Greater control over the style and layout of your news blog\n3. Leverages the browser cache to help keep API requests lean\n4. Minimal code for greater flexibility for your own adsense or React plugins\n\n## How it works\n1. The React based client requests the backend for the relevant listings or\narticle/page content.\n2. The server uses minimal Express middleware `data.js` to fetch and list articles and pages\nfrom the Cosmic JS API (reducing bulk data for lists)\n3. The React client then renders the data as needed, caching all listings for a\nminimal amount of time.\n\n## Article\nFor further reading, checkout the Cosmic JS article [here](https://cosmicjs.com/articles/building-your-own-news-blog-with-cosmic-js-react-jba337s5).\n\n## Getting started\nMake sure you have npm and git installed before starting to work on this project.\nOnce available, clone the repository using `git clone` and install the required\nbuild dependencies with `npm install`.\n\n```bash\ngit clone https://github.com/cosmicjs/react-news-app\ncd react-news-app\nnpm install\n```\n## Add / Edit Content\n\nYou can easily manage the content in your static site on Cosmic JS. Follow these steps:\n\nLog in to Cosmic JS.\nCreate a bucket.\nGo to Your Bucket \u003e Apps.\nInstall the Cosmic JS News App\nDeploy the code to the Cosmic App Server at Your Bucket \u003e Web Hosting.\n\n### Pages and Articles\n\nThe app utilizes two object types by default, **Pages** and **Articles**. **Pages** are simply\nstatic pages that can be edited directly via Cosmic JS. Pages you create will automatically\nbe fetched and linked on the header of the App.\n\n**Articles** are processed more heavily than Pages, and have some metadata requirements.\nBy default, Articles have fields for **Author**, **Profile Picture** and **Thumbnail**.\nIt is recommended that you fill out all of these fields as they are expected by the\nReact front-end by default.\n\nThumbnails and Profile pictures work bessed as lossly compressed JPEG files, with the best results\ncoming from Profile Pictures at 64px squared, and Thumbnails at a 4:3 ratio\nwith 300px as the minimum width. Anything lower and you risk a poor user experience.\n\n## Configuration\nThis app uses a few other configurations in `config.js`besides the Cosmic JS defaults:\n* `title`: The title of the application. Used within the build process and within the\ntitles of the app.\n* `articlePageSize`: The number of articles loaded within each page.\n\n## App and Components overview\n\nThe React app is located within the `app`\ndirectory, and the built files are then located within the build directory.\n\n**Only items within `build` and `static` are exposed via express. All other endpoints\nare virtual.**\n\nThe news app uses a minimal front-end router via React that diassembles the url\nchecking for recognized names and ids. This is done via the root-level `App` component.\n\n### Components\n\n* `Article` the article component renders articles based on id (if they exist).\n* `app/common/` contains key Components used for rendering shared items such as the Header,\nSidebar, and loading animation (`Loader`).\n* `Home` is the default view for the app, showing minimal listings of tile elements that\nwill route to a article\n* `Page` is like `Article`, but with less formatting than `Article`\n\nThe `App` component is responsible for managing the active list for articles and pages,\nand as the router. It also manages the localStorage cache, which is cleared after 5 minutes.\n\n`app/styles` contains the styles required for rendering compoents. `base.less` is\nthe primary file required for rendering the application. All other required less files\nare included within `base.less` by default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Freact-news-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosmicjs%2Freact-news-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Freact-news-app/lists"}