logo The World’s #1 Bootstrap 4 HTML, Angular 10, React, VueJS & Laravel
Admin Dashboard Theme

React Skeleton

1. Remove Demo Pages:

All demo pages are in separate modules.

  1. Remove demo pages folder:
    [metronic]/theme/react/[demo]/src/app/modules/ECommerce
    [metronic]/theme/react/[demo]/src/app/modules/GoogleMaterialExamples
    [metronic]/theme/react/[demo]/src/app/modules/ReactBootstrapExamples

    Leave Auth and ErrorsExamples folder. Auth is required for authentication module like login and register page. ErrorsExamples is required for 404 page redirect (* you able to keep only error page and remove others).

  2. Remove ECommerce mock dependencies in file [metronic]/theme/react/[demo]/src/redux/__mocks__/mockAxios.js:
    import MockAdapter from "axios-mock-adapter";
    import mockAuth from "../../app/modules/Auth/__mocks__/mockAuth";
    // import mockCustomers from "../../app/modules/ECommerce/__mocks__/mockCustomer";
    // import mockProducts from "../../app/modules/ECommerce/__mocks__/mockProduct";
    // import mockRemarks from "../../app/modules/ECommerce/__mocks__/mockRemark";
    // import mockSpecifications from "../../app/modules/ECommerce/__mocks__/mockSpecification";
    
    export default function mockAxios(axios) {
      const mock = new MockAdapter(axios, { delayResponse: 300 });
    
      mockAuth(mock);
      // mockCustomers(mock);
      // mockProducts(mock);
      // mockRemarks(mock);
      // mockSpecifications(mock);
    
      return mock;
    }
  3. Remove ECommerce redux reducers dependencies in file [metronic]/theme/react/[demo]/src/redux/rootReducer.js:
    import {all} from "redux-saga/effects";
    import {combineReducers} from "redux";
    
    import * as auth from "../app/modules/Auth/_redux/authRedux";
    // import {customersSlice} from "../app/modules/ECommerce/_redux/customers/customersSlice";
    // import {productsSlice} from "../app/modules/ECommerce/_redux/products/productsSlice";
    // import {remarksSlice} from "../app/modules/ECommerce/_redux/remarks/remarksSlice";
    // import {specificationsSlice} from "../app/modules/ECommerce/_redux/specifications/specificationsSlice";
    
    export const rootReducer = combineReducers({
      auth: auth.reducer,
      // customers: customersSlice.reducer,
      // products: productsSlice.reducer,
      // remarks: remarksSlice.reducer,
      // specifications: specificationsSlice.reducer
    });
    
    export function* rootSaga() {
      yield all([auth.saga()]);
    }
    
  4. Remove demo pages from Routing in file [metronic]/theme/react/[demo]/src/app/pages/BasePage.js:
    import React, {Suspense} from "react";
    import {Redirect, Switch} from "react-router-dom";
    import {LayoutSplashScreen, ContentRoute} from "../_metronic/layout";
    import {BuilderPage} from "./pages/BuilderPage";
    import {MyPage} from "./pages/MyPage";
    import {DashboardPage} from "./pages/DashboardPage";
    
    export default function BasePage() {
        // useEffect(() => {
        //   console.log('Base page');
        // }, []) // [] - is required if you need only one call
        // https://reactjs.org/docs/hooks-reference.html#useeffect
          <Suspense fallback={<LayoutSplashScreen/>}>
                <Switch>
                    {
                        /* Redirect from root URL to /dashboard. */
                        <Redirect exact from="/" to="/dashboard"/>
                    }
                    <ContentRoute path="/dashboard" component={DashboardPage}/>
                    <ContentRoute path="/builder" component={BuilderPage}/>
                    <ContentRoute path="/my-page" component={MyPage}/>
                    <Redirect to="error/error-v1"/>
                </Switch>
            </Suspense>    );
    }
  5. Remove demo pages links from Aside Menu in file [metronic]/theme/react/[demo]/src/_metronic/layout/components/aside/aside-menu/AsideMenuList.js: Remove all html code from row 47 to 1465
  6. Remove demo pages links from Header Menu in file [metronic]/theme/react/[demo]/src/_metronic/layout/components/header/header-menu/HeaderList.js: Remove all html code from row 29 to 1001

2. Remove Dashboard widgets:

All dashboard widgets can be easily removed.

  1. Remove dashboard+widgets folders:
    [metronic]/theme/react/[demo]/src/_metronic/_partials/dashboards
    [metronic]/theme/react/[demo]/src/_metronic/_partials/widgets
  2. Remove Dashboard imports in file [metronic]/theme/react/[demo]/src/_metronic/_partials/index.js:
    // export {Dashboard} from "./dashboards/Dashboard";
    export {Builder} from "./builder/Builder";
  3. Remove Dashboard component dependencies in file [metronic]/theme/react/[demo]/src/app/pages/DashboardPage.js:
    import React from "react";
    
    export function DashboardPage() {
      return <></>;
    }
Metronic: React skeleton => Result