Skip to content

Commit 85075de

Browse files
dannywillemsdannywillems
committed
Website/frontend: add section for frontend components
1 parent d443260 commit 85075de

19 files changed

+667
-71
lines changed

‎.github/workflows/test-docs-scripts-frontend.yaml‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
name: Test Documentation Scripts - Frontend
2+
3+
# Test locally with:
4+
# ```bash
5+
# # Ubuntu 22.04 (recommended)
6+
# gh extension exec act \
7+
# --workflows .github/workflows/test-docs-scripts-frontend.yaml \
8+
# --matrix os:ubuntu-22.04
9+
#
10+
# # Ubuntu 24.04 (requires platform mapping)
11+
# gh extension exec act \
12+
# --workflows .github/workflows/test-docs-scripts-frontend.yaml \
13+
# --matrix os:ubuntu-24.04 \
14+
# -P ubuntu-24.04=catthehacker/ubuntu:act-24.04
15+
# ```
16+
17+
on:
18+
push:
19+
20+
jobs:
21+
test-frontend-scripts:
22+
runs-on: ${{ matrix.os }}
23+
strategy:
24+
matrix:
25+
os: [ubuntu-22.04, ubuntu-24.04, macos-latest]
26+
27+
steps:
28+
- name: Checkout repository
29+
uses: actions/checkout@v4
30+
31+
- name: Make scripts executable
32+
run: |
33+
chmod +x website/docs/developers/scripts/frontend/*.sh
34+
35+
- name: Install Node.js on Linux
36+
if: runner.os == 'Linux'
37+
run: |
38+
bash website/docs/developers/scripts/frontend/install-nodejs-linux.sh
39+
# Set up nvm environment for future steps
40+
echo "NVM_DIR=$HOME/.nvm" >> $GITHUB_ENV
41+
42+
- name: Install Node.js on macOS
43+
if: runner.os == 'macOS'
44+
run: |
45+
bash website/docs/developers/scripts/frontend/install-nodejs-macos.sh
46+
47+
- name: Install Angular CLI using documentation script
48+
run: |
49+
# Source nvm if available (Linux)
50+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
51+
\. "$NVM_DIR/nvm.sh"
52+
fi
53+
bash website/docs/developers/scripts/frontend/install-angular-cli.sh
54+
55+
- name: Install gtimeout on macOS
56+
if: runner.os == 'macOS'
57+
run: |
58+
brew install coreutils
59+
# Create symlink for timeout command
60+
sudo ln -sf /usr/local/bin/gtimeout /usr/local/bin/timeout
61+
62+
- name: Test install dependencies script
63+
run: |
64+
# Source nvm if available (Linux)
65+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
66+
\. "$NVM_DIR/nvm.sh"
67+
fi
68+
bash website/docs/developers/scripts/frontend/install-dependencies.sh
69+
70+
- name: Test build development script
71+
run: |
72+
# Source nvm if available (Linux)
73+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
74+
\. "$NVM_DIR/nvm.sh"
75+
fi
76+
bash website/docs/developers/scripts/frontend/build-development.sh
77+
78+
- name: Test build production script
79+
run: |
80+
# Source nvm if available (Linux)
81+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
82+
\. "$NVM_DIR/nvm.sh"
83+
fi
84+
bash website/docs/developers/scripts/frontend/build-production.sh
85+
86+
- name: Test format code script
87+
run: |
88+
# Source nvm if available (Linux)
89+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
90+
\. "$NVM_DIR/nvm.sh"
91+
fi
92+
bash website/docs/developers/scripts/frontend/format-code.sh
93+
94+
- name: Prepare for Cypress tests
95+
if: runner.os == 'Linux'
96+
run: |
97+
sudo apt-get update
98+
# Install Cypress dependencies with Ubuntu version compatibility
99+
if grep -q "24.04" /etc/os-release; then
100+
sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
101+
libnss3 libxss1 libasound2t64 libxtst6 xauth xvfb
102+
else
103+
sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
104+
libnss3 libxss1 libasound2 libxtst6 xauth xvfb
105+
fi
106+
107+
- name: Test start development script with timeout
108+
run: |
109+
# Source nvm if available (Linux)
110+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
111+
\. "$NVM_DIR/nvm.sh"
112+
fi
113+
# Test start-development script with timeout
114+
timeout 30s bash website/docs/developers/scripts/frontend/start-development.sh || true
115+
116+
- name: Test run tests script
117+
run: |
118+
# Source nvm if available (Linux)
119+
if [ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ]; then
120+
\. "$NVM_DIR/nvm.sh"
121+
fi
122+
bash website/docs/developers/scripts/frontend/run-tests.sh
123+
124+
- name: Verify build output
125+
run: |
126+
ls -la frontend/dist/frontend/browser/
127+
test -f frontend/dist/frontend/browser/index.html

‎Makefile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ lint-bash: ## Check all shell scripts using shellcheck
224224
-not -path "*/target/*" \
225225
-not -path "*/node_modules/*" \
226226
-not -path "*/website/docs/developers/scripts/setup/*" \
227+
-not -path "*/website/docs/developers/scripts/frontend/*" \
227228
-print0 | xargs -0 shellcheck
228229
@echo "Shellcheck completed successfully!"
229230

‎frontend/Makefile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ deploy: ## Deploy the application
6666

6767
.PHONY: deploy-leaderboard
6868
deploy-leaderboard: ## Deploy the leaderboard application
69+
$(MAKE) prebuild
70+
$(MAKE) build-prod
71+
cp dist/frontend/browser/assets/environments/leaderboard.js \
72+
dist/frontend/browser/assets/environments/env.js
73+
firebase deploy
74+
75+
.PHONY: deploy-leaderboard-sentry
76+
deploy-leaderboard-sentry: ## Deploy the leaderboard application with Sentry sourcemaps
6977
$(MAKE) prebuild
7078
$(MAKE) build-prod-sentry
7179
cp dist/frontend/browser/assets/environments/leaderboard.js \

‎frontend/README.md‎

Lines changed: 6 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,14 @@
11
# Openmina Frontend
22

3-
This is a simple Angular application that will help you to see the behaviour of
4-
your local rust based mina node.
3+
The frontend documentation has been moved to the main project website.
54

6-
## Prerequisites
5+
Please see: [Frontend Documentation](../website/docs/developers/frontend.mdx)
76

8-
### 1. Node.js v23.1.0
9-
10-
#### MacOS
11-
12-
```bash
13-
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
14-
brew install [email protected]
15-
```
16-
17-
#### Linux
18-
19-
```bash
20-
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
21-
source ~/.bashrc
22-
nvm install 23.1.0
23-
```
24-
25-
#### Windows
26-
27-
Download [Node.js v23.1.0](https://nodejs.org/) from the official website, open
28-
the installer and follow the prompts to complete the installation.
29-
30-
### 2. Angular CLI v19.2.14
31-
32-
```bash
33-
npm install -g @angular/[email protected]
34-
```
35-
36-
### 3. Installation
37-
38-
Open a terminal and navigate to this project's root directory
39-
40-
```bash
41-
cd PROJECT_LOCATION/openmina/frontend
42-
```
43-
44-
Install the dependencies
45-
46-
```bash
47-
npm install
48-
```
49-
50-
## Run the application
51-
52-
```bash
53-
npm start
54-
```
55-
56-
# Using O1JS wrapper
57-
58-
as of now, o1js is not prepared to work with Angular, therefore we need to use
59-
the wrapper that is provided in the `src/assets/o1js` folder. This wrapper is a
60-
simple javascript webpack based application that will allow us to use the o1js
61-
library in our Angular application.
62-
63-
How to use it:
64-
65-
1. Open a terminal and navigate to the `src/assets/o1js` folder
66-
2. Install the dependencies
67-
68-
```bash
69-
npm install
70-
```
71-
72-
3. Build the wrapper
7+
To view the documentation locally:
738

749
```bash
75-
npm run build-o1jswrapper
10+
cd ../website
11+
make docs-serve
7612
```
7713

78-
4. That's it. Now you can use your code from o1js-wrapper inside the Angular
79-
application by using `BenchmarksWalletsZkService => o1jsInterface`
14+
Then navigate to http://localhost:3000/docs/developers/frontend

‎website/docs/developers/frontend/index.mdx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Frontend Applications
3+
description: Web-based interfaces for the Mina Rust node ecosystem
4+
sidebar_position: 1
5+
---
6+
7+
import CodeBlock from "@theme/CodeBlock";
8+
import Tabs from "@theme/Tabs";
9+
import TabItem from "@theme/TabItem";
10+
import InstallNodejsLinux from "!!raw-loader!../scripts/frontend/install-nodejs-linux.sh";
11+
import InstallNodejsMacos from "!!raw-loader!../scripts/frontend/install-nodejs-macos.sh";
12+
import InstallAngularCli from "!!raw-loader!../scripts/frontend/install-angular-cli.sh";
13+
14+
# Frontend Applications
15+
16+
The Mina Rust node ecosystem includes several web-based frontend applications,
17+
each serving a specific purpose in the network.
18+
19+
## Components
20+
21+
### [Node Dashboard](./node-dashboard)
22+
23+
A comprehensive web interface for monitoring and interacting with your Mina Rust
24+
node. View real-time blockchain state, network activity, and node metrics
25+
through an intuitive dashboard.
26+
27+
### [Leaderboard](./leaderboard)
28+
29+
Track community participation in testnets with a competitive leaderboard system.
30+
Previously used to monitor and rank testnet participants based on their
31+
contributions to network stability and block production.
32+
33+
### [WebNode](./webnode)
34+
35+
Run a Mina node directly in your web browser using WebAssembly. This
36+
experimental feature enables block production without installing native
37+
software, pushing the boundaries of decentralized infrastructure.
38+
39+
## Prerequisites
40+
41+
All frontend applications are built with Angular and require Node.js to be
42+
installed.
43+
44+
<!-- prettier-ignore-start -->
45+
46+
:::info Platform Compatibility
47+
48+
These instructions are tested and compatible with:
49+
50+
- **Ubuntu**: 22.04, 24.04
51+
- **macOS**: macOS-13, macOS-14, macOS-latest
52+
53+
:::
54+
55+
<!-- prettier-ignore-stop -->
56+
57+
### Install Node.js
58+
59+
<Tabs groupId="operating-systems">
60+
<TabItem value="linux" label="Linux">
61+
62+
<CodeBlock language="bash" title="scripts/frontend/install-nodejs-linux.sh">
63+
{InstallNodejsLinux}
64+
</CodeBlock>
65+
66+
</TabItem>
67+
<TabItem value="macos" label="macOS">
68+
69+
<CodeBlock language="bash" title="scripts/frontend/install-nodejs-macos.sh">
70+
{InstallNodejsMacos}
71+
</CodeBlock>
72+
73+
</TabItem>
74+
</Tabs>
75+
76+
### Install Angular CLI
77+
78+
<CodeBlock language="bash" title="scripts/frontend/install-angular-cli.sh">
79+
{InstallAngularCli}
80+
</CodeBlock>
81+
82+
## Next Steps
83+
84+
With Node.js and Angular CLI installed, you're ready to build and run any of the
85+
frontend applications. Select a component above to learn about its specific
86+
features and configuration.

0 commit comments

Comments
 (0)