Code Structure Follow

This article identifies how the code is structured, and serves as a guide when you customise the code.

File Structure

When you open shuriken as a project in your editor (preferably VS Code), you will see the main folders outlined below.

|-- iotninja (iotninja core components -- DO NOT EDIT --)
|------ iotninja-react-webui-1.0.0-beta.1.tgz
|-- public (contains the main html page)
|------ index.html
|-- src
|------ actions (react action files)
|------ api (files that do backend api calls)
|------ components (react components definition files)
|------ parsers (contains payload parsers)
|------ routes (routing definition)
|------ views (main page. corresponds to menu in sidebar)

There are more folders on the project, but these are the ones you will modify the most.

Pages

There are 2 types of page.

• Structured
• Non-Structured

The structured page has 4 sections: Header, content area, footer and sidebar, as outlined here , and is used for authenticated pages in the application

The Non-Structured page is free form and is used for unauthenticated pages in the application. An example of this is the Login page.

Header

Depending the type of page, you use either the Header.jsx or PagesHeader.jsx. Structured page use Header.jsx while Non-Structured page use PagesHeader.jsx

|-- src
|------ components
|---------- Header
|-------------- Header.jsx (Structured)
|-------------- PagesHeader.jsx (Non-Structured)

If you want to put your logo, this is the file you need to update.

Main Page

The top most page where you compose your react components is located under the views folder. 

|-- src
|------ views
|---------- Auth (The login page)
|---------- Dashboard (Main dashboard)
|---------- Devices (Device List)
|---------- Tracking (Map page that display location)

Sidebar

The sidebar is the means to navigate to different pages of the application. When you add a top level page, you should add an entry to the sidebar. The sidebar is located under the components folder.

|-- src
|------ components
|---------- Sidebar
|-------------- Sidebar.jsx

Routes

Routing is provided by react-router-dom (https://reacttraining.com/react-router/web/guides/quick-start). For each page that you create, you will need to insert an entry into the appropriate router file. 

The router is located under routes folder.

|-- src
|------ routes
|---------- dashboard.jsx (Structured page route)
|---------- pages.jsx (Non-Structured page route)

NEXT: Payload Parser