Setting Up Your Application

You can start a Winnetou project from scratch or add the library's constructos and functionality to your existing code. Here we will show you how to start an app from scratch.

Everything you need, in 3 lines.

To start a Winnetou project from scratch, open the terminal and type:

  npm init -y;
  npm install --save-dev winnetoujs;
  node wbr --scaffolding;

npm init -y; To start a project that can install modules from npm.

npm install --save-dev winnetoujs; Installs the framework in your project.

node wbr --scaffolding; (Optional) Copies files from an initial WinnetouJS template project to your directory.

Configuration File

Well, before we see how to start a WinnetouJs project and write our first constructo, it is necessary to understand the configuration of the project and also the file structure. The configuration file is called win.config.json and it is there that we define all the locations and settings of the project files.

This file needs to be in root of project, beside wbr.

    {
      "$schema": "./node_modules/winnetoujs/schemas/win.config.schema.json",
      "constructosPath": "./constructos",
      "constructosOut": "./src/constructos",
      "publicPath": "/",
      "apps": [
          {
              "entry": "./src/app.js",
              "out": "../Public/home/js"
          }
      ],
      "sass": [
          {
              "entryFolder": "./sass",
              "outFolder": "../Public/home/css"
          },
          {
              "entryFolder": "./sass_docs",
              "outFolder": "../Public/docs/css"
          }
      ]
  }
        
    

It must be at the same level as wbr.js and node_modules.

If your server is configured to serve public in /Public folder and your winnetou implementation is within /Public/winnetou-app folder, your publicPath setting must be /winnetou-app.

Visual Studio Code and JSDoc

WinnetouJs is passionate about VanillaJs and we believe in the potential and freedom of javascript. That's why we don't use any abstraction in our native code, like typescript for example. However, we believe in clean, maintainable and reusable code, so all classes generated by WBR have been fed by descriptions using jsdoc. As we recommend Visual Studio Code as an editor for Winnetou, we advise you to download/enable the extension that supports jsdoc within VSCode for a better development experience.

jsconfig.json

Visual Studio Code needs further setting file in order to constructos objects can be imported in your code just-in-time. This file needs to be beside wbr.

        
{
  "compilerOptions": {
    "module": "es2020",
    "target": "es6",
    "checkJs": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}