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.

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.

Last updated