> For the complete documentation index, see [llms.txt](https://assets-at-scale.gitbook.io/temple-suite/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://assets-at-scale.gitbook.io/temple-suite/master.md). # Getting started ## Initial Setup So for this you need yeoman. [yeoman](https://yeoman.io/) is web scaffolding tool for modern webtools. Please go to there website if you want to know more. Lets install yeoman globaly so its available in your terminal / command prompt as "yo" ``` npm install -G yo ``` {% hint style="success" %} yeoman has been installed globally {% endhint %} Now lets install the [richmedia generator](https://github.com/mediamonks/generator-richmedia-temple) globally so yeoman can use this generator to start scaffolding you richmedia unit, used for scaffolding all your initial projects. ``` npm install -G generator-richmedia-temple ``` {% hint style="success" %} richmedia-temple generator for yemoan has been installed globally {% endhint %} ## Lets get started Its advisable when creating a new richmedia unit to first scaffold the initial project. This will save you a lot of time and effort. Lets run the [richmedia-temple generator](https://github.com/mediamonks/generator-richmedia-temple). ``` yo richmedia-temple ``` {% hint style="success" %} Your now running the richmedia-temple generator. generator-richmedia-temple. {% endhint %} And follow the instructions, like you see below. You can use the arrow keys and enter key on your keyboard to make choices. ``` Welcome to Richmedia Temple Generator v1.4.1 - Create, change and start developing your richmedia units ? What do you want to do? (Use arrow keys) ❯ create a banner edit a banner ``` ``` I'm seeing you did not setup your project yet ? Your project name (yo-test) ``` ``` Creating banner ? Please fill in size of banner (300x250) ``` ``` ? Where do you want to put it? (./src/300x250/) ``` ``` ? Type of banner is this (Use arrow keys) doubleclick netflix ❯ plain ``` ## Building and Running. You now should see a few files in the directory that you executed the generator on. | Filename | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | .editorconfig | configuration file for you editor. So everyone atleasts uses the same basic settings. | | .gitignore | configuration file used by git so it knows which files to ignore. | | .prettierrc | A configuration file for prettier printer | | package.json | A configuration file for NPM / YARN, one of the most important files in your project. | | node\_modules | all the packages / libraries your project uses. | | src/300x250/.richmediarc | The configuration file for the richmedia-temple-server, This file is used so that the richmedia-temple-server knows what directories are richmedia units. | | src/300x250/script/main.js | Javascript File this is referenced by the .richmediarc file. | | src/300x250/script/Banner.js | The banner javascript code. | | src/300x250/index.html | Main html file, this file is referenced by the .richmediarc file. | To start developing you need to run a server a [webpack server.](https://www.webpack.com) Setting up a webpack server is a bit of a hassle thats why the generator and the richmedia-temple-server do this for you in conjuction with the .richmediarc file. ### Lets run a dev server. ``` npm run dev ``` Because you only have 1 project / richmediarc file. It wont ask you a few questions . ``` i Searching for configs ✔ Found 1 config(s) Choosing ./src/300x250/.richmediarc Webpack: Starting ... - i Server running. Please go to http://localhost:8001 } - Webpack: Starting ... ✔ Compile modules ✔ Build modules ✔ Optimize modules ✔ Emit files Webpack: Finished after 3.824 seconds. webpack built d82e4197c972364a3a09 in 3831ms ℹ ｢wdm｣: Hash: d82e4197c972364a3a09 Version: webpack 4.29.2 Time: 3831ms Built at: 02/11/2019 2:38:29 PM Asset Size Chunks Chunk Names ./main.js 346 KiB main [emitted] main index.html 527 bytes [emitted] style_v7h2ieE.css 320 bytes [emitted] Entrypoint main = ./main.js [0] multi whatwg-fetch ./src/300x250/script/main.js 40 bytes {main} [built] [./node_modules/@mediamonks/temple/Entity.js] 5.45 KiB {main} [built] [./node_modules/@mediamonks/temple/component/Component.js] 3.25 KiB {main} [built] [./node_modules/@mediamonks/temple/util/uuid.js] 150 bytes {main} [built] [./node_modules/core-js/modules/_an-object.js] 154 bytes {main} [built] [./node_modules/core-js/modules/_descriptors.js] 184 bytes {main} [built] [./node_modules/core-js/modules/_enum-keys.js] 469 bytes {main} [built] [./node_modules/core-js/modules/_export.js] 1.56 KiB {main} [built] [./node_modules/core-js/modules/_fails.js] 104 bytes {main} [built] [./node_modules/core-js/modules/es6.object.set-prototype-of.js] 160 bytes {main} [built] [./node_modules/core-js/modules/es6.reflect.get.js] 790 bytes {main} [built] [./node_modules/core-js/modules/es6.symbol.js] 8.64 KiB {main} [built] [./node_modules/core-js/modules/es7.symbol.async-iterator.js] 43 bytes {main} [built] [./node_modules/whatwg-fetch/fetch.js] 12.7 KiB {main} [built] [./src/300x250/script/main.js] 3.41 KiB {main} [built] + 78 hidden modules Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 28.2 KiB 0 style_v7h2ieE.css 320 bytes [emitted] Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/300x250/index.html] 551 bytes {0} [built] [./src/300x250/css/style.css] 63 bytes {0} [built] ℹ ｢wdm｣: Compiled successfully. ``` As soon as it says compile complete scroll up and you will see the link where you need to go. In this hypothetical example you need to go to "" ### Lets build a unit ``` npm run build ``` Because you only have 1 project / .richmediarc file. It will only ask you one question. Where to build the project. {% hint style="info" %} The building of this project is done with webpack. Webpack will reduce the size of js code, images, svg files etc. And will also as specified combine a lot of js files into one. {% endhint %} ``` ✔ One config found ./src/300x250/.richmediarc ? Please choose build location (./build) ``` i choose the build dir. ``` ? Please choose build location ./build Webpack: Starting ... ✔ Compile modules ✔ Build modules ✔ Optimize modules ✔ Emit files Webpack: Finished after 3.962 seconds. ``` {% hint style="info" %} Project has bee build. Now take a look in the build directory. {% endhint %} | Filename | Description | | ------------------ | ----------------------------------------------------------------------------- | | bundle.zip | all the files below in one zip. | | index.html | html file | | main.js | main javascript file. | | style\_v7h2ieE.css | css file, those weird chars in the file name is the hash of the file it self. |