Creating a new project

What you will learn#

First of all, you will create your Dana application locally on your computer. Follow the next steps to create a basic project and launch it on your browser.

Prepare your environment#

To create the application, you need to check that you are matching environment requirement from Getting Started. Then you can create the application made specifically for this training by running in your terminal :

gh repo clone wiztivi-framework/application-template

npx create-dana-app my-app --tutorial

Once completed, you can open the project in your favorite IDE. You need to be inside your folder application to execute the following command line. So either open a terminal from your IDE, or stay in your terminal but move inside the newly created folder. Dependencies have already been installed, so you can directly try to serve the application by running :

npm start

🎉 Tadaaaa ! Your application should be accessible in the browser, just here.

Main files and directories#

Now you have a fully operational environment, just take a time to have a look at folders and files architecture.

./images/**#

Simple, that’s where you can store the locale images that will be used in your application. Do not hesitate to create folder to order them.

./i18n/**#

This is the place where you can store translations. LocaleStringEnUS.json is the file we are going to use when dealing with texts.

./scripts/**#

Dana is a JavaScript framework. This folder is where we are going to spend most of the time during this tutorial. This is where you will find scripts of your application. Some other folders can contain scripts also but those will be introduced in the right time during the tutorial.

./tests/**#

Here you will find unit and functional tests files and configuration. Dana is coming with its environment to test

./package.json#

This file is comming from classical npm configured project. You will find in particular in this file :

• devDependencies where you can find Dana’s module dependencies
• scripts where you can find command that you will be able to launch by using npm (in particular linter and test)

./app.config.json#

Introducing the principle of profiles, this files will contain the configuration of your application for different devices.

In this file you can declare as many profiles as you want to fullfilled your needs. You will need at least to have one profile by device configuration (browser, Android, TVOS…) but you can also create more to create multiple configuration of the same build (development versus prod…). It is recommended to split your profiles into multiple app.config.***.json. By default, you can see that in the app.config.json, there is the follonwing code :

"includes": [
    "profiles/app.config.browser-css.json"
]

This allows to import those split profiles.

See Dana in action#

Let’s look at what the script npm start is actually doing :

"start" : "grunt serve --profile=template-css"

Yes, that’s it ! The command is passing the profile to the serve command of grunt. That is how you will be able to choose profiles.

Let’s change the used profile by template-lightning:

"start" : "grunt serve --profile=template-lightning"

In your terminal, stop previous npm start, relaunch it and refresh your page.

And what ? Nothing has changed…

Visually, there is no changes, that is Dana magical powers. But if you open the inspector of your browser you can observe that first profile is using HTML / CSS whereas second one is using only a canvas !

TODO Add screenshots

For the following lessons you can use one profile or the other one, test the differences between both…

Summary#

To summarize, during this lesson you have :

• created your first application and launched it in a browser,
• discover files and folder global architecture,
• observed the power of Dana renderer abstraction by switching between two profiles.

To go further on those concepts, you can browse the following documentation pages :