|
1 | | -# React + TypeScript + Vite |
2 | | - |
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
4 | | - |
5 | | -Currently, two official plugins are available: |
6 | | - |
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
9 | | - |
10 | | -## Expanding the ESLint configuration |
11 | | - |
12 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
13 | | - |
14 | | -```js |
15 | | -export default tseslint.config({ |
16 | | - extends: [ |
17 | | - // Remove ...tseslint.configs.recommended and replace with this |
18 | | - ...tseslint.configs.recommendedTypeChecked, |
19 | | - // Alternatively, use this for stricter rules |
20 | | - ...tseslint.configs.strictTypeChecked, |
21 | | - // Optionally, add this for stylistic rules |
22 | | - ...tseslint.configs.stylisticTypeChecked, |
23 | | - ], |
24 | | - languageOptions: { |
25 | | - // other options... |
26 | | - parserOptions: { |
27 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
28 | | - tsconfigRootDir: import.meta.dirname, |
29 | | - }, |
30 | | - }, |
31 | | -}) |
| 1 | +# DeWeb Plugin Homepage |
| 2 | + |
| 3 | +This is the homepage for the DeWeb plugin, providing a central navigation hub and search interface for the decentralized web ecosystem on Massa. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- Search for DeWeb domains |
| 8 | +- Quick access to key DeWeb services: |
| 9 | + - Explore DeWeb: Browse available decentralized websites |
| 10 | + - Massa Name System (MNS): Manage decentralized domain names |
| 11 | + - DeWeb Uploader: Upload and manage websites |
| 12 | +- Network status indicator showing connection info |
| 13 | + |
| 14 | +## Development |
| 15 | + |
| 16 | +### Prerequisites |
| 17 | + |
| 18 | +- Node.js (v18+) |
| 19 | +- npm or yarn |
| 20 | + |
| 21 | +### Setup |
| 22 | + |
| 23 | +```bash |
| 24 | +# Install dependencies |
| 25 | +npm install |
| 26 | + |
| 27 | +# Run development server |
| 28 | +npm run dev |
32 | 29 | ``` |
33 | 30 |
|
34 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
35 | | - |
36 | | -```js |
37 | | -// eslint.config.js |
38 | | -import reactX from 'eslint-plugin-react-x' |
39 | | -import reactDom from 'eslint-plugin-react-dom' |
40 | | - |
41 | | -export default tseslint.config({ |
42 | | - plugins: { |
43 | | - // Add the react-x and react-dom plugins |
44 | | - 'react-x': reactX, |
45 | | - 'react-dom': reactDom, |
46 | | - }, |
47 | | - rules: { |
48 | | - // other rules... |
49 | | - // Enable its recommended typescript rules |
50 | | - ...reactX.configs['recommended-typescript'].rules, |
51 | | - ...reactDom.configs.recommended.rules, |
52 | | - }, |
53 | | -}) |
| 31 | +The development server will start at http://localhost:5173 (or another port if 5173 is in use). |
| 32 | + |
| 33 | +### Project Structure |
| 34 | + |
| 35 | +- `src/` - Source code |
| 36 | + - `App.tsx` - Main application component |
| 37 | +- `public/` - Static assets |
| 38 | + |
| 39 | +## Building for Production |
| 40 | + |
| 41 | +```bash |
| 42 | +# Build the project |
| 43 | +npm run build |
| 44 | + |
| 45 | +# Build and package for plugin deployment |
| 46 | +npm run build:plugin |
54 | 47 | ``` |
| 48 | + |
| 49 | +The `build:plugin` command will: |
| 50 | +1. Build the project |
| 51 | +2. Create a zip file (`dist/home.zip`) for deployment |
| 52 | + |
| 53 | +## Dependencies |
| 54 | + |
| 55 | +This project uses: |
| 56 | +- React 19 |
| 57 | +- TypeScript |
| 58 | +- Vite |
| 59 | +- TailwindCSS for styling |
| 60 | +- React Icons |
| 61 | +- DeWeb Pages (local dependency) |
| 62 | + |
| 63 | +## Integration |
| 64 | + |
| 65 | +This homepage is designed to work with the DeWeb plugin for Massa. It communicates with the plugin's API endpoints to retrieve network information and port configurations. |
| 66 | + |
| 67 | +The application dynamically generates URLs based on the current environment (development or production) to ensure proper navigation between different DeWeb services. |
0 commit comments