If you are completely unfamiliar with LaxarJS, you might want to check out Why LaxarJS and maybe have a brief look at the key concepts first. While this tutorial aims to be a comprehensive guide for starters, it will not include and explain every line of code of the whole project. Instead, each step introduces a new concept of LaxarJS. Still, links to the relevant project source files are provided from each section.
Get the Prerequisites
To create projects with LaxarJS, Node.js (v6 or later) is required. Everything else will be obtained as we go.
First, you will need to create a new LaxarJS application. To simplify this process, install the Yeoman scaffolding tool as well as the Yeoman generator for LaxarJS 2:
npm install -g yo generator-laxarjs2
Depending on your setup you may need to use
sudo for this.
If you cannot or do not want to modify your global NPM packages, take a look to the local installation instructions in the generator documentation.
Creating a LaxarJS Application
The recommended way to create a LaxarJS application is by using our Yeoman generator. Since you just installed the generator, all you need to do is:
mkdir shop-demo cd shop-demo yo laxarjs2
The generator will ask for some details about the application, offering helpful suggestions where possible.
Let us answer the questions of the LaxarJS generator as follows, making sure to include the integration technology
? The application name: shop-demo ? Description (optional): a small web shop ? License: none ? Project homepage (optional): ? Author name (optional): ? Select integration technologies to include: ◯ AngularJS 1.x ("angular") ◯ Angular 2.x/4.x ("angular2") ◯ React ("react") ◉ Vue.js ("vue") ? Should an example set of widgets be generated? No
Provided with this information, the generator will create a basic LaxarJS application for you.
It also prepares a
package.json containing its dependencies.
To install these dependencies, you will need to run:
Now you can start the webpack development server which assembles your application and serves it over HTTP:
The empty application can now be opened, by pointing your web browser at http://localhost:8080/debug.html. Here, you should see an empty document containing nothing but a greeting message to tell you that everything was set up correctly.
To stop the server (for now), press
The Next Step
The next step is to create a simple widget and to add it to your application in order to display "Hello World!".
Getting Started | Hello, World! »