How To Build A Blog In React Bootstrap Ruby

Sometimes, when a project is the right size and scope, it can make for a fun opportunity to try out a new framework on a stand-alone app.

We recently had such an opportunity while working on Triplebyte's new startup equity value calculator.

Screen Shot 2020-08-26 at 2.38.04 PM.png

The goal for the startup equity calculator was to create an engaging and educational experience, and offer supportive and informative content for users who may be considering an equity offer from a company. There were no significant technical integrations necessary with the core Triplebyte application (which is powered by Rails) – this app could stand alone.

Enter Next.js

This was the perfect opportunity to try out a new framework that should be perfect for a light-weight front-end functional app with heavy content – Next.js!

Those are some nice features 😍

What we like about Next.js

React, Node, Express, Webpack

Under the hood, Next is running on React, Node, Express, Webpack, Babel, and other React / JS tooling that has been growing in popularity over the past few years. Next.js is putting it all together with a lot of reasonable defaults that allow us to skip over a lot of boiler plate and get to working on the main app.

Server-side rendering

While not an exclusive goal of the project, we do want the page to be competitive from an SEO perspective. The page will be full of informative content, and it would be a poor decision on our part to disguise this content inside of a JavaScript bundle and decrease the search ranking of the page.

Some search engines (particularly Google) aim to fully parse the content of client-side JavaScript libraries, but they also admit that even Googlebot does not crawl client-side web content accurately – especially with regard to meta content, http status codes, and canonical urls rendered by the client. Here is Google discussing the issue in-depth.

Simple & fast deployment

Next.js is made by a company called Vercel, which is a hosting platform. And Next.js is technically called 'Next.js by Vercel'. In the Next.js documentation, it is recommended that you deploy with Vercel, but you can also deploy to a host like Heroku or AWS. The deployment process to Heroku (what we used) was particularly easy since Heroku runs the build and start commands by default, which is what Next.js provides on initial setup.

Screen Shot 2020-08-26 at 6.02.46 PM.png

Bootstrapping design with React Bootstrap

One potential drawback of building a standalone app is that it may not have access to commonly shared design components that are in the core application. Obvious examples would be the general site header and footer, as well as more complex design components like modals and forms.

To quickly get a large set of customizable frontend components, we used React Bootstrap. The library is lightweight, at only 34kb minified and g-zipped, and it provides a wide array of basic components like grids, forms, modals, tooltips, buttons, and navigation.

One common complaint about Bootstrap is that sites that use it look too 'bootstrappy'. Which is true – Bootstrap has a particular look if there are no modifications done the default styles. However, Bootstrap provides hundreds of SaSS variables that can customize the different elements of Bootstrap, and that gives excellent flexibility for different designs.

Here is Bootstrap 4's variable file, which is made to be overwritten with customized values.

Here is the basic variable overwrite implementation we used for the equity calculator:

Screen Shot 2020-08-26 at 9.06.20 PM.png

By customizing just these few variables – especially the primary and secondary color – we get a lot of useful buttons and font-color utilities for free.

Below is an example of how the React Bootstrap components look in React when put together. Nearly every component here is coming from React Bootstrap – Container, Col, Form, and InputGroup. The InputGroup in particular has custom designs applied to it, but since those are customizations that are done with Bootstrap variable settings, there is no need for custom styles applied directly to the React components.

Screen Shot 2020-08-26 at 9.10.18 PM.png

Overall, the component selection options from React Bootstrap are just about perfect. And by doing a bit of customization of primary colors and forms, it's easy to avoid the problem of looking 'bootstrappy'.

Solving the subdomain problem

External apps are often added to a primary domain via a subdomain: 'blog.example.com'.

A much more clean approach, however, is to add the external app as a subdirectory of the main site: 'example.com/blog'. This helps the app appear to be a part of the primary content of the site, with no obvious indication that the content is being served separately.

Nginx to the rescue

Thankfully, we can use the load balancer – nginx – and forward traffic that matches a certain URL pattern to a different host address. Heroku explains how to achieve this with nginx in this article.

This allows us to achieve a subdirectory URL, specifically: triplebyte.com/startup-equity-value-calculator!

After the great success we've had with the equity calculator app, we're excited to continue exploring different micro application implementations, so stay tuned for more!

For now, go try out the first version of our startup equity value calculator here!

‍

Growth engineer at Triplebyte since 2020. Previously a marketing and development consultant. Hack Reactor grad 2015, UCSB grad 2010. I write about a combination of marketing and engineering topics.