Contents
Here is a list of seven boilerplate that could help you build your SaaS faster. The Serverless SaaS boilerplate is the perfect starting point for your next React app.
You can tap into user authentication, payments with Stripe, teams, and more with zero effort. Going serverless is a great way of cutting costs because the pay-as-you-go pricing model means you can start free and only pay when your startup gets real traction.
With Serverless platforms you are outsourcing a lot of responsibilities which allows you to move quicker. That makes this starter kit great for solo developers and small teams who want to launch something quickly without spending money.
Jumpstart is a great starter kit for your next Ruby on Rails app. You can skip the boilerplate set up and build your Rails app faster.
It handles all the stuff you need like a user authentication system and even background processing. An amazing project to help you build your next great product with PHP.
It also has the features that every SaaS business needs, like (two-factor) authentication, subscription billing, and invoices. With Gravity, you can build a Node.js and React SaaS app at warp speed.
Saloon is a modern Ruby on Rails SaaS starter kit that also includes all the SaaS features like authentication and payments with Stripe, but also comes with a huge UI components library that is built with Tailwind, the rising CSS framework. If you are using Redux as a state management tool, using this boilerplate will save you a lot of time.
So far in this series, we have looked at the benefits of using a Boilerplate to streamline your workflow, and a two articles on how to set up a React Boilerplate with parcel instead of Webpack, and a traditional means to compile and bundle a traditional HTML/SCSS project using Parcel. Modifying these files allows you to configure the behavior of the associated program, and can be a never ending quest for some to get the “perfect” setup.
For instance, I never use the default Rails database SQLite, I always add the command line switch to use Postgres. I can start a new project: rails new cool_app and silently the PostgreSQL flag is added to the installation process.
I have stored my simple template file locally, and you can name as you like. Set up a better console printing with awesome_print Set up my preferred testing environment Bundle install Set up a static controller for the Home page Copy a few files Create the Postgres databases.
So, all I have to do, is change to the new project directory and start the Rails server. Matt Friction has put together a more full featured Rails template that is preloaded with the best practices for TDD, security, deployment, and developer productivity.
This template creates a Boilerplate app that includes user accounts, admin interface, and Bootstrap styling. Chris also has a commercial product called Jumpstart Pro that bootstraps a full featured e-commerce application setup.
We, I highly recommend going to the free service Kilobytes and try some templates out. Finally, there is a new feature coming to the rails new command to create a minimal application.
Clone the repo rename example. Env to .env replace all usages of your_app_name, YourAppName and YOUR_APP_NAME with you application name If you're using another flavor of Linux, adapt the command to work with the package manager available with your distribution.
Simply follow the instructions in the error message, if this occurs. Install NVM following instructions on the official repository.
From the root of the repository, run the yarn command to install all node modules. Feel free to alter these steps if you're familiar with setting up PostgreSQL.
The file contains documentation explaining where you should source its values from. If you've used the yarn command to install JS dependencies, then Reason ML code should already be compiled at this point.
Like Rails on the server side or “backend”, HTML5 Boilerplate provides structure and conventions for setting up HTML5, CSS3 styles, and JavaScript for front-end development. This article lists each component of HTML5 Boilerplate and identifies its usefulness for Rails applications.
The Railways project provides example applications that developers use as starter apps. Hundreds of developers use the apps, report problems as they arise, and propose solutions.
Paul Irish and Divya Marian launched HTML5 Boilerplate as a set of templates “collecting best practices and making an ideal project starting point.” On a first encounter, it seems HTML5 Boilerplate includes “everything but the kitchen sink.” Even finding a succinct list of components can be overwhelming.
There’s an excellent list of the HTML5 Boilerplate components in Jonathan Verrecchia’s Initialize Advanced Customization. This article provides commentary plus links to the relevant HTML5 Boilerplate documentation for each component.
The HTML5 Boilerplate index.html file shows how to structure a simple web page using HTML5 markup. Initialize provides a more complex index.html file that shows how to use the HTML5
It is helpful to refer to these index.html examples when you create an application layout file. Setting a viewport tells the browser how content should fit on the device’s screen.
The HTML5 Boilerplate index.html page provides an example that sets the viewport to the width of the device with an initial scale of 1. Most developers want to use Google Analytics tracking for their web apps.
Alternatively you can use one of several Ruby gems that automatically insert Google Analytics code into your pages with a helper or Rack middleware. You don’t need to copy what’s provided in HTML5 Boilerplate, but it offers a good reminder to add Google Analytics tracking.
By convention, a humans.txt file lists the people who contributed to building the website. It also can include a colophon (notes about tools or software used to create the website).
The HTML5 Boilerplate index.html page includes JavaScript that prompts users of Internet Explorer 6 (IE6) to install the Google Chrome Frame browser plug-in. If your website uses HTML5 features, and you wish to support users of Internet Explorer 6, you can add the JavaScript to your application layout files.
Web browser market share for Internet Explorer 6 is rapidly decreasing, so you may not wish to support IE6. HTML5 Boilerplate provides five icons that serve as favicons for Apple and Android mobile devices and tablets.
Android has a default icon, and some systems fall back to the favicon if it is available. The HTML5 Boilerplate index.html file shows how to add jQuery to a non- Rails web page.
For a Rails app, don’t modify your application layout to match the HTML5 Boilerplate example. HTML5 Boilerplate recommends loading jQuery from Google’s CDN (content delivery network).
If you do so, you’ll only save a single HTTP request (the first time a user visits the app). The assets pipeline produces a cached minified JavaScript file which is used for all subsequent requests.
For ultimate performance, you can consider using the CDN; for most projects, it’s probably not worth the extra code. As a Rails developer, you don’t have to add the X-UA-Compatible meta tag to your application layout files or set an HTTP header in your ApplicationController.
You can use these components if you are implementing CSS styles for your application and need to support Internet Explorer versions 6, 7, or 8 or features that are missing from certain web browsers. The HTML5 Boilerplate index.html page includes code that modifies the tag to add CSS classes for older versions of Internet Explorer.
For how it works, see Paul Irish’s Conditional stylesheets vs CSS hacks? If you are designing with CSS and accommodating specific versions of Internet Explorer, you’ll find IE conditional comments are useful.
If you need to test whether a browser has CSS transitions and transforms (for example), you can use Modernize. If you are relying solely on a CSS toolkit such as Twitter Bootstrap or Curb Foundation, you won’t need Modernize.
HTML5 Shiv is JavaScript code that tricks older versions of Internet Explorer into applying CSS styling for HTML5 elements such as the
As described by Eric Meyer, CSS Reset “smooths out many browser inconsistencies by explicitly assigning values to things like element margins and padding, forcing all elements to have the same font size, and so on. For a sample, see a web page that uses normalized CSS from the normalize.css project by Nicolas Gallagher and Jonathan Neal.
The HTML5 Boilerplate CSS. Style file incorporates CSS normalization from the normalize.css project and adds a few rules of its own. If you use another CSS toolkit such as Twitter Bootstrap or Curb Foundation, you won’t need the normalization from HTML5 Boilerplate.
You’ll want to design your Rails app to accommodate a variety of devices. The term responsive web design was coined by Ethan Marlette and refers to using fluid grids, flexible images, and CSS3 media queries to modify a web page to accommodate devices with differing screen sizes and resolutions such as a smartphone, tablets, and desktop computers.
You can use a CSS toolkit such as Skeleton or Curb Foundation to design sites that adapt to different browser page sizes. The HTML5 Boilerplate style.css file includes several CSS classes that are often needed by web designers.
The HTML5 Boilerplate project integrates the research and thought of a large community of front-end developers. In its downloadable form, HTML5 Boilerplate doesn’t fit easily into a typical Rails application.
However, HTML5 Boilerplate serves as a useful reference for Rails developers who want to provide structure and convention for the HTML, CSS, and JavaScript of an application’s front-end. Hopefully, with this guide, you can pick and choose the components that are useful for a Rails app.