create-catalyst-app-internal 0.0.1-beta.0

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "arrowParens": "always",
+    "printWidth": 110
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "create-catalyst-app-internal",
+    "bin": "scripts/cli.mjs",
+    "version": "0.0.1-beta.0",
+    "description": "cli package to scaffold Catalyst application",
+    "main": "index.js",
+    "scripts": {
+        "start": "node index.js"
+    },
+    "dependencies": {
+        "commander": "^8.2.0",
+        "fs": "^0.0.1-security",
+        "https": "^1.0.0",
+        "picocolors": "^0.1.0",
+        "prompts": "^2.4.0",
+        "tar": "6.1.15"
+    },
+    "devDependencies": {
+        "prettier": "^3.2.5"
+    }
+}

package/scripts/cli.cjs

@@ -0,0 +1,223 @@
+#!/usr/bin/env node
+const { execSync } = require("child_process")
+const Commander = require("commander")
+const { Option } = require("commander")
+const prompts = require("prompts")
+const { red, green, cyan } = require("picocolors")
+
+const packageJson = require("../package.json")
+const tar = require("tar")
+const path = require("path")
+const fs = require("fs")
+
+// Hardcoded branch
+let projectName = null
+const program = new Commander.Command()
+    .version(packageJson.version)
+    .description("Scaffolding")
+    .arguments("[folderName]")
+    .usage(`${green("[folderName]")} [options]`)
+    .action((name) => (projectName = name))
+    .addOption(
+        new Option(
+            "-s, --state-management [stateManagement]",
+            "Specify state management (rtk, redux, or none)",
+            /^(rtk|redux|none)$/i,
+            "none"
+        )
+    )
+    .action(async (folderName = null, cmd) => {
+        try {
+            // Use options provided through commander or prompt the user
+            validateOptions(cmd)
+            const projectName = folderName || (await promptProjectName())
+            const language = "js"
+            const projectDescription = await promptDescription()
+            const stateManagement = cmd.stateManagement || (await promptStateManagement())
+
+            const resolvedProjectPath = path.resolve(projectName.trim())
+            const projectPath = path.basename(resolvedProjectPath)
+            const root = path.resolve(projectPath)
+
+            // Define mapping of options to repository suffixes
+            const repositorySuffixes = {
+                js: "js",
+                ts: "ts",
+                redux: "redux",
+                rtk: "rtk",
+                none: "none",
+            }
+
+            const packageName = packageJson.name
+            const packageVersion = packageJson.version
+
+            const commonCodeDirectory = "package/templates/common"
+            const selectedTemplateCode = `package/templates/${repositorySuffixes[stateManagement]}-${repositorySuffixes[language]}`
+            const subDirectoriesToExtract = [commonCodeDirectory, selectedTemplateCode]
+            const extractionDestination = `/${projectName}/`
+            let tempDir
+            ;(() => {
+                try {
+                    tempDir = createTempDir()
+
+                    const packageFilePath = packNpmPackage(packageName, packageVersion, tempDir)
+
+                    extractSubdirectory(packageFilePath)
+
+                    execSync(
+                        `cd ${projectName} && npm i  && npm pkg set name=${projectName} ${
+                            projectDescription ? `description=${projectDescription}` : ""
+                        } && git init --quiet`,
+                        { stdio: "inherit" }
+                    )
+
+                    console.log(cyan(`Installing Packages`))
+
+                    deleteDirectory(tempDir)
+                } catch (error) {
+                    deleteDirectory(tempDir)
+                    console.error(`Error: ${error.message}`)
+                    process.exit(1)
+                }
+            })()
+
+            function packNpmPackage(packageName, packageVersion, tempDir) {
+                const tarballFileName = `${packageName}-${packageVersion}.tgz`
+                const tarballFilePath = path.join(tempDir, tarballFileName)
+
+                try {
+                    execSync(`npm pack ${packageName}@${packageVersion} --silent`, {
+                        cwd: tempDir,
+                    })
+
+                    // to test locally, comment the upper execSync and uncomment this one.
+                    // execSync(`npm pack --pack-destination=${tempDir} --silent`, {
+                    //   cwd: process.cwd(),
+                    // });
+
+                    return tarballFilePath
+                } catch (error) {
+                    console.error(`Error packing npm package: ${error.message}`)
+                    throw error
+                }
+            }
+
+            // Function to create a temporary directory
+            function createTempDir() {
+                const tempDir = fs.mkdtempSync(path.join(process.cwd(), "temp-"))
+
+                return tempDir
+            }
+
+            // Function to extract subdirectory from npm package and delete tar file
+            function extractSubdirectory(packageFilePath) {
+                try {
+                    tar.extract({
+                        file: packageFilePath,
+                        sync: true,
+                        filter: (path, entry) => {
+                            return subDirectoriesToExtract.reduce((acc, item) => {
+                                return acc || path.startsWith(item)
+                            }, false)
+                        },
+                        cwd: path.join(process.cwd()),
+                        onentry: (entry) => {
+                            if (entry.path.startsWith(commonCodeDirectory)) {
+                                entry.path = entry.path.replace(commonCodeDirectory, extractionDestination)
+                            }
+                            if (entry.path.startsWith(selectedTemplateCode)) {
+                                entry.path = entry.path.replace(selectedTemplateCode, extractionDestination)
+                            }
+                        },
+                    })
+                } catch (e) {
+                    console.log("An error occurred", e)
+                }
+
+                cyan(`Run cd ${projectName} && npm start to get started.`)
+            }
+        } catch (error) {
+            console.error(red("An error occurred:"), error.message)
+            process.exit(1)
+        }
+    })
+    .allowUnknownOption()
+
+program.parse(process.argv)
+
+async function promptStateManagement() {
+    const response = await prompts({
+        type: "select",
+        name: "stateManagement",
+        message: "Choose state management:",
+        choices: [
+            { title: "Redux", value: "redux" },
+            { title: "Redux Toolkit (RTK)", value: "rtk" },
+            { title: "None", value: "none" },
+        ],
+    })
+
+    return response.stateManagement
+}
+async function promptProjectName() {
+    const res = await prompts({
+        type: "text",
+        name: "path",
+        message: "What is your project named?",
+        initial: "my-app",
+    })
+
+    if (typeof res.path === "string") {
+        let projectName = res.path.trim()
+        return projectName
+    }
+
+    if (!res.path || projectName === "") {
+        console.log(
+            "\nPlease specify the project directory:\n" +
+                `  ${cyan(program.name())} ${green("<project-directory>")}\n` +
+                "For example:\n" +
+                `  ${cyan(program.name())} ${green("my-next-app")}\n\n` +
+                `Run ${cyan(`${program.name()} --help`)} to see all options.`
+        )
+        process.exit(1)
+    }
+}
+
+async function promptDescription() {
+    const res = await prompts({
+        type: "text",
+        name: "path",
+        message: "What is your project description?",
+    })
+
+    if (typeof res.path === "string") {
+        return res.path.trim()
+    } else return null
+}
+
+function validateOptions(cmd) {
+    // Validate language option
+    if (cmd.lang && !["js", "ts"].includes(cmd.lang.toLowerCase())) {
+        throw new Error('Invalid language option. Use "js" or "ts".')
+    }
+
+    // Validate state management option
+    if (cmd.stateManagement && !["rtk", "redux", "none"].includes(cmd.stateManagement.toLowerCase())) {
+        throw new Error('Invalid state management option. Use "rtk", "redux", or "none".')
+    }
+}
+
+function deleteDirectory(dirPath) {
+    if (dirPath && fs.existsSync(dirPath)) {
+        fs.readdirSync(dirPath).forEach((file) => {
+            const currentPath = path.join(dirPath, file)
+            if (fs.lstatSync(currentPath).isDirectory()) {
+                deleteDirectory(currentPath)
+            } else {
+                fs.unlinkSync(currentPath)
+            }
+        })
+        fs.rmdirSync(dirPath)
+    }
+}

package/templates/common/.babelrc

@@ -0,0 +1,26 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "node": "current"
+                }
+            }
+        ],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-object-rest-spread",
+        "transform-es2015-modules-commonjs",
+        "transform-class-properties",
+        "dynamic-import-node",
+        "@loadable/babel-plugin"
+    ],
+    "env": {
+        "test": {
+            "presets": ["@babel/preset-react"]
+        }
+    },
+    "ignore": ["__TEST__"]
+}

package/templates/common/.eslintrc

@@ -0,0 +1,53 @@
+{
+    "parser": "@babel/eslint-parser",
+    "rules": {
+        "prettier/prettier": "error",
+        "no-console": "warn",
+        "react/prop-types": 1,
+        "react/display-name": [0, { "ignoreTranspilerName": true }],
+        "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
+        "no-prototype-builtins": "off",
+        "jam3/no-sanitizer-with-danger": 2,
+        "react/jsx-no-target-blank": [0, {
+            "enforceDynamicLinks": "never"
+        }]
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true,
+        "node": true
+    },
+    "globals": {
+        "expect": true,
+        "__non_webpack_require__": true,
+        "logger": "readonly",
+        "AppCallbacks": "readonly"
+    },
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "babelOptions": {
+            "configFile": "./babel.config.js"
+        },
+        "ecmaVersion": 6
+    },
+    "plugins": ["babel", "react", "react-hooks", "prettier", "jam3"],
+    "settings": {
+        "react": {
+            "createClass": "createReactClass",
+            "pragma": "React",
+            "version": "detect"
+        },
+        "propWrapperFunctions": [
+            "forbidExtraProps",
+            { "property": "freeze", "object": "Object" },
+            { "property": "myFavoriteWrapper" }
+        ],
+        "linkComponents": ["Hyperlink", { "name": "Link", "linkAttribute": "to" }]
+    }
+}

package/templates/common/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "arrowParens": "always",
+    "printWidth": 110
+}

package/templates/common/README.md

@@ -0,0 +1,25 @@
+## Getting Started
+
+Commence development by initiating the application in development mode with the following commands:
+
+For running the application in development mode, run:
+
+```bash
+npm run start
+```
+
+For a production build, utilize:
+
+```bash
+npm run build
+```
+
+To serve the production build, execute:
+
+```bash
+npm run serve
+```
+
+## Documentation
+
+Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/templates/common/api.js

@@ -0,0 +1,27 @@
+const apiInstance = () => {
+    const fetchFunction = async (url, options) => {
+        let baseURL = process.env.API_URL
+        let finalUrl = baseURL + url
+
+        // Request Interceptor - you can modify request here
+
+        // Add query params if exist
+        if (Object.keys(options?.params).length > 0) {
+            finalUrl = url + "?" + new URLSearchParams(options.params)
+        }
+
+        return fetch(finalUrl, options).then(async (response) => {
+            const parsedResponse = await response.json()
+            // Response Interceptor - you can modify response here
+            return parsedResponse
+        })
+    }
+    return {
+        get: fetchFunction,
+        post: fetchFunction,
+        delete: fetchFunction,
+        patch: fetchFunction,
+        put: fetchFunction,
+    }
+}
+export default { apiInstance }

package/templates/common/client/styles.js

@@ -0,0 +1,14 @@
+/* Style Loader
+ *
+ * Anything imported in here will either be added to the vendor CSS chunk, or
+ * the main app CSS chunk. Where they will go depends on its location or its
+ * extension.
+ *
+ * Files will be added to the vendor.css chunk if:
+ * - they are located inside `node_modules`, or
+ * - they are plain .css files.
+ * Otherwise, files will be added to the main app.css chunk.
+ */
+
+// Include initial base styles.
+import "@css/base/index.scss"

package/templates/common/config/config.json

@@ -0,0 +1,17 @@
+{
+    "NODE_SERVER_HOSTNAME": "localhost",
+    "NODE_SERVER_PORT": 3005,
+    "WEBPACK_DEV_SERVER_HOSTNAME": "localhost",
+    "WEBPACK_DEV_SERVER_PORT": 3006,
+    "BUILD_OUTPUT_PATH": "build",
+    "PUBLIC_STATIC_ASSET_PATH": "/assets/",
+    "PUBLIC_STATIC_ASSET_URL": "http://localhost:3006",
+    "NODE_ENV": "production",
+    "BUILD_ENV": "localBuild",
+    "API_URL": "",
+    "CLIENT_EXPOSED_KEYS": [],
+    "ANALYZE_BUNDLE": false,
+    "ENABLE_DEBUG_LOGS": true,
+    "ENABLE_FILE_LOGGING": true,
+    "ENABLE_CONSOLE_LOGGING": true
+}

package/templates/common/server/document.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { Head, Body } from "catalyst-core-internal"
+
+function Document(props) {
+    return (
+        <html lang={props.lang}>
+            <Head {...props}>
+                <meta charset="final-order" />
+            </Head>
+            <Body {...props} />
+        </html>
+    )
+}
+export default Document

package/templates/common/server/index.js

@@ -0,0 +1 @@
+export const preServerInit = () => {}

package/templates/common/server/server.js

@@ -0,0 +1 @@
+export function addMiddlewares(app) {}

package/templates/common/src/js/containers/Home/Home.js

@@ -0,0 +1,23 @@
+import React from "react"
+import css from "./Home.scss"
+
+function Landing() {
+    return (
+        <div className={css.app}>
+            <header className={css.appHeader}>
+                <h1 className={css.heading}>Catalyst</h1>
+                <p>Edit files inside src directory and save to reload.</p>
+                <a
+                    className={css.appLink}
+                    href="https://catalyst.1mg.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn Catalyst
+                </a>
+            </header>
+        </div>
+    )
+}
+
+export default Landing

package/templates/common/src/js/containers/Home/Home.scss

@@ -0,0 +1,34 @@
+body {
+    margin: 0;
+}
+
+.app {
+    text-align: center;
+    margin: 0;
+}
+
+.appLogo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .appLogo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.appHeader {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.appLink {
+    color: #61dafb;
+}

package/templates/common/src/js/routes/index.js

@@ -0,0 +1,17 @@
+import Home from "@containers/Home/Home"
+
+const routes = [
+    {
+        path: "/",
+        end: true,
+        component: Home,
+    },
+]
+
+/**
+ * Making the routes array compatible with the format accepted by createBrowserRouter
+ * API on the client side
+ * https://reactrouter.com/en/main/routers/create-browser-router
+ */
+
+export default routes

package/templates/common/src/js/routes/utils.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { RouterDataProvider, MetaTag } from "@tata1mg/router"
+import App from "@containers/App"
+import routes from "./index.js"
+
+export const preparedRoutes = ({ store, routerInitialState }) => {
+    return [
+        {
+            element: (
+                <RouterDataProvider config={{}} initialState={routerInitialState} fetcherArgs={{ store }}>
+                    <MetaTag />
+                    <App />
+                </RouterDataProvider>
+            ),
+            children: getRoutes()?.map((route, index) => {
+                const Component = route.component
+                // const pageType = route.staticPageType ? route.staticPageType : null
+                return {
+                    ...route,
+                    element: <Component key={index} />,
+                }
+            }),
+        },
+    ]
+}
+
+export const getRoutes = () => {
+    return routes
+}

package/templates/common/src/static/css/base/index.scss

@@ -0,0 +1 @@
+@import "styles";

package/templates/common/src/static/css/base/styles.scss

@@ -0,0 +1,3 @@
+html {
+    box-sizing: border-box;
+}

package/templates/common/webpackConfig.js

@@ -0,0 +1,5 @@
+module.exports = {
+    developmentPlugins: [],
+    ssrPlugins: [],
+    clientPlugins: [],
+}

package/templates/none-js/client/index.js

@@ -0,0 +1,25 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+
+        const router = clientRouter({ routerInitialState: routerInitialData })
+
+        const Application = (
+            <Provider serverState={__INITIAL_STATE__}>
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+            </Provider>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/none-js/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "catalyst build",
+        "serve": "catalyst serve"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "^0.0.1-alpha.13",
+        "catalyst-core-internal": "0.0.1-beta.0"
+    }
+}

package/templates/none-js/src/js/containers/App/index.js

@@ -0,0 +1,14 @@
+import React, { useState } from "react"
+import { useOutlet } from "@tata1mg/router"
+const App = () => {
+    const o = useOutlet()
+    const [outlet] = useState(o)
+
+    return <>{outlet}</>
+}
+
+App.serverSideFunction = ({}) => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

package/templates/redux-js/client/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { Provider } from "react-redux"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const store = configureStore(__INITIAL_STATE__ || {})
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
+
+        const Application = (
+            <Provider store={store} serverState={__INITIAL_STATE__}>
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+            </Provider>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/redux-js/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "catalyst build",
+        "serve": "catalyst serve"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "^0.0.1-alpha.13",
+        "catalyst-core-internal": "0.0.1-beta.0",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
+    }
+}

package/templates/redux-js/src/js/containers/App/actions.js

@@ -0,0 +1,17 @@
+const createActionTypes = (prefix, actionTypeList = []) => {
+    const actionTypesObject = {}
+    actionTypeList.forEach((item) => {
+        actionTypesObject[item] = `${prefix}/${item}`
+    })
+
+    return actionTypesObject
+}
+
+export default createActionTypes
+
+export const ShellActions = createActionTypes("shellActions", ["REDUX_TEST"])
+export const reduxTest = () => {
+    return {
+        type: ShellActions.REDUX_TEST,
+    }
+}

package/templates/redux-js/src/js/containers/App/index.js

@@ -0,0 +1,14 @@
+import React, { useState } from "react"
+import { useOutlet } from "@tata1mg/router"
+const App = () => {
+    const o = useOutlet()
+    const [outlet] = useState(o)
+
+    return <>{outlet}</>
+}
+
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

package/templates/redux-js/src/js/containers/App/reducer.js

@@ -0,0 +1,21 @@
+import { ShellActions } from "./actions"
+
+export const defaultState = {
+    testActionDispatched: false,
+}
+
+const shellReducer = (state = defaultState, action) => {
+    switch (action.type) {
+        case ShellActions.REDUX_TEST: {
+            return {
+                ...state,
+                testActionDispatched: true,
+            }
+        }
+
+        default:
+            return state
+    }
+}
+
+export default shellReducer

package/templates/redux-js/src/js/store/index.js

@@ -0,0 +1,28 @@
+import { configureStore as createStore } from "@reduxjs/toolkit"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
+
+/**
+ * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
+ * @param    {object} initialState    Default state
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @return   {object} The store itself
+ */
+
+const configureStore = (initialState, request) => {
+    const api = fetchInstance
+    const store = createStore({
+        reducer: combineReducers({ shellReducer }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
+    })
+    return store
+}
+
+export default configureStore

package/templates/rtk-js/client/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import "./styles"
+import { hydrateRoot } from "react-dom/client"
+import { loadableReady } from "@loadable/component"
+import { Provider } from "react-redux"
+import { RouterProvider } from "@tata1mg/router"
+import clientRouter from "catalyst-core-internal/router/ClientRouter"
+import configureStore from "@store"
+
+window.addEventListener("load", () => {
+    loadableReady(() => {
+        const { __ROUTER_INITIAL_DATA__: routerInitialData, __INITIAL_STATE__ } = window
+        const store = configureStore(__INITIAL_STATE__ || {})
+
+        const router = clientRouter({ store, routerInitialState: routerInitialData })
+
+        const Application = (
+            <Provider store={store} serverState={__INITIAL_STATE__}>
+                <React.StrictMode>
+                    <RouterProvider router={router} />
+                </React.StrictMode>
+            </Provider>
+        )
+
+        const container = document.getElementById("app")
+        hydrateRoot(container, Application)
+    })
+})

package/templates/rtk-js/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "create-catalyst-app-starter",
+    "version": "1.0.0",
+    "scripts": {
+        "start": "catalyst start",
+        "build": "catalyst build",
+        "serve": "catalyst serve"
+    },
+    "_moduleAliases": {
+        "@api": "api.js",
+        "@containers": "src/js/containers",
+        "@server": "server",
+        "@config": "config",
+        "@css": "src/static/css",
+        "@routes": "src/js/routes/",
+        "@store": "src/js/store/index.js"
+    },
+    "dependencies": {
+        "@loadable/component": "^5.16.3",
+        "@tata1mg/router": "^0.0.1-alpha.13",
+        "catalyst-core-internal": "0.0.1-beta.0",
+        "@reduxjs/toolkit": "1.9.3",
+        "react-redux": "^8.1.3"
+    }
+}

package/templates/rtk-js/src/js/containers/App/index.js

@@ -0,0 +1,14 @@
+import React, { useState } from "react"
+import { useOutlet } from "@tata1mg/router"
+const App = () => {
+    const o = useOutlet()
+    const [outlet] = useState(o)
+
+    return <>{outlet}</>
+}
+
+App.serverSideFunction = () => {
+    return new Promise((resolve) => resolve())
+}
+
+export default App

package/templates/rtk-js/src/js/containers/App/reducer.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState = {
+    testActionDispatched: false,
+}
+
+export const appSlice = createSlice({
+    name: "shellReducer",
+    initialState: initialState,
+    reducers: {
+        reduxTest: (state, action) => {
+            state.testActionDispatched = true
+        },
+    },
+})
+
+export const { reduxTest } = appSlice.actions
+export const shellReducer = appSlice.reducer

package/templates/rtk-js/src/js/store/index.js

@@ -0,0 +1,28 @@
+import { configureStore as createStore } from "@reduxjs/toolkit"
+import { combineReducers } from "redux"
+import { shellReducer } from "@containers/App/reducer.js"
+import fetchInstance from "@api"
+
+/**
+ * Function that initializes the store with the initialstate and adds middlewares that can be used during action dispatch
+ * @param    {object} initialState    Default state
+ * @param    {object} request   Request object that we recieve on server, this is only recieved when store is initialised on the server.
+ * @return   {object} The store itself
+ */
+
+const configureStore = (initialState, request) => {
+    const api = fetchInstance
+    const store = createStore({
+        reducer: combineReducers({ shellReducer }),
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                thunk: {
+                    extraArgument: { api },
+                },
+            }),
+        preloadedState: initialState,
+    })
+    return store
+}
+
+export default configureStore