Sign in

Full Stack Developer

Official Rails gem for bundling JavaScript assets with Webpack

With the ever-changing JavaScript world, one important thing that has been lacking in Rails was support for proper bundling system for JavaScript assets, but from Rails 5.1 this is going to change with the introduction of new gem.

Rails 5.1 ships with webpack and yarn via the –webpack option and out of the box integration with React, Angular, vue, elm and more coming soon.

Prerequisites

Setup

Before starting out make sure ruby, node and yarn is installed on your machine. …


A few weeks ago github released it’s GraphQL powered and with that a for composing and executing GraphQL queries using ruby.

The example available on github repo is a and so the writer thought for learning internals it would be good idea to experiment it with other ruby frameworks like Sinatra.

In this post we will use the GraphQL server we have built over a and a brand new Sinatra app together with the released to query the api server instead of using relay.

So, why use this library instead…


Almost all user-driven web applications requires a user authentication feature for, Logging in and out, Registration, Resetting password, and whatnot.

Fortunately, to achieve this in Rails we have so many gems available, but they are all very, full-featured. What if we just need the login feature, without registration etc?.

Now, some popular libraries like has a built-in modular structure where you can exclude and include authentication modules, but even so, it wouldn’t be wise to add a huge library just to use it for one particular feature. …


Webpack config file splitting

One problem with Webpack is that the config file quickly gets huge and complicated in no time for a real app. So, lets split our previous file into separate smaller modules:

Package.json

We need a new module to require a directory as a module

Webpack.config.js

Require modules from ./webpack.config

That’s all in our main webpack config file, and now lets create a new webpack.config/ folder inside our project folder and place relevant configs in separate files. For ex: entry, output, plugins and so on…

webpack.config/*.js

Define main config object and export it
Define the entry point for webpack
Output bundle directory and filename
Plugins initialization
Module whitelisting
General settings — sourcemaps, base directory etc.

That’s all ! Setup files are smaller, simpler and readable.

Now, lets run the setup:

npm install
npm run start
open main.html in your browser

All works!

P.S. The code is available on


Sourcemaps, minification, Remove code duplication

Lets update the Webpack config from our old :

Weback config

That’s all ! Now, lets run the setup:

npm install
npm run start
open main.html in your browser

Checkout the output bundle.js in the browser or editor. Voila! now you have the minified code and sourcemaps.

P.S. The code is available on


Most basic setup

Introduction: A series of mini posts that explores — famous JS module loader and bundler, from scratch. The idea is to start from very basic Webpack setup to more advanced and complex setup.

Pre-requisites: Javascript, NodeJS and some Javascript libraries

In a directory, create following files:

Package.json

Add a package.json

Webpack.config.js

The basic webpack.js

Main.html

Basic HTML page with counter, alert and included bundle.js from webpack

Main.js

Basic javascript code

That’s all ! Now, lets run the setup:

npm install
npm run start
open main.html in your browser

All works!

P.S. The code is available on


As most of you may have heard about GraphQL, it’s a new query language layer for fetching application data regardless of data model or application layer. It’s platform agnostic and conforms to an uniform API through something called ‘’, which makes it pretty transparent and easy to learn.

After writing a on building GraphQL powered application on Rails, I wanted to experiment building GraphQL servers in other popular web frameworks to explore other web frameworks. So, I did :)

The repo is available on for you to clone away and experiment yourself. …


This is a last wrap up post for this Relay on Rails series. If you haven’t checked it out, so far we have covered , on top of Rails, for react components, dynamic client-side react and with Relay.

The updated blog repo and demo with latest Relay, React and Ruby GraphQL gems is available here: and here:

The latest new feature updated was to add a post mutation, which allows a user to submit a new post and delete a post. All new changes are available on demo website so, check it out :)

We will update the repo every once in a while, but it’s not priority thing so feel free to open a pull request in case you want to add or fix anything.

Ciao!


In this short post, we are going to look at Webpack and how we can integrate it with our current blog application for React and Relay powered frontend development on Rails.

So far, we have used with Rails asset pipeline to manage frontend dependencies, however after working with this setup for a while and facing multiple issues with integration, it seems this is not ideal setup for application that requires modern frontend tooling and fast development. We therefore are going to move away from browserify and sprockets and instead use a powerful modern module bundler . …


So far, we have covered , on top of Rails, for react components and dynamic client-side react with Relay.

In this post, we are going to cover a important requirement of any web application i.e. user authentication. Next, we will look into Relay mutations to allow our users to comment and vote on a post or comment.

Note: You can clone this branch to follow along, it has completed code for this post. You can also refer to previous posts if you are new to this series.

cd /to-your-work-directory
git…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store