{"id":22962032,"url":"https://github.com/actionanand/single-spa-react","last_synced_at":"2025-04-02T03:23:46.506Z","repository":{"id":50364199,"uuid":"518555236","full_name":"actionanand/single-spa-react","owner":"actionanand","description":"This is the single-spa application/parcel app using react. This repo is used in conjunction with four other repos(single-spa root config, angular, vue, and svelte) to build an app.","archived":false,"fork":false,"pushed_at":"2022-08-14T18:42:09.000Z","size":1184,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-07T18:17:21.150Z","etag":null,"topics":["microfrontend","react","react17","reactjs","single-spa","single-spa-react"],"latest_commit_sha":null,"homepage":"https://ar-single-spa-demo.herokuapp.com/react","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/actionanand.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}},"created_at":"2022-07-27T17:36:51.000Z","updated_at":"2022-07-28T17:06:49.000Z","dependencies_parsed_at":"2022-07-31T14:39:07.336Z","dependency_job_id":null,"html_url":"https://github.com/actionanand/single-spa-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fsingle-spa-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/single-spa-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246748354,"owners_count":20827303,"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":["microfrontend","react","react17","reactjs","single-spa","single-spa-react"],"created_at":"2024-12-14T19:14:51.773Z","updated_at":"2025-04-02T03:23:46.489Z","avatar_url":"https://github.com/actionanand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single-spa React\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) with the help of [single-spa](https://single-spa.js.org/). React version used is `17.0.2`.\n\n\n## Overview\n\nThis repo is used in conjunction with nine other repos listed below. Together they make up an application composed of microfrontends. Each app can be updated and deployed independently from the others.\n\n- [**Root Config**](https://github.com/actionanand/single-spa-demo-root-config)\n- [**Angular App**](https://github.com/actionanand/single-spa-angular)\n- [**React App** (This Repo)](https://github.com/actionanand/single-spa-react)\n- [**Vue App**](https://github.com/actionanand/single-spa-vue)\n- [**Svelte App**](https://github.com/actionanand/single-spa-svelte)\n- [**Nav Bar App**](https://github.com/actionanand/single-spa-nav)\n- [**Footer App**](https://github.com/actionanand/single-spa-footer)\n- [**404 App**](https://github.com/actionanand/single-spa-404)\n- [**Vanilla JS App**](https://github.com/actionanand/single-spa-vanilla-js)\n- [**Utility App**](https://github.com/actionanand/single-spa-utility)\n\n## Demo\n\nYou can find the demo here: [Single-Spa-Demo App](https://ar-single-spa-demo.herokuapp.com/)\n\n## How to run this repo locally\n\n```bash\nyarn start\n```\n\n## How to build for production\n\n```bash\nyarn build:webpack\n```\n\n## How to create single-spa frontend app\n\n```bash\nnpx create-single-spa\n```\n\n## How to serve raw github content as CDN\n\n```\nhttps://cdn.jsdelivr.net/gh/\u003cgithub-username\u003e/\u003cgithub-repo-name@branch-name\u003e/\u003cfilename\u003e\n```\n\n## How It Works\n\nThis project uses [single-spa](https://single-spa.js.org/) to architect an app composed of `micro-frontends`. In the root config, the eight other microfrontend apps (such as angular, react, vue, and svelte) are registered with singe-spa. The main `index.ejs` file contains an import map, which references where to find the compiled JavaScript bundle for each microfrontend. [SystemJS](https://github.com/systemjs/systemjs) is the module loader which then loads the bundles when needed. Utility app serves shared data between other apps.\n\n\n### NB\n\nEach repo can be set up with [Travis CI](https://travis-ci.org/) for running jobs as part of a continuous integration pipeline. When new code is pushed to the master branch for any of the repos, the new code is compiled and then uploaded to AWS S3, which serves as a CDN. The CI job also updates the import map file to reference the new bundle for the updated project.\n\n### Sources\n\n- [How to Develop and Deploy Micro-Frontends with Single-SPA](https://www.freecodecamp.org/news/developing-and-deploying-micro-frontends-with-single-spa/)\n- [Fun with Micro-frontend in a single-spa way](https://dev.to/nitinreddy3/fun-with-micro-frontend-in-a-single-spa-way-1iok)\n- [Connect Micro frontends with the Single-Spa framework. Step by step guide.](https://obaranovskyi.medium.com/connecting-micro-frontends-with-the-single-spa-framework-step-by-step-guide-e7fa87306bc7)\n- [RawGit](https://rawgit.com/)\n- [Raw Github js file not loading (direct link) like CDN - stackoverflow](https://stackoverflow.com/questions/62901066/raw-github-js-file-not-loading-direct-link-like-cdn/)\n- [How to deploy a React, Angular and Vue project to Github pages](https://deepinder.me/how-to-deploy-a-react-angular-vue-project-to-github-pages)\n- [Micro frontends: Cross-application communication with Single-Spa and RxJS.](https://obaranovskyi.medium.com/micro-frontends-cross-application-communication-with-single-spa-and-rxjs-aa55084bf344)\n- [Implementing Micro Frontends Using Single SPA](https://betterprogramming.pub/implementing-micro-frontends-using-single-spa-1ac2a3f704a2)\n- [45 Best React Projects for Beginners in Easy to Hard Order](https://contactmentor.com/best-react-projects-for-beginners-easy/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fsingle-spa-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fsingle-spa-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fsingle-spa-react/lists"}