Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / webui-vue / 0c1dcc96f433046d8d0f9064739509013af358c3
commit0c1dcc96f433046d8d0f9064739509013af358c3[log] [tgz]
authorHuy Le Anh <hule@amperecomputing.com>Tue Nov 19 14:53:35 2024 +0700
committerHuyAnhLe <hule@amperecomputing.com>Fri Jan 10 02:39:27 2025 +0000
tree69a255eb5051307bff0a242b722993d8ed6543a7
parentee728e69538b70ae7e79b91ff442e7df0a659bcb [diff]
Use the createWebHashHistory method to avoid 404 errors

When using createWebHistory method in Vue 3, we may encounter a 404
error when reloading a page or accessing a specific URL directly due to
a server configuration that does not properly support HTML5 history,
references at [1] and [2]. Switching to createWebHashHistory method
avoids a 404 error when reloading a page, as it doesn't require a server
configuration to handle navigation. By using the # sign in the URL, the
browser processes everything after the # sign without sending it to the
server, which helps maintain the application state smoothly when
reloading the page.

Tested:
 1. Go to the Obmc web page.
 2. Switch between different pages.
 3. Reload the website by pressing the reload button on the web browser.
 4. The Obmc web page reloads normally, without any errors
 5. Go to the KVM page and press "Open In New Tab"; the new KVM screen
    window displays normally, without 404 error.
 6. Go to the SOL page and press "Open In New Tab"; the new SOL screen
    window displays normally, without 404 error.

[1]: https://router.vuejs.org/guide/essentials/history-mode.html
[2]: https://stackoverflow.com/questions/66514813/error-404-on-page-reload-with-vue3-routing

Change-Id: I6f4dbd2b27888c852b627d74471671352ee43a39
Signed-off-by: Huy Le Anh <hule@amperecomputing.com>
1 file changed
tree: 69a255eb5051307bff0a242b722993d8ed6543a7
  1. .github/
  2. docs/
  3. public/
  4. src/
  5. tests/
  6. .browserslistrc
  7. .env.ibm
  8. .env.intel
  9. .eslintrc.js
  10. .gitattributes
  11. .gitignore
  12. .npmrc
  13. .shellcheck
  14. babel.config.js
  15. CONTRIBUTING.md
  16. format-code.sh
  17. jest.config.js
  18. LICENSE
  19. OWNERS
  20. package-lock.json
  21. package.json
  22. postcss.config.js
  23. README.md
  24. run-ci
  25. vue.config.js
README.md

webui-vue

webui-vue is a web-based user interface for the OpenBMC firmware stack built on Vue.js.

Hold on... What happened to phosphor-webui?

phosphor-webui was built on AngularJS and AngularJS went End of Life on June 30, 2021. This repository is its replacement.

When will this new Vue.js application reach feature parity with phosphor-webui?

A few, mostly minor, features remain for feature parity. See GitHub Issues label:phosphor-webui-feature-parity for the complete list.

What improvements does webui-vue have?

As mentioned, this application is built using Vue.js, a modern open-source Model-View-ViewModel JavaScript framework supported by an active community and strong documentation. It has been architected to allow organizations to easily update the theme to support their brand. This rewrite takes advantage of front-end development best practices and does not suffer from some of the anti-patterns that exist in phosphor-webui today.

Should I switch to webui-vue from phosphor-webui?

It is recommended you switch from phosphor-webui if you haven't already.

webui-vue has the following additional features:

  • Ability to easily theme to meet brand guidelines
  • Accessibility
  • Full Redfish
  • Improved user experience based on user feedback
  • Language translation-ready
  • Modern front-end framework with an active community and future development roadmap

How can I get involved?

Documentation

The documentation for coding standards and components is located in the docs directory. It is created using the VuePress static site generator. Information about how to write documentation can be found on the VuePress website.