Create Module Frontend

For now building the frontend-side of the plugins can only be done in ( TS/React + Tailwind-CSS ), and we will be soon looking to support other js frameworks with more flexibilites in terms of CSS libraries and frameworks. However you can still use all other libraries of your favorite to manage State, Network Connection, Files, Cache and more.

Step 1 ( init project )

Luckily there is an npm package to create a strater/boilerplate project to get us started really fast. To use it run the following command:

npx create-mis-frontend

It will ask for the application-name which should be the exact name of your plugin ( specified in the web-portal ) and the Development port. The development port can be anything and is not restricted by any mean. I have selected 4500 for this case.

Once the project is created you should be able to see the following structures: ( my project is called school )

school
│   deploy.js
│   package-lock.json
│   package.json
│   postcss.config.js
│   tailwind.config.js
│   tsconfig.json
│   webpack.config.js

└───src
│   │   App.tsx
│   │   DevWrapper.tsx
│   │   index.html
│   │   index.scss
│   │   index.ts
│   │   shared.ts
│   │   ...

We will go through each of the files in their specific sections and topics but here we care about our App.tsx to start developing our plugin features.

step 2 ( run the project )

Just like create-mis-frontend mentions after creating the boilerplate, we have to run the following commands to run the react app.

cd school
npm ci
npm start

This should start a web-server on the specified port ( you may also see the tab open automatically after the build is done )

step 3 ( Integrate with backend API )

Now that we have our backend API already ( we also got the endpoint for it ), we can go ahead and integrate with it.
In App.tsx I'm going to use axios in order to send a request to http://lajward-mis.dev:9001/ and display the response in the Page2.
Yes, we have a react-router setup already ;)
The modified App.tsx will look like this:

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { Routes, Route, Link } from "react-router-dom";
import { getJWT } from "./shared";
import axios from 'axios';

function Home() {
    const jwt = getJWT();
    return (
        <div>
            <h1>Home</h1>
            <p>JWT: {jwt}</p>
        </div>
    );
}

function Page1() {
  return <h1>Page1</h1>;
}

function Page2() {
  const [message, setMessage] = useState("");
  useEffect(() => {
      const SERVER_URL = "http://lajward-mis.dev:9001/";
      axios.get(`${SERVER_URL}`)
        .then((response) => {
            setMessage(response.data.message);
        })
        .catch((error) => {
            console.log(error);
        });
    }, []);
    return (
        <div>
            <h1>Page2</h1>
            <p>Message: {message}</p>
        </div>
    );
}

function passRoutesToBase() {
    const routes = [
        {title: "Home", route: ""},
        {title: "Page1", route: "page1"},
        {title: "Page2", route: "page2"}
    ];
    localStorage.setItem("headers.school", JSON.stringify(routes));
}

function App() {
    passRoutesToBase();
    return (
      <div>
        <Routes>
            <Route path="" element={<Home />} />
            <Route path="page1" element={<Page1 />} />
            <Route path="page2" element={<Page2 />} />
        </Routes>
      </div>
    );
}

export default App;

Once I navigate to http://localhost:4500/page2 I'm able to see the successfull integration as I'm able to see the words Hello School here!

Step 3 ( Time for deployment )

We first want to build the project, we can do so by running:

$ npm run build

Once the build process is done we can go ahead and run the following command to deploy the plugin into MIS-Platform

$ npm run deploy

The program will ask for the build directory ( by default it's set to dist ) and it will ask for the Dev-Key, You may grab your Dev-Key from the developers dashboard after you log in.
Once deployment process is completed successfully, you can go ahead and see it in the MIS marketplace.

Step 4 ( Quick QA )

Head our to https://lajward-mis.dev and create a free account, after you login head our to Marketplace and you shoudl see your newly developed plugin there, Click install and it should appear in the top header for navigation. Navigate to that page and make sure everything is working as expected!