This package has been deprecated

    Author message:

    Transfered to @nicecactus/srm

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    SRM logo


    Core library for Standalone React Module


    How it works

    SRM are react applications with extra perks. They can take props and mounted on a specific element. They are designed to be lazy or eagerly loaded into any other framework.

    Building an SRM will produce several .js and .css files, all listed in the asset-manifest.json bundled along them.
    The build folder content can then be served by a static server, keeping the folder structure and making sure all files are publicly accessible. A simple way to do so in production would be to use an AWS S3 bucket.

    The build/asset-manifest.json file describes the entry points and assets to be fetched in order to use your SRM.
    A direct url to this file will be required to load and run the SRM, as can be seen in @robingoupil/ng-srm-wrapper or @robingoupil/react-srm-wrapper.

    Example for
    +-- /
    |   +-- your-project/
    |       +-- asset-manifest.json
    |       +-- favicon.ico
    |       +-- index.html
    |       +-- static/

    Asset manifest URL:

    Getting started

    1. Installation


    yarn add @robingoupil/srm


    npm install --save @robingoupil/srm

    2. Project setup

    You will need react, react-dom and react-intl as dependencies.

    3. CSS encapsulation (optionnal)

    The following section allows to prevent CSS leaking between the SRM and the host by prefixing all classes and styles. Please consider skipping this step if you don't need this feature as it will increase the bundle size.

    Note: we only provide steps for CRA at the moment, however it should be straight forward to adapt these instructions to any other bundling system.

    1) Install extra dependencies

    The following dev dependencies are required to customize the CRA build process without ejecting:


    yarn add -D customize-cra prefix-css-loader react-app-rewired string-replace-loader


    npm install --save-dev customize-cra prefix-css-loader react-app-rewired string-replace-loader
    2) 'Flip' the existing calls to react-scripts in npm scripts for start, build and test
      "scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
        "eject": "react-scripts eject"

    Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making react-app-rewired no longer required. There are no configuration options to rewire for the eject script.

    3) Copy the config-overrides.js from the example folder

    Copy the config-overrides.js to the root directory.

    +-- your-project/
    |   +-- config-overrides.js
    |   +-- node_modules/
    |   +-- package.json
    |   +-- public/
    |   +--
    |   +-- src/

    4. SRM creation

    /* Import the library */
    import { SRM } from "@robingoupil/srm";
    /* Create the SRM */
    const orgName = 'myOrg';
    const appName = 'myApp';
    export interface Props {
      // Add Props to your SRM here
    const render = SRM(
      (props: Props) => {
        return (
            <span>Hello world 🏆</span>
    /* Declare typings */
    declare global {
      export interface Window {
        [orgName]: { [appName]: { render: typeof render } };
    /* Export render function */
    export default render;

    5. Add i18n support (optionnal)

    The last parameter loadMessages of the SRM() function can be used to return different dictionary based on the language set through the SRM props.
    It expects a function of the following signature: (lang: string) => { [term: string]: string } in order to fit your custom translation setup.
    For example, when using a different json file for each language:

    const render = SRM(
      ({ getUsername }: Props) => {
      (lang: string) => require(`./translations/${lang}.json`) // require the json file from the translation folder


    An example SRM with a custom store and i18n can be found in the example folder.
    Please see example/ for more details on how to run it.


    MIT © rgoupil




    npm i @robingoupil/srm

    DownloadsWeekly Downloads






    Unpacked Size

    22.2 kB

    Total Files


    Last publish


    • robingoupil