diff options
-rw-r--r-- | documentation/dev-manual/dev-manual-common-tasks.xml | 289 | ||||
-rw-r--r-- | documentation/dev-manual/figures/cute-files-npm-example.png | bin | 0 -> 26248 bytes |
2 files changed, 289 insertions, 0 deletions
diff --git a/documentation/dev-manual/dev-manual-common-tasks.xml b/documentation/dev-manual/dev-manual-common-tasks.xml index b2a13ed87b..4f06aac976 100644 --- a/documentation/dev-manual/dev-manual-common-tasks.xml +++ b/documentation/dev-manual/dev-manual-common-tasks.xml | |||
@@ -8979,6 +8979,9 @@ | |||
8979 | <listitem><para> | 8979 | <listitem><para> |
8980 | <link linkend='testing-packages-with-ptest'>Setting up and running package test (ptest)</link> | 8980 | <link linkend='testing-packages-with-ptest'>Setting up and running package test (ptest)</link> |
8981 | </para></listitem> | 8981 | </para></listitem> |
8982 | <listitem><para> | ||
8983 | <link linkend='creating-node-package-manager-npm-packages'>Creating Node Package Manager (NPM) Packages</link> | ||
8984 | </para></listitem> | ||
8982 | </itemizedlist> | 8985 | </itemizedlist> |
8983 | </para> | 8986 | </para> |
8984 | 8987 | ||
@@ -10407,6 +10410,292 @@ | |||
10407 | </para> | 10410 | </para> |
10408 | </section> | 10411 | </section> |
10409 | </section> | 10412 | </section> |
10413 | |||
10414 | <section id='creating-node-package-manager-npm-packages'> | ||
10415 | <title>Creating Node Package Manager (NPM) Packages</title> | ||
10416 | |||
10417 | <para> | ||
10418 | <ulink url='https://en.wikipedia.org/wiki/Npm_(software)'>NPM</ulink> | ||
10419 | is a package manager for the JavaScript programming | ||
10420 | language. | ||
10421 | The Yocto Project supports the NPM | ||
10422 | <ulink url='&YOCTO_DOCS_BB_URL;#bb-fetchers'>fetcher</ulink>. | ||
10423 | You can use this fetcher in combination with | ||
10424 | <ulink url='&YOCTO_DOCS_REF_URL;#ref-devtool-reference'><filename>devtool</filename></ulink> | ||
10425 | to create recipes that produce NPM packages. | ||
10426 | </para> | ||
10427 | |||
10428 | <para> | ||
10429 | Two workflows exist that allow you to create NPM packages | ||
10430 | using <filename>devtool</filename>: the NPM registry modules | ||
10431 | method and the NPM project code method. | ||
10432 | <note> | ||
10433 | While it is possible to create NPM recipes manually, | ||
10434 | using <filename>devtool</filename> is far simpler. | ||
10435 | </note> | ||
10436 | Additionally, some requirements and caveats exist. | ||
10437 | </para> | ||
10438 | |||
10439 | <section id='npm-package-creation-requirements'> | ||
10440 | <title>Requirements and Caveats</title> | ||
10441 | |||
10442 | <para> | ||
10443 | You need to be aware of the following before using | ||
10444 | <filename>devtool</filename> to create NPM packages: | ||
10445 | <itemizedlist> | ||
10446 | <listitem><para> | ||
10447 | Of the two methods that you can use | ||
10448 | <filename>devtool</filename> to create NPM | ||
10449 | packages, the registry approach is slightly | ||
10450 | simpler. | ||
10451 | However, you might consider the project | ||
10452 | approach because you do not have to publish | ||
10453 | your module in the NPM registry | ||
10454 | (<ulink url='https://docs.npmjs.com/misc/registry'><filename>npm-registry</filename></ulink>), | ||
10455 | which is NPM's public registry. | ||
10456 | </para></listitem> | ||
10457 | <listitem><para> | ||
10458 | Be familiar with | ||
10459 | <ulink url='&YOCTO_DOCS_REF_URL;#ref-devtool-reference'><filename>devtool</filename></ulink>. | ||
10460 | </para></listitem> | ||
10461 | <listitem><para> | ||
10462 | The NPM host tools need the native | ||
10463 | <filename>nodejs-npm</filename> package, which | ||
10464 | is part of the OpenEmbedded environment. | ||
10465 | You need to get the package by cloning the | ||
10466 | <ulink url='https://github.com/openembedded/meta-openembedded'></ulink> | ||
10467 | repository out of GitHub. | ||
10468 | Be sure to add the path to your local copy to | ||
10469 | your <filename>bblayers.conf</filename> file. | ||
10470 | </para></listitem> | ||
10471 | <listitem><para> | ||
10472 | <filename>devtool</filename> cannot detect | ||
10473 | native libraries in module dependencies. | ||
10474 | Consequently, you must manually add packages | ||
10475 | to your recipe. | ||
10476 | </para></listitem> | ||
10477 | <listitem><para> | ||
10478 | While deploying NPM packages, | ||
10479 | <filename>devtool</filename> cannot determine | ||
10480 | which dependent packages are missing on the | ||
10481 | target (e.g. the node runtime | ||
10482 | <filename>nodejs</filename>). | ||
10483 | Consequently, you need to find out what | ||
10484 | files are missing and be sure they are on the | ||
10485 | target. | ||
10486 | </para></listitem> | ||
10487 | <listitem><para> | ||
10488 | Although you might not need NPM to run your | ||
10489 | node package, it is useful to have NPM on your | ||
10490 | target. | ||
10491 | The NPM package name is | ||
10492 | <filename>nodejs-npm</filename>. | ||
10493 | </para></listitem> | ||
10494 | </itemizedlist> | ||
10495 | </para> | ||
10496 | </section> | ||
10497 | |||
10498 | <section id='npm-using-the-registry-modules-method'> | ||
10499 | <title>Using the Registry Modules Method</title> | ||
10500 | |||
10501 | <para> | ||
10502 | This section presents an example that uses the | ||
10503 | <filename>cute-files</filename> module, which is a | ||
10504 | file browser web application. | ||
10505 | <note> | ||
10506 | You must know the <filename>cute-files</filename> | ||
10507 | module version. | ||
10508 | </note> | ||
10509 | </para> | ||
10510 | |||
10511 | <para> | ||
10512 | The first thing you need to do is use | ||
10513 | <filename>devtool</filename> and the NPM fetcher to | ||
10514 | create the recipe: | ||
10515 | <literallayout class='monospaced'> | ||
10516 | $ devtool add "npm://registry.npmjs.org;name=cute-files;version=1.0.2" | ||
10517 | </literallayout> | ||
10518 | The <filename>devtool add</filename> command runs | ||
10519 | <filename>recipetool create</filename> and uses the | ||
10520 | same fetch URI to download each dependency and capture | ||
10521 | license details where possible. | ||
10522 | The result is a generated recipe. | ||
10523 | </para> | ||
10524 | |||
10525 | <para> | ||
10526 | The recipe file is fairly simple and contains every | ||
10527 | license that <filename>recipetool</filename> finds | ||
10528 | and includes the licenses in the recipe's | ||
10529 | <ulink url='&YOCTO_DOCS_REF_URL;#var-LIC_FILES_CHKSUM'><filename>LIC_FILES_CHKSUM</filename></ulink> | ||
10530 | variables. | ||
10531 | You need to examine the variables and look for those | ||
10532 | with "unknown" in the | ||
10533 | <ulink url='&YOCTO_DOCS_REF_URL;#var-LICENSE'><filename>LICENSE</filename></ulink> | ||
10534 | field. | ||
10535 | You need to track down the license information for | ||
10536 | "unknown" modules and manually add the information to the | ||
10537 | recipe. | ||
10538 | </para> | ||
10539 | |||
10540 | <para> | ||
10541 | <filename>recipetool</filename> creates "shrinkwrap" and | ||
10542 | "lockdown" files for your recipe. | ||
10543 | Shrinkwrap files capture the version of all dependent | ||
10544 | modules. | ||
10545 | Many packages do not provide shrinkwrap files. | ||
10546 | <filename>recipetool</filename> create a shrinkwrap | ||
10547 | file as it runs. | ||
10548 | You can replace the shrinkwrap file with your own file | ||
10549 | by setting the <filename>NPM_SHRINKWRAP</filename> | ||
10550 | variable. | ||
10551 | </para> | ||
10552 | |||
10553 | <para> | ||
10554 | Lockdown files contain the checksum for each module | ||
10555 | to determine if your users download the same files when | ||
10556 | building with a recipe. | ||
10557 | Lockdown files ensure that dependencies have not been | ||
10558 | changed and that your NPM registry is still providing | ||
10559 | the same file. | ||
10560 | <note> | ||
10561 | A package is created for each sub-module. | ||
10562 | This policy is the only practical way to have the | ||
10563 | licenses for all of the dependencies represented | ||
10564 | in the license manifest of the image. | ||
10565 | </note> | ||
10566 | </para> | ||
10567 | |||
10568 | <para> | ||
10569 | The <filename>devtool edit-recipe</filename> command | ||
10570 | lets you take a look at the recipe: | ||
10571 | <literallayout class='monospaced'> | ||
10572 | $ devtool edit-recipe cute-files | ||
10573 | SUMMARY = "Turn any folder on your computer into a cute file browser, available on the local network." | ||
10574 | LICENSE = "BSD-3-Clause & Unknown & MIT & ISC" | ||
10575 | LIC_FILES_CHKSUM = "file://LICENSE;md5=71d98c0a1db42956787b1909c74a86ca \ | ||
10576 | file://node_modules/content-disposition/LICENSE;md5=c6e0ce1e688c5ff16db06b7259e9cd20 \ | ||
10577 | file://node_modules/express/LICENSE;md5=5513c00a5c36cd361da863dd9aa8875d \ | ||
10578 | ... | ||
10579 | |||
10580 | SRC_URI = "npm://registry.npmjs.org;name=cute-files;version=${PV}" | ||
10581 | NPM_SHRINKWRAP := "${THISDIR}/${PN}/npm-shrinkwrap.json" | ||
10582 | NPM_LOCKDOWN := "${THISDIR}/${PN}/lockdown.json" | ||
10583 | inherit npm | ||
10584 | # Must be set after inherit npm since that itself sets S | ||
10585 | S = "${WORKDIR}/npmpkg" | ||
10586 | |||
10587 | LICENSE_${PN}-content-disposition = "MIT" | ||
10588 | ... | ||
10589 | LICENSE_${PN}-express = "MIT" | ||
10590 | LICENSE_${PN} = "MIT" | ||
10591 | </literallayout> | ||
10592 | Three key points exist in the previous example: | ||
10593 | <itemizedlist> | ||
10594 | <listitem><para> | ||
10595 | <ulink url='&YOCTO_DOCS_REF_URL;#var-SRC_URI'><filename>SRC_URI</filename></ulink> | ||
10596 | uses the NPM scheme so that the NPM fetcher | ||
10597 | is used. | ||
10598 | </para></listitem> | ||
10599 | <listitem><para> | ||
10600 | <filename>recipetool</filename> collects all | ||
10601 | the license information. | ||
10602 | If a sub-module's license is unavailable, | ||
10603 | the sub-module's name appears in the comments. | ||
10604 | </para></listitem> | ||
10605 | <listitem><para> | ||
10606 | The <filename>inherit npm</filename> statement | ||
10607 | causes the | ||
10608 | <ulink url='&YOCTO_DOCS_REF_URL;#ref-classes-npm'><filename>npm</filename></ulink> | ||
10609 | class to package up all the modules. | ||
10610 | </para></listitem> | ||
10611 | </itemizedlist> | ||
10612 | </para> | ||
10613 | |||
10614 | <para> | ||
10615 | You can run the following command to build the | ||
10616 | <filename>cute-files</filename> package: | ||
10617 | <literallayout class='monospaced'> | ||
10618 | $ devtool build cute-files | ||
10619 | </literallayout> | ||
10620 | Remember that <filename>nodejs</filename> must be | ||
10621 | installed on the target before your package. | ||
10622 | </para> | ||
10623 | |||
10624 | <para> | ||
10625 | Assuming 192.168.7.2 for the target's IP address, use | ||
10626 | the following command to deploy your package: | ||
10627 | <literallayout class='monospaced'> | ||
10628 | $ devtool deploy-target -s cute-files root@192.168.7.2 | ||
10629 | </literallayout> | ||
10630 | Once the package is installed on the target, you can | ||
10631 | test the application: | ||
10632 | <note> | ||
10633 | Because of a know issue, you cannot simply run | ||
10634 | <filename>cute-files</filename> as you would if you | ||
10635 | had run <filename>npm install</filename>. | ||
10636 | </note> | ||
10637 | <literallayout class='monospaced'> | ||
10638 | $ cd /usr/lib/node_modules/cute-files | ||
10639 | $ node cute-files.js | ||
10640 | </literallayout> | ||
10641 | On a browser, go to | ||
10642 | <filename>http://192.168.7.2:3000</filename> and you | ||
10643 | see the following: | ||
10644 | <imagedata fileref="figures/cute-files-npm-example.png" align="center" width="6in" depth="4in" /> | ||
10645 | </para> | ||
10646 | |||
10647 | <para> | ||
10648 | You can find the recipe in | ||
10649 | <filename>workspace/recipes/cute-files</filename>. | ||
10650 | You can use the recipe in any layer you choose. | ||
10651 | </para> | ||
10652 | </section> | ||
10653 | |||
10654 | <section id='npm-using-the-npm-projects-method'> | ||
10655 | <title>Using the NPM Projects Code Method</title> | ||
10656 | |||
10657 | <para> | ||
10658 | Although it is useful to package modules already in the | ||
10659 | NPM registry, adding <filename>node.js</filename> projects | ||
10660 | under development is a more common developer use case. | ||
10661 | </para> | ||
10662 | |||
10663 | <para> | ||
10664 | This section covers the NPM projects code method, which is | ||
10665 | very similar to the "registry" approach described in the | ||
10666 | previous section. | ||
10667 | In the NPM projects method, you provide | ||
10668 | <filename>devtool</filename> with an URL that points to the | ||
10669 | source files. | ||
10670 | </para> | ||
10671 | |||
10672 | <para> | ||
10673 | Replicating the same example, (i.e. | ||
10674 | <filename>cute-files</filename>) use the following command: | ||
10675 | <literallayout class='monospaced'> | ||
10676 | $ devtool add https://github.com/martinaglv/cute-files.git | ||
10677 | </literallayout> | ||
10678 | The recipe this command generates is very similar to the | ||
10679 | recipe created in the previous section. | ||
10680 | However, the <filename>SRC_URI</filename> looks like the | ||
10681 | following: | ||
10682 | <literallayout class='monospaced'> | ||
10683 | SRC_URI = "git://github.com/martinaglv/cute-files.git;protocol=https \ | ||
10684 | npm://registry.npmjs.org;name=commander;version=2.9.0;subdir=node_modules/commander \ | ||
10685 | npm://registry.npmjs.org;name=express;version=4.14.0;subdir=node_modules/express \ | ||
10686 | npm://registry.npmjs.org;name=content-disposition;version=0.3.0;subdir=node_modules/content-disposition \ | ||
10687 | " | ||
10688 | </literallayout> | ||
10689 | In this example, the main module is taken from the Git | ||
10690 | repository and dependents are taken from the NPM registry. | ||
10691 | Other than those differences, the recipe is basically the | ||
10692 | same between the two methods. | ||
10693 | You can build and deploy the package exactly as described | ||
10694 | in the previous section that uses the registry modules | ||
10695 | method. | ||
10696 | </para> | ||
10697 | </section> | ||
10698 | </section> | ||
10410 | </section> | 10699 | </section> |
10411 | 10700 | ||
10412 | <section id='efficiently-fetching-source-files-during-a-build'> | 10701 | <section id='efficiently-fetching-source-files-during-a-build'> |
diff --git a/documentation/dev-manual/figures/cute-files-npm-example.png b/documentation/dev-manual/figures/cute-files-npm-example.png new file mode 100644 index 0000000000..1ebe74f535 --- /dev/null +++ b/documentation/dev-manual/figures/cute-files-npm-example.png | |||
Binary files differ | |||