Merge pull request #71 from threefoldtech/development_fl_server_frontend

Development fl server frontend
threefoldtech · Sep 12, 2024 · 725f1ed · 725f1ed
2 parents 152a757 + 9889de0
commit 725f1ed
Show file tree

Hide file tree

Showing 40 changed files with 2,818 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 /tests/*.flist.d
 result
 .direnv/
+fl-server/flists
+fl-server/config.toml
diff --git a/frontend/.env b/frontend/.env
@@ -0,0 +1 @@
+VITE_API_URL="http://localhost:4000"
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -0,0 +1,13 @@
+# build stage
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,82 @@
+# Threefold RFS
+
+## Description
+
+`Threefold RFS` is a frontend that helps manage the RFS server for creating, mounting, and extracting FungiStore lists, or fl for short. An fl is a simple format that stores information about a whole filesystem in a compact way. It doesn't hold the actual data but includes enough details to retrieve the data from a store.
+
+## Prerequesites
+
+- build essentials
+
+  ```bash
+  sudo apt-get install build-essential
+  ```
+
+- [node js](https://nodejs.org/en/download/package-manager)
+- [rust](https://www.rust-lang.org/tools/install)
+- Cargo, to be configured to run in the shell
+- musl tool
+
+  ```bash
+      sudo apt install musl-tools
+  ```
+
+## Installation
+
+```bash
+    git clone https://github.com/threefoldtech/rfs.git
+```
+
+### backend
+
+In fl-server dir:
+
+- create flists dir containaing dirs for each user
+  ex:
+  - fl-server
+    - flists
+      - user1
+      - user2
+- include config file
+  ex:
+
+  ```yml
+      host='localhost'
+      port=4000
+      store_url=['dir:///tmp/store0']
+      flist_dir='flists'
+
+      jwt_secret='secret'
+      jwt_expire_hours=5
+
+      [[users]] # list of authorized user in the server
+      username = "user1"
+      password = "password1"
+
+      [[users]]
+      username = "user2"
+      password = "password2"
+  ```
+
+- Move to `fl-server` directory and execute the following command to run the backend:
+
+  ```bash
+  cargo run --bin fl-server -- --config-path config.toml
+  ```
+
+### frontend
+
+- Move to `frontend` directory, open new terminal and execute the following commands to run the frontend:
+
+  ```bash
+      npm install
+      npm run dev
+  ```
+
+## Usage
+
+- Login with users listed in config.toml with their username and password
+- Create Flist
+- Preview Flist
+- List all Flists
+- Download Flist
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image" href="./src/assets/logo.png">
+  <title>Threefold Flist</title>
+  <link href="./src/style.css" rel="stylesheet">
+  <link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>