Project Tooling
Table of Contents
1. Setting Up the Framework
Prerequisites
Before you begin, make sure you have the following installed:
- Node.js
- npm (Node Package Manager)
- Git
Installation
Follow the steps in the Framework Setup page to set up your development environment with React and Electron.
2. Libraries and Dependencies
React
React is a JavaScript library for building user interfaces. For detailed information on using React, refer to the official React Documentation.
Electron
Electron allows you to build cross-platform desktop applications using web technologies. Check the Electron Documentation for guidance on Electron-specific features.
Material-UI (MUI)
Material-UI is a React UI framework that implements Google’s Material Design. Refer to the MUI Documentation for information on components and theming.
Joy UI
Joy UI is a library built with experiences of Material-UI, designed to provide additional enhancements and features. For specific usage details, check the Joy UI documentation.
D3
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in the browser. It is used to display the LiDAR Data. To work with Electron, it needs to be Downgraded to version 6.7.0. Explore the D3 Documentation for guidance on creating stunning data visualizations.
3. Project Structure
In our project, the root folder serves as the core directory, encompassing several essential subdirectories and files generated by Create React App. Here is an overview of the key elements:
- src: This directory is pivotal to our project, housing the primary source code. Notable files include:
- App.js: The main entry point for the React application, orchestrating the overall structure and layout.
- index.js: The entry point for rendering the React application into the HTML document.
- features: This folder encapsulates functionalities such as camera, controls, and lidar, each organized into separate modules to maintain a clean and modular codebase.
- components: Here, you’ll find custom UI components that enhance the project’s visual elements.
- public: This directory contains static assets that are directly served to the client without processing. Key files include:
- electron.js: This file acts as the starting point for Electron, configuring the Electron environment for our application.
- index.html: The HTML file serving as the foundation for our React application.
-
node_modules: This directory is automatically generated and managed by npm, housing all the project’s dependencies.
- vscode: This folder includes configuration files related to Visual Studio Code, optimizing the development environment for consistent and efficient coding practices.
This structured organization helps maintain a clear separation of concerns between UI components, features, and other essential elements, facilitating ease of development, debugging, and collaboration within the project.
4. Tooling and Utilities
Webpack
Webpack is a module bundler that transforms assets like HTML, CSS, and images into bundled JavaScript files. See the Webpack Documentation for configuration details.
Babel
Babel is a JavaScript compiler that allows you to use the latest ECMAScript features. Refer to the Babel Documentation for configuration options.
ESLint
ESLint is a static code analysis tool for identifying and fixing common programming errors. Review the ESLint Documentation for customization and rules.
Prettier
Prettier is an opinionated code formatter. Learn more about its configuration in the Prettier Documentation.