01_getting_started.md

Getting Started

This tutorial explains how to create a simple web-based shopping application using LaxarJS. It provides a step-by-step introduction into creating widgets and activities and using them in an application. The tutorial is intended for developers who are familiar with standard web technologies (HTML, JavaScript) and a basic familiarity with a UI-technologies such as React, AngularJS or Vue.js, with Vue.js being used throughout this tutorial.

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 "vue":

? 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:

npm install

Now you can start the webpack development server which assembles your application and serves it over HTTP:

npm start

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 Ctrl-C.

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! »