MVW Directory structure

The directory structure below illustrates the organization of files and directories within the mapviewer component. This component not only handles the mapviewer but also other visualization components within Mukua eg graphs, charts, etc

.
├── public/
│   └── index.html
├── src/
│   ├── apps/
│   │   └── mapviewer/
│   │       └── components
│   ├── assets/
│   │   ├── icons
│   │   └── logos
│   ├── components
│   ├── data
│   ├── helpers
│   ├── providers/
│   │   └── dataset-providers/
│   │       └── datasets
│   ├── redux
│   ├── services
│   ├── styles
│   ├── utils
│   └── wrappers/
│       └── fullscreen
└── webpack/
    ├── development.js
    ├── shared.js
    └── production.js

At the root of the project are 3 directories:

• public - is where your static files reside.
• src - is where your dynamic files reside. If the file is imported by your JavaScript application or changes contents, put it here. In order to make sure the client downloads the most up-to-date version of your file instead of relying on a cached copy, Webpack will give changed files a unique file name in the production build. This allows you to use simple, intuitive file names during development, such as banner.png instead of banner-2019-03-01-final.png
• webpack - this directory contains three files i.e development, production and shared javascript files. The development and production files define the optimal state of the application in it's respective environment. In package.json at the root of the project, the development.js file is called during development and handles changes made to the file i.e hot-reloading. The production.js file is instantiated during building, transforming and bundling the Javascript files for production. This in turn creates a bundles directory at the root of the project. Within the shared.js file you are able to specify the entrypoint for each application to be bundled.

module.exports = {
  context: __dirname,
  entry: {
    mapviewer: "../src/apps/mapviewer/index.js",
  },
  output: {
    publicPath: "",
    path: path.resolve("./bundles/"),
    filename: "[name]-[contenthash].js",
  },
  resolve: {
    modules: [path.resolve(__dirname, "../src"), "node_modules"],
    extensions: [".js", ".jsx", ".scss"],
    alias: {
      "mapbox-gl": "maplibre-gl",
    },
  }, ...

• bundles - is the location of your final, production-ready build. This directory won’t exist until you run npm build or yarn build. The contents of this folder should be ready-to-ship without any interaction on your part.

Within the src directory exists an app directory. This houses all applications created e.g mapviewer, side-by-side maps, dashboards, etc.

Each of this standalone "applications" implements a react application structure as shown:

apps /
├── mapviewer/
│   ├── components
│   ├── App.js
│   └── index.js
└── side-by-side-map/
    ├── components
    ├── App.js
    └── index.js

---

Creation of an "app"

Within the index.js of each application is where the entrypoint 'id' rendering it to the DOM is defined. This is also where the applciation is connected to its redux store.

import React, { useMemo } from "react";
import ReactDom from "react-dom";
import { rootReducer } from "fast-redux";
import { combineReducers } from "redux";
import { Provider } from "react-redux";
import isEmpty from "lodash/isEmpty";
import sprite from "svg-sprite-loader/runtime/sprite.build";

import useStore from "redux/store";
import reducerRegistry from "redux/registry";
import App from "./App";

const appEl = document.getElementById("app");

const AppContainer = () => {
  const store = useStore();

  useMemo(() => {
    const reducers = reducerRegistry.getReducers();
    store.replaceReducer(
      isEmpty(reducers)
        ? rootReducer
        : combineReducers(reducerRegistry.getReducers())
    );
  });

  const spriteContent = sprite.stringify();

  const topHeight = Number(appEl.getAttribute("data-top")) || 0;

  console.log(topHeight);

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: spriteContent }} />
      <Provider store={store}>
        <App top={topHeight} />
      </Provider>
    </>
  );
};

ReactDom.render(<AppContainer />, appEl);

All components utilized by the application are created within the components directory.

The App.js is the entrypoint to the application and wraps the map components together.