This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
qortal_ui_from_source [09/06/2020 04:37] – gfactor | qortal_ui_from_source [08/17/2023 12:04] (current) – Updated node version quickmythril | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== How To Build Qortal UI From Source ====== | ====== How To Build Qortal UI From Source ====== | ||
+ | {{: | ||
- | Follow the steps below to download, install, build and run Qortal | + | Building the [[https:// |
- | ===== Installation Tools Needed: ===== | + | ===== Installation Tools Needed ===== |
- | Node.js | + | * [[https:// |
+ | * [[https:// | ||
- | npm | + | The easiest way to install the required version of Node.js is via [[https:// |
+ | First make sure your OS (Operating System) is up to date. Open the terminal and type the following command. | ||
- | yarn | + | * Debian-based: |
+ | * Fedora / CentOS: '' | ||
- | ===== Clone The Following Repos: ===== | + | We will also need to install [[https:// |
- | https:// | + | * Debian-based: '' |
+ | * Fedora | ||
- | https://github.com/qortal/qortal-ui-core | + | We need nvm to manage which version of node we use. The following command will install nvm: |
+ | < | ||
- | https:// | + | * Windows systems will need to use [[https:// |
- | https:// | + | Check the installation with the '' |
- | ===== Dependency Installation and Linking ===== | + | * Debian-based: |
+ | * Fedora / CentOS: '' | ||
- | In qortal-ui-core/, | + | Now that your OS is up to date we need to install a few packages. Specifically Node.js and npm (Node Package Manager). Here are the installation commands for the terminal: |
- | yarn install | + | Fetch list of available Node.js versions: |
+ | < | ||
+ | Install LTS-Gallium version supported by Electron: | ||
+ | < | ||
+ | Install npm: | ||
+ | < | ||
- | yarn link | + | * On BSD do '' |
+ | * Adding via binary package mirror will only work if you have set the package path. You can do a node or java build via ports instead by downloading ports with '' | ||
- | Finally, in the qortal-ui directory, run: | + | You can verify your installation of Node.js using '' |
+ | If you are ever on the wrong version you can do the following to get back to the correct version:\\ | ||
+ | '' | ||
- | yarn link qortal-ui-core | + | If you have an older installation of npm, please do not forget to update that with '' |
- | yarn link qortal-ui-plugins | + | * On Windows systems, install the [[https:// |
- | yarn link qortal-ui-crypto | + | ===== Clone The Following Repo ===== |
- | ===== Build UI Server and Files ===== | + | The following command will clone the main UI repository (AKA all the code): |
+ | < | ||
+ | Once done, you need to move into the directory. (" | ||
+ | < | ||
- | In qortal-ui directory, run: | + | ===== Dependency Installation & Linking ===== |
- | yarn install | + | Now for the fun part, time to build the UI! |
- | yarn run build | + | * Note: If your system is capable of running bash scripts, you can skip the next two steps and just run the build script using the '' |
- | Start UI Server | + | We need to install and link dependencies in the main directory (qortal-ui). Assuming you are in the qortal-ui directory, the following commands below will link all the dependencies (press enter after each line, one by one): |
- | yarn run server | + | < |
- | Run UI using electron | + | ===== Build UI Server & Files ===== |
- | yarn run start-electron | + | Finally type the following command to build the UI: |
+ | < | ||
+ | Hooray you built the UI from source! But there are still a few things left to do. If you want a fully packaged file (exe, deb, AppImage, etc.) you can use [[https:// | ||
+ | |||
+ | |||
+ | ===== To Start The UI ===== | ||
+ | |||
+ | You can run the UI using electron, but running it through server is recommended.\\ | ||
+ | The following command will run UI using electron: | ||
+ | < | ||
+ | |||
+ | Otherwise you can simply access it in your browser at [[http:// | ||
+ | < | ||
+ | |||
+ | ===== Tips to Speed up Development ===== | ||
+ | |||
+ | Every time you edit the code, you will need to run '' | ||
+ | |||
+ | ===== Build Script ===== | ||
+ | |||
+ | To automate the above process, run the [[https:// | ||
+ | |||
+ | * -h: show help | ||
+ | * -f: force relink and reinstall dependencies | ||
+ | * -w: use '' | ||
+ | * -s: run UI server after completing the build | ||
+ | * -e: run electron server after completing the build | ||
+ | |||
+ | Example command to build and run the UI server:\\ | ||
+ | '' |