assets-at-scale
Search…
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"
1
npm install -G yo
Copied!
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.
1
npm install -G generator-richmedia-temple
Copied!
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.
1
yo richmedia-temple
Copied!
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.
1
Welcome to Richmedia Temple Generator v1.4.1
2
-
3
Create, change and start developing your richmedia units
4
5
? What do you want to do? (Use arrow keys)
6
❯ create a banner
7
edit a banner
Copied!
1
I'm seeing you did not setup your project yet
2
? Your project name (yo-test)
Copied!
1
Creating banner
2
? Please fill in size of banner (300x250)
Copied!
1
? Where do you want to put it? (./src/300x250/)
Copied!
1
? Type of banner is this (Use arrow keys)
2
doubleclick
3
netflix
4
❯ plain
Copied!
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.
1
npm run dev
Copied!
Because you only have 1 project / richmediarc file. It wont ask you a few questions .
1
i Searching for configs
2
✔ Found 1 config(s)
3
Choosing ./src/300x250/.richmediarc
4
Webpack: Starting ...
5
-
6
i Server running. Please go to http://localhost:8001 }
7
-
8
Webpack: Starting ...
9
10
✔ Compile modules
11
✔ Build modules
12
✔ Optimize modules
13
✔ Emit files
14
15
Webpack: Finished after 3.824 seconds.
16
17
webpack built d82e4197c972364a3a09 in 3831ms
18
ℹ ｢wdm｣: Hash: d82e4197c972364a3a09
19
Version: webpack 4.29.2
20
Time: 3831ms
21
Built at: 02/11/2019 2:38:29 PM
22
Asset Size Chunks Chunk Names
23
./main.js 346 KiB main [emitted] main
24
index.html 527 bytes [emitted]
25
style_v7h2ieE.css 320 bytes [emitted]
26
Entrypoint main = ./main.js
27
[0] multi whatwg-fetch ./src/300x250/script/main.js 40 bytes {main} [built]
28
[./node_modules/@mediamonks/temple/Entity.js] 5.45 KiB {main} [built]
29
[./node_modules/@mediamonks/temple/component/Component.js] 3.25 KiB {main} [built]
30
[./node_modules/@mediamonks/temple/util/uuid.js] 150 bytes {main} [built]
31
[./node_modules/core-js/modules/_an-object.js] 154 bytes {main} [built]
32
[./node_modules/core-js/modules/_descriptors.js] 184 bytes {main} [built]
33
[./node_modules/core-js/modules/_enum-keys.js] 469 bytes {main} [built]
34
[./node_modules/core-js/modules/_export.js] 1.56 KiB {main} [built]
35
[./node_modules/core-js/modules/_fails.js] 104 bytes {main} [built]
36
[./node_modules/core-js/modules/es6.object.set-prototype-of.js] 160 bytes {main} [built]
37
[./node_modules/core-js/modules/es6.reflect.get.js] 790 bytes {main} [built]
38
[./node_modules/core-js/modules/es6.symbol.js] 8.64 KiB {main} [built]
39
[./node_modules/core-js/modules/es7.symbol.async-iterator.js] 43 bytes {main} [built]
40
[./node_modules/whatwg-fetch/fetch.js] 12.7 KiB {main} [built]
41
[./src/300x250/script/main.js] 3.41 KiB {main} [built]
42
+ 78 hidden modules
43
Child html-webpack-plugin for "index.html":
44
Asset Size Chunks Chunk Names
45
index.html 28.2 KiB 0
46
style_v7h2ieE.css 320 bytes [emitted]
47
Entrypoint undefined = index.html
48
[./node_modules/html-webpack-plugin/lib/loader.js!./src/300x250/index.html] 551 bytes {0} [built]
49
[./src/300x250/css/style.css] 63 bytes {0} [built]
50
ℹ ｢wdm｣: Compiled successfully.
Copied!
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
1
npm run build
Copied!
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.
1
✔ One config found ./src/300x250/.richmediarc
2
? Please choose build location (./build)
Copied!
i choose the build dir.
1
? Please choose build location ./build
2
Webpack: Starting ...
3
4
✔ Compile modules
5
✔ Build modules
6
✔ Optimize modules
7
✔ Emit files
8
9
Webpack: Finished after 3.962 seconds.
Copied!
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