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