A Single Page Application boilerplate using Knockout as organizational framework to build components-based frontend.
- Node 8.11.1 LTS
Install dependencies
npm install
Start application
npm start
Build application
npm run build
The output is dist/
directory
Run unit-tests
npm test
# or "npm run test:watch" to watch status of unit-tests in realtime
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── index.html
└── src
└── ko
└── ViewModel.js
└── App.vm.js
└── App.tmpl.js
└── App.component.js
└── App.spec.js
└── App.css
└── registry.js
└── index.js
└── setupTests.js
└── webpack
└── config.js
public/index.html is the single page of the whole application
src/ko/ViewModel.js An abstract class that any Knockout viewmodel implementation should extend. It is a decorator class and it injects the parameters of the component inside the "this" of the viewmodel.
src/registry.js where you import all components and register them into registry
collection. So basically, this file will be updated with the creation of any new KO component.
src/index.js the facade and the entry point of the whole application where all components are fetched from src/registry.js and registred by Knockout. So basically, this file should be stable and does not need any update.
src/[MyComponent].component.js it is KO component that should import the view-model, the template as well as the style of the component if any. Then, it exports a component following this shape:
{
component, // name of component as string
viewModel, // import of src/[MyComponent].vm.js
template // import of src/[MyComponent].tmpl.html
}
src/[MyComponent].vm.js is the ViewModel class of the component src/[MyComponent].component.js and it should inherit from src/ko/ViewModel.js.
src/[MyComponent].tmpl.html is the HTML template of the component src/[MyComponent].component.js.
src/setupTests It makes some test utilities globally, then unit-tests file can access to them directly with any import statement (.e.g: expect). It also create test utilities for Knockout files (.e.g: mount
function to test Knockout templates)
BOILERPLATE=https://github.com/abdennour/knockout-es6-components-webpack-boilerplate.git;
git clone $BOILERPLATE my-app;
cd my-app;
git remote set-url origin https://github.com/my-name/my-app
# To synchronize your app with updates of this boilerplate
# , then proceed with the following commands
git remote add boilerplate $BOILERPLATE
# Fetch last updates of boilerplate
git fetch boilerplate master;
# It is now your expertise with GIT to orchestrate between two repositories: yours and this boilerplate
Please read CONTRIBUTING.md for details on our code and the process of handling pull requests.
- Abdennour TOUMI - Original Author - in.abdennoor.com
This project is licensed under the BSD 3-Clause License - see the LICENSE file for details