f87ce0cadf
I introduced a change in the UI that was a better way to dynamically render Svelte components (https://review.dev.storj.io/c/storj/storj/+/5931/4..5) during the review of the first version of it, however, while it works perfectly on development mode it doesn't work when the assets are built for production, failing silently, because the constructor name get renamed due to the name mangling caused by the minifyer as stated in the following issue: https://github.com/sveltejs/svelte/issues/6980 This commit use a different alternative not based on the constructor name and it works fine with the production build. Change-Id: I643c405f877a9206cf0e51b44d5138e5a9756a79 |
||
|---|---|---|
| .. | ||
| assets | ||
| src | ||
| static | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| .prettierrc | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| svelte.config.js | ||
| tsconfig.json | ||
Admin UI
Implementation details
This is a project based on the Sveltekit.
The project is set up with Typescript.
The Web App is currently straightforward as we specified that v1 would be.
The v1 is just a simple web page that exposes the Admin API through some forms and allow to a call the API without needing to use some HTTP REST clients (e.g. Postman, cURL, etc.). It doesn't offer any user authentication; the user has to know the API authorization token for using it.
The UI has a set of Svelte components that collaborate together to render an HTML form with input elements from the Admin API client. The Svelte components expect some values of a certain Typescript interfaces, types, and classes, for being able to dynamically render the HTML form and elements.
Each source has a brief doc comment about its functionality.
Development
Install the dependencies...
npm install
...then run the development server with autoreload on changes
npm run dev
Navigate to localhost:3000. You should see your app running.
Building for production mode
To create an optimized version of the app:
npm run build