- I installed the latest Ubuntu version (14.10) as a VMware guest which would allow me to easily save my work in different stages using snapshots and revert if anything weird happened along the way.
- Once Ubuntu was installed, install git:
sudo apt-get install git
- According to the node.js page from the above link, the latest Ubuntu version has the required software repositories enabled so you can install directly using:
sudo apt-get install nodejs nodejs-dev npmI learned that this does not install "node", however, "nodejs" is installed and works with the hello_world.js example given on the node.js page above. Later on you will see that we'll need "node" after all.
- Install bower:
sudo npm install -g bower
- Install gulp:
sudo npm install -g gulpThis failed due to "node" not being installed. The fix is to get "node" by installing nodejs-legacy first:
sudo apt-get install nodejs-legacyYou can then install gulp per above.
- Next I created a work directory and cloned the code using git:
git clone https://github.com/Rise-Vision/widget-google-calendar.git
For the next step, "npm install" fails, so you need sudo:
sudo npm install
- Run bower:
- Build the widget:
- Now that you have the environment set up and the widget built as distributed, you can change the layout by modifying the css file in the src/widget/widget.css file.
In my case, I wanted to indent the "location" field for each event so I added the following:
- Build the "dist" folder again by navigating to the folder where you cloned the widget to and then:
- Upload the "dist" folder to your hosting provider and follow the remaining instructions here to add the customized widget.