Component developer guide - networknt/light GitHub Wiki

Here is the steps to build a reusable lazy loaded web component that can be deployed on Light Framework that everyone can use.

Create a working directory and check out the source code. I am using ~/networknt as my workspace but you can have other names.

git clone https://github.com/networknt/light.git

Create a new folder under light/component to host your own component. With too many people working on the same platform and all component can be deployed on the same server, everything must has its own name space. For example, com-networknt-light-c-post-summary as the folder name. The 'c' follows the domain name indicates this is a component instead of 'v' as view and 'a' as application.

Copy the files under com-networknt-light-c-example to your folder.

cd yourfolder under component
cp -r ../com-networknt-light-c-example/* .

Now you need to modify several places before starting with your component. In the future, I will make this configurable in yeoman script.

  • README.md contains all the information regarding to your component.
  • LICENSE contains license information for your component.
  • package.json update name, version, description and author.
  • karma.conf.js need to update files that to be loaded for testing.
  • index.html will be loaded in the browser once webserver is up and running.
  • gulpfile.js needs to be updated to specify the name of js files for release.
  • bower.json needs to be updated for name, main, version, author and keywords.
  • app.js is the script file defines lightApp and Controller for development.
  • tpl folder contains templates used by your component
  • test folder contains all your unit test cases
  • src folder contains all the js files.

Download node modules and bower components into the local directory.

npm install
bower install

Build and start the server for example component. The first command will build your project and the second command will start webserver and open a browser to point to your site. If everything is OK, you should see "Name: Naomi Address: 1600 Amphitheatre" displayed on your browser.

gulp
gulp webserver

Now you can start working on your component. Every time you update something within the folder, the browser will be refreshed to reflect your latest changes. In your index.html file, you should include all the individual js files for your development testing and then replace it with built script to test your component in one file including templates.

    <script src="src/directive.js"></script>
    <!--<script src="com-networknt-light-c-example.js"></script>-->

You might have already realized that all the scripts are using lightApp as module and this is to support lazy loading your component into the Light Framework which has only one module called lightApp.

Please see how to deploy or release component in order to release your built component.

⚠️ **GitHub.com Fallback** ⚠️