Project: Meshery (Provisioning / Automation & Configuration)
File: contributing-ui.md

layout: page title: Contributing to Meshery UI permalink: project/contributing/contributing-ui abstract: How to contribute to Meshery UI (web-based user interface). language: en type: project category: contributing list: include Meshery UI is built on React and Next.js. In nearly all cases, while contributing to Meshery UI, you will need to build and run Meshery Server as well. Meshery Server is written in `Go` (Golang) and leverages Go Modules. To make building of each component easier a `Makefile` is included in the main repository folder. Use `make` to build any and all components. The following is a list of top-level frameworks, libraries, design system used in Meshery UI. - Server and router - User Interface library - Design System - Charting library, used for exposing Grafana and Prometheus-collected metrics - a visualization tool for canvas-based, visual topology (networks) The in the Extensibility guide offers high-level insight, while each API reference (below) offers details pertaining to each API endpoints' behavior and use. Meshery provides a REST API available through the default port of `9081/tcp` at `<hostname>:<port>/api/`. See the for a complete list of endpoints available with short description of their purpose and example code. Meshery provides a GraphQl API available through the default port of `9081/tcp` at `<hostname>:<port>/api/graphql/query`. See the is the client used. Meshery UI is a significant component of the value proposition Meshery offers to individuals and organizations seeking to adopt and operate a cloud native infrastructure. Figma is used as the user flow and UI mockup design tool. The can be viewed by using this for view access. Fill-in a to gain access to additional community resources. The designs in this specification should result in enabling: User experience should be intuitive - Meshery's UX, which includes Meshery UI as a component of the overall UX, needs to be simple, but powerful. This is achieved through intuitive layouts and predefined filters that accommodate common tasks. This is achieved through sensible defaults, consistency of user interaction paradigms and features that delight the user. Extensible - Meshery UI should be a first-class component of Meshery, but also facilitate third-party integrations. Real-time - Meshery UI should be event-driven where possible. {% include alert.html type="info" title="Windows User?" content="See <a href='https://docs.meshery.io/project/contributing/meshery-windows'>Setting up Meshery Development Environment on Windows</a>." %} We recommend using Node 18 LTS. Meshery UI's build script supports other Node versions as well, including node16 and node17, but is recommended to use Node 18 LTS. When contributing to Meshery UI, it is advisable to: Use and plugin for Visual Studio Code. Disable plugins other than `prettier` and `eslint` for formatting and linting, if any. To install/update the UI dependencies: {% include code.html code="make ui-setup" %} To build and export the UI code: {% include code.html code="make ui-build" %} Using this command, changes that you make are not rebuilt automatically. You will have to run this command again to rebuild the UI and see them. Now that the UI code is built, Meshery UI will be available at `http://localhost:9081` when Meshery Server is running (Read

To build and export the UI code and build and run Meshery Server: {% include code.html code="make ui-server" %} To start running Meshery Server locally: {% include code.html code="make server" %} Now, Meshery will run on the default port `http://localhost:9081`. Please note: If you see "Meshery Development Incompatible" while trying to sign into Meshery Server, then follow these steps: <a href="{{ site.baseurl }}/assets/img/meshery-development-incompatible-error.png"> <img style= "width: 600px;" src="{{ site.baseurl }}/assets/img/meshery-development-incompatible-error.png" /> </a> Potential Solution: Go to your meshery folder in your local-system where youve cloned it. Execute: `git remote add upstream https://github.com/meshery/meshery` `git fetch upstream` Restart the meshery server Additionally, before restarting the server, if you like to pull the latest changes, you can do: `git pull upstream master` If you want to work on the UI, it will be a good idea to use the included UI development server. You can run the UI development server by running the following command: {% include code.html code="make ui" %} Refer to , if needed. Make sure to have Meshery Server configured, up and running on the default port `http://localhost:9081` and choose a provider to login with (visit `http://localhost:9081`) before proceeding to access and work on the UI server at `http://localhost:3000`. Any UI changes made now will automatically be rebuilt and served in your browser. To run cypress integration tests, a convenience make target called `ui-integration-tests` that installs dependencies in `/ui` and `/provider-ui` folders as prerequisite and invokes `ci-test-integration` npm script found in {% include code.html code="make ui-integration-tests" %} {% include alert.html type="info" title="Above command must be run from Meshery repository's root folder." %} Refer to for details of how to contribute and benefit from Meshery Cypress (integration & end-to-end) testing. The Meshery UI public folder contains static files. Its folder structure looks like this: ``` meshery ui public static favicon.png fonts img style ``` Images and icons used in Meshery UI need to be sourced from the . The files written inside this directory should only end with the extensions like `.svg`, `.png`, `.jpg` or `.jpeg`. Always use vector-based graphics (`.svg`), unless your have extenuating circumstances. SVGs should be optimized and compressed. Use an online, SVG optimizer, like https://www.svgviewer.dev, to compress the file(s) to smaller size. All SVGs should have `height` and `width` properties set to 20px x 20px by default. Ensure that height and width attributes are always set in original SVG. All SVGs should have `height` and `width` included as a style prop in their React component. Always include this XML header in each SVG image: <pre class="codeblock-pre"><div class="codeblock"> <div class="clipboardjs">&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;!DOCTYPE svg&gt;</div></div> </pre> Svg can only fall under two categories, and this categories should be the name of folder \ white: containing white or mono-colored version of that SVG color: containing colored version of that SVG. e.g.: the Meshery logo icon folder structure looks like this: ``` img meshery white | meshery-white.svg color meshery-color.svg ``` Avoid any kind of duplicity in the versions of icons used. For accessing the svg file as data-url, the utf8 encoding should be used in place of base64.Use on SVG data URIs. \ {% include code.html code="let svg = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile);" %}