{"id":18317213,"url":"https://github.com/single-spa/standalone-single-spa-webpack-plugin","last_synced_at":"2025-04-04T10:07:40.311Z","repository":{"id":48020623,"uuid":"302774290","full_name":"single-spa/standalone-single-spa-webpack-plugin","owner":"single-spa","description":"A webpack plugin for running microfrontends in standalone mode.","archived":false,"fork":false,"pushed_at":"2025-02-22T03:02:06.000Z","size":1176,"stargazers_count":45,"open_issues_count":6,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T09:07:15.177Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/single-spa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["joeldenning"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-10-09T23:30:40.000Z","updated_at":"2025-02-22T03:02:10.000Z","dependencies_parsed_at":"2024-12-13T19:22:27.778Z","dependency_job_id":null,"html_url":"https://github.com/single-spa/standalone-single-spa-webpack-plugin","commit_stats":{"total_commits":40,"total_committers":3,"mean_commits":"13.333333333333334","dds":"0.050000000000000044","last_synced_commit":"bddc2a48dc324380678f9054dde026d6990be79a"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fstandalone-single-spa-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fstandalone-single-spa-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fstandalone-single-spa-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/single-spa%2Fstandalone-single-spa-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/single-spa","download_url":"https://codeload.github.com/single-spa/standalone-single-spa-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157281,"owners_count":20893220,"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-11-05T18:05:25.595Z","updated_at":"2025-04-04T10:07:40.302Z","avatar_url":"https://github.com/single-spa.png","language":"JavaScript","funding_links":["https://github.com/sponsors/joeldenning"],"categories":[],"sub_categories":[],"readme":"# standalone-single-spa-webpack-plugin\n\nA webpack plugin for running single-spa microfrontends in standalone mode. This is an alternative to using [import-map-overrides](https://github.com/joeldenning/import-map-overrides).\n\n\u003e **⚠️ Warning about Standalone Mode**\n\u003e\n\u003e Standalone mode is not equivalent to developing in integrated mode, as the single-spa root config is not exactly the same in each.\n\u003e\n\u003e - Since the root config in standalone mode is not exactly the same as in integrated mode, this can lead to situations where it \"works on my machine, but not on the deployed environment.\"\n\u003e - This plugin automatically upgrades to the latest versions of SystemJS and single-spa, which is likely different than most environments, which pin to a specific version.\n\u003e - If a hard coded import map is used in this plugin's configuration, it may quickly become outdated. This may lead to developing locally against a package whose API has changed.\n\u003e - By default, this plugin does not load any global scripts, fonts, or css in the HTML file.\n\n## Installation\n\n```sh\nnpm install --save-dev standalone-single-spa-webpack-plugin\n\n# alternatively\nyarn add --dev standalone-single-spa-webpack-plugin\n\npnpm install --dev standalone-single-spa-webpack-plugin\n```\n\n## Usage\n\nTo use the plugin, add it to your webpack config. Then when you run webpack-dev-server, an HTML file will be generated that loads and mounts your microfrontend as a single-spa application or parcel.\n\n```js\n// webpack.config.js\nconst StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  devServer: {\n    // Not required, but it's often useful to run webpack-dev-server in SPA mode\n    historyApiFallback: true\n  },\n  plugins: [\n    // the standalone plugin works in conjunction with HtmlWebpackPlugin\n    new HtmlWebpackPlugin(),\n\n    new StandaloneSingleSpaPlugin({\n      // required\n      appOrParcelName: \"my-microfrontend-name\",\n\n      // optional - either \"esm\" or \"systemjs\", defaults to esm as of v6\n      moduleFormat: \"esm\",\n\n      // optional - strongly encouraged for single-spa applications\n      activeWhen: ['/route-prefix'],\n\n      // optional - useful for enabling cross-microfrontend imports\n      importMapUrl: new URL(\"https://my-cdn.com/importmap.json\"),\n\n      // optional - useful to add multiple import map URLs\n      importMapUrls: [\n        new URL(\"https://my-cdn.com/importmap2.json\"),\n        new URL(\"https://my-cdn.com/importmap3.json\"),\n      ],\n\n      // optional - useful for adding an additional, local-only import map\n      importMap: {\n        imports: {\n          \"other-module\": \"/other-module.js\"\n        }\n      },\n\n      // optional - defaults to false. This determines whether to mount\n      // your microfrontend as an application or a parcel\n      isParcel: false,\n\n      // optional - you can disable the plugin by passing in this boolean\n      disabled: false,\n\n      // optional - the standalone plugin relies on optionalDependencies in the\n      // package.json. If this doesn't work for you, pass in your HtmlWebpackPlugin\n      // to ensure the correct one is being referenced\n      HtmlWebpackPlugin,\n\n      // optional - defaults to true - turns on or off import-map-overrides.\n      importMapOverrides: true,\n\n      // optional - defaults to null. This allows you to hide the import-map-overrides UI\n      // unless a local storage key is set. See more info at https://github.com/joeldenning/import-map-overrides/blob/master/docs/ui.md#enabling-the-ui\n      importMapOverridesLocalStorageKey: null\n\n      // optional - defaults to {}. The single-spa custom props passed to the application\n      // Note that these props are stringified into the HTML file\n      customProps: {\n        authToken: \"sadf7889fds8u70df9s8fsd\"\n      },\n\n      // optional - defaults to turning urlRerouteOnly on\n      // The options object passed into single-spa's start() function.\n      // See https://single-spa.js.org/docs/api#start\n      startOptions: {\n        urlRerouteOnly: true\n      }\n    })\n  ]\n}\n```\n\nNow when you run `npm start` or `npm run serve`, you can view your code running on localhost, without setting up an import map override.\n\n## Customizing the HTML File\n\nYou may customize the HTML file used by the standalone plugin by creating a `src/index.ejs` file. The standalone plugin injects its scripts at the end of the `\u003cbody\u003e` of that file. This is done via [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin), which has a [template option](https://github.com/jantimon/html-webpack-plugin#options) that allows you to control the HTML template.\n\n## Notes\n\nThis plugin (currently) assumes that you are using SystemJS to load your microfrontends. If you are not using SystemJS and would like to use this plugin, please file a Github issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingle-spa%2Fstandalone-single-spa-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingle-spa%2Fstandalone-single-spa-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingle-spa%2Fstandalone-single-spa-webpack-plugin/lists"}