Getting started

First lets get started with something simple.

Initial Setup

So for this you need yeoman. yeoman 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

yeoman has been installed globally

Now lets install the richmedia generator 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

richmedia-temple generator for yemoan has been installed globally

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.

yo richmedia-temple

Your now running the richmedia-temple generator. generator-richmedia-temple.

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. 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 "http://localhost:8001"

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.

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.

✔ 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.

Project has bee build. Now take a look in the build directory.

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.