Source Code of blog Making a JS widget: a full-stack approach
Clone or download
Latest commit 14ef5c8 Aug 22, 2016

README.md

javascript-plugin

This is the source code example for the blog Making a JS widget: a full-stack approach

Content

This repo contains a Ruby on Rails 5.0 project with all the code related to the blog above.

Javasciprt plugin sources

The plugin source code. Which is composed of two files:

  • An ERB template that is used to generate the javascript code widget.js.erb
  • Another ERB template that is used to generate the CSS code _widget.css.erb

And you can see an example web page that shows how the plugin is loaded here: index.html.

Rails backend

A rails backend that serves the plugin javascript and a simple endpoint which is called from the plugin simulating the service provided to the client web pages.

Additionally, the backend uses rack-cors to allow cross domain calls. This is needed in order to allow a client web page call our service from the plugin javascript.

A security layer was added by using rack-attack

Usage

Requirements

  • Ruby 2.2+
  • Rails 5.0+

Running the server

First, ensure you have installed all the requirements listed in the previous section. Then, run the following commands

cd <project-root-path>
bundle install
rails -s bind 0.0.0.0

After that, you can see the plugin test page in http://localhost:3000/:

widget-test-page