Getting started
First lets get started with something simple.
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
Its advisable when creating a new richmedia unit to first scaffold the initial project. This will save you a lot of time and effort.
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
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.
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"
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. |
Last modified 3yr ago