Qortal Project

The future of blockchain platforms

User Tools

Site Tools

Trace:
qortal_ui_from_source

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
qortal_ui_from_source [04/14/2023 09:11] – Updated node and npm versions quickmythrilqortal_ui_from_source [08/17/2023 12:04] (current) – Updated node version quickmythril
Line 8: Line 8:
   * [[https://nodejs.org|Node.js]]   * [[https://nodejs.org|Node.js]]
   * [[https://www.npmjs.com|npm]]   * [[https://www.npmjs.com|npm]]
-  * [[https://classic.yarnpkg.com|yarn]] 
  
 The easiest way to install the required version of Node.js is via [[https://nvm.sh|nvm]] (Node Version Manager). The easiest way to install the required version of Node.js is via [[https://nvm.sh|nvm]] (Node Version Manager).
Line 31: Line 30:
   * Fedora / CentOS: ''source ~/.bashrc''   * Fedora / CentOS: ''source ~/.bashrc''
  
-Now that your OS is up to date we need to install a few packages. Specifically Node.js, npm (Node Package Manager), and yarn. Here are the installation commands for the terminal:+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:
  
 Fetch list of available Node.js versions: Fetch list of available Node.js versions:
 <code>nvm ls-remote</code> <code>nvm ls-remote</code>
 Install LTS-Gallium version supported by Electron: Install LTS-Gallium version supported by Electron:
-<code>nvm install v18.14.0</code>+<code>nvm install v18.16.1</code>
 Install npm: Install npm:
-<code>npm install -g npm@9.6.4</code> +<code>npm install -g npm@9.8.1</code>
-Install yarn: +
-<code>npm install -g yarn@1.22.19</code>+
  
-  * On BSD do a ''pkg_add node'' followed by ''npm install -g yarn''+  * On BSD do ''pkg_add node''
   * 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 ''portsnap fetch method''   * 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 ''portsnap fetch method''
  
-You can verify your installation of Node.js using ''node -v'' (should be 18.14.0).+You can verify your installation of Node.js using ''node -v'' (should be 18.16.1).
 If you are ever on the wrong version you can do the following to get back to the correct version:\\ If you are ever on the wrong version you can do the following to get back to the correct version:\\
-''nvm install 18.14.0 && nvm use 18.14.0''+''nvm install 18.16.1 && nvm use 18.16.1''
  
 If you have an older installation of npm, please do not forget to update that with ''npm update -g'' If you have an older installation of npm, please do not forget to update that with ''npm update -g''
Line 66: Line 63:
   * 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 ''./build.sh'' command. [[qortal_ui_from_source#build_script|(more info)]]   * 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 ''./build.sh'' command. [[qortal_ui_from_source#build_script|(more info)]]
  
-We need to install and link dependencies in the four main directories (qortal-ui, qortal-ui-core, qortal-ui-crypto, and qortal-ui-plugins). 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):+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):
  
-<code>cd qortal-ui-core +<code>npm install</code>
-yarn install --pure-lockfile && yarn link && cd .. +
-cd qortal-ui-crypto +
-yarn install --pure-lockfile && yarn link && cd .. +
-cd qortal-ui-plugins +
-yarn install --pure-lockfile && yarn link && cd .. +
-yarn install --pure-lockfile +
-yarn link qortal-ui-core +
-yarn link qortal-ui-crypto +
-yarn link qortal-ui-plugins</code>+
  
 ===== Build UI Server & Files ===== ===== Build UI Server & Files =====
  
 Finally type the following command to build the UI: Finally type the following command to build the UI:
-<code>yarn build</code> +<code>npm run build</code> 
-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://www.electron.build|electron-builder]] with: ''yarn update-package-json && yarn release'' (Note that this will build only for the platform it is run from by default.)  The build config can be found in the [[https://github.com/Qortal/qortal-ui/blob/master/electron-builder.yml|electron-builder.yml]] file.+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://www.electron.build|electron-builder]] with: ''npm run release'' (Note that this will build only for the platform it is run from by default.)  The build config can be found in the [[https://github.com/Qortal/qortal-ui/blob/master/electron-builder.yml|electron-builder.yml]] file.
  
  
Line 89: Line 77:
  
 You can run the UI using electron, but running it through server is recommended.\\ You can run the UI using electron, but running it through server is recommended.\\
-The following command will run UI using election: +The following command will run UI using electron: 
-<code>yarn run start-electron</code>+<code>npm run start-electron</code>
  
 Otherwise you can simply access it in your browser at [[http://localhost:12388]] after using this command. The optional "&" runs commands in the background, to let you continue using the terminal. Otherwise you can simply access it in your browser at [[http://localhost:12388]] after using this command. The optional "&" runs commands in the background, to let you continue using the terminal.
-<code>yarn run server &</code>+<code>npm run server &</code>
  
 ===== Tips to Speed up Development ===== ===== Tips to Speed up Development =====
  
-Every time you edit the code, you will need to run ''yarn build'' and refresh that part of the UI (depending on what part of the code you edited or added/removed). The fastest way to see your code changes is to first of all run the UI in your browser: ''yarn server &'' then, open a second terminal and do ''cd qortal'' & then enter the ''yarn watch'' command. Let that run for one or two minutes, until you see things stop moving in the terminal. Let me take a minute to explain how it works. First of all it is required that you run build before running watch. Normally if you make a change to the code, and build it will take two or three minutes for the change to be made after saving the file, and after that you have to refresh the UI page. That is REALLY slow for development. Instead, if you watch, it stays running in the background. After it has run for a few minutes it will only build your most recent changes. So after you save a file of code you edited, you can expect it to finish building that section of code in about 10 seconds, depending on how many lines of code you wrote. When looking in the terminal after saving a file, you will notice some text pops up, once that text goes away, it finishes applying your changes. You should now click to a new tab and back if the change is only in that tab. If the change is across the whole UI, you will have to refresh the page entirely.+Every time you edit the code, you will need to run ''npm run build'' and refresh that part of the UI (depending on what part of the code you edited or added/removed). The fastest way to see your code changes is to first of all run the UI in your browser: ''npm run server &'' then, open a second terminal and do ''cd qortal'' & then enter the ''npm run watch'' command. Let that run for one or two minutes, until you see things stop moving in the terminal. Let me take a minute to explain how it works. First of all it is required that you run build before running watch. Normally if you make a change to the code, and build it will take two or three minutes for the change to be made after saving the file, and after that you have to refresh the UI page. That is REALLY slow for development. Instead, if you watch, it stays running in the background. After it has run for a few minutes it will only build your most recent changes. So after you save a file of code you edited, you can expect it to finish building that section of code in about 10 seconds, depending on how many lines of code you wrote. When looking in the terminal after saving a file, you will notice some text pops up, once that text goes away, it finishes applying your changes. You should now click to a new tab and back if the change is only in that tab. If the change is across the whole UI, you will have to refresh the page entirely.
  
 ===== Build Script ===== ===== Build Script =====
Line 105: Line 93:
   * -h: show help   * -h: show help
   * -f: force relink and reinstall dependencies   * -f: force relink and reinstall dependencies
-  * -w: use ''yarn watch'' instead of ''yarn build'' to enable hot swapping+  * -w: use ''npm run watch'' instead of ''npm run build'' to enable hot swapping
   * -s: run UI server after completing the build   * -s: run UI server after completing the build
   * -e: run electron server after completing the build   * -e: run electron server after completing the build
qortal_ui_from_source.1681477876.txt.gz · Last modified: 04/14/2023 09:11 by quickmythril

Page Tools