rails new

Starting Fresh

Starting another app.. Going to document it this go ‘round…

Gems, Gems, Gems

Every app needs gems!

Rails

Install Rails 6 using Ruby 2.6.3

Webpacker

Rails 6, you magnificent beast, you include webpacker by default so I don’t have to scramble around messing with configuration files and yarn/npm fighting each other over the same package.json file.

Anyway, Install react… bundle exec rails webpacker:install:react

Make sure config/webpack.yml includes the .jsx extension in the extension part.

Statics!

Generate that StaticPages Controller!

rails g controller staticpages

Create the index.erb file and route to it with routes root 'staticpages#index…

After the static is configured, make sure react is working by adding the hello_react.jsx file to the folder.

<% javascript_pack_tag 'hello_react' %>

This renders us a nice:

<html><head>
    <title>Manejar</title>
    <meta name="csrf-param" content="authenticity_token">
    <link rel="stylesheet" media="all" href="/assets/staticpages.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload">
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload">
    <script src="/packs/js/application-3acb997025b834ebf50d.js"></script>
  </head>
  <body>
<script src="/packs/js/hello_react-42395605e5ecf8fc13c0.js"></script>

<div><div>Hello React!</div></div></body></html>

Making Statics Pretty!

Actually when configuring statics to look pretty, just ensure React isn’t writing its own nodes to the DOM…

While in the process of fixing something that wasn’t broken, I also decided to rename app/javascript to app/webpack and made this change in my webpacker.yml file at the top to:

# From:
  source_path: app/javascript

# To:
  source_path: app/webpack

Trading <% javascript_pack_tag ‘hello_react’%> in straight up for the van

I really couldn’t tell you the differences between JS’s ES5 and ES6, but I prefer my hello_world.jsx to be in a Class layout like the following:

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import "core-js"


export default class Hello extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: this.props.name,
    }
  }
  render(){
    return(
      <React.Fragment>
        <div>
          Hello {this.state.name}
        </div>
      </React.Fragment>
    )
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('HelloWorld')
  const data = JSON.parse(node.getAttribute('data'))

  ReactDOM.render(
    <Hello name="React" />,
    node.appendChild(document.createElement('div')),
    )
})

Then in my staticpages#index we can finally test this layout:

<div class="container">
<div class="row">
<div class="offset-sm-4">
        <!-- BEGIN HELLOWORLD PACK -->
        <%= content_tag :div, id:"HelloWorld", data: {'test':'test'} do %>
        <% end %>
        <%= javascript_pack_tag 'hello_react' %>
        <!-- END HELLOWORLD PACK -->
</div>
</div>
</div>

This gives us a nice dummy template for creating front end pages.. I can now work from here.

Let Me Add a Little SQL to that

Users, we need Users and User Managment!

Enter Devise

Pretty much every app I create has users. It’s a guarantee I will be adding devise to the base project.

I always enable confirmable for users and administrators, and I disable registrations for admins and I also add trackable to admins.. I am considering enabling trackable for users as well.

Mailer

I use mailgun (Mailgun Gem and Configuration) as my mail provider for apps and letter opener for local development.

Dockerfile && docker-compose.yml

Added a Dockerfile and a docker-compose.yml file. Both seem to work just fine for the current setup.

Environment is set to essentially treat development and production the same. This is because the schema (./db/schema.rb) is agnostic.

Basically when I am developing on my local machine, I spin up a local database with docker-compose up db and then I connect to the docker database over the local network all on my local computer..

Environment

I set the environment with the dotenv gem, and a {.env, .env.development} files.

What is super convienent is that docker also uses the .env file so everything can be configured within one file! Very nice!

Rails Rename

Well this was just the starting point.. I think you’re going to want to rename this to something other than “RailsTemplate”..

rails g rename:into project

Keys

You will need to generate some new keys for that application you just pulled down.. EDITOR=vim rails credentials:edit --environment production or whatever environment you chose to use. I always generate production credentials and development credentials.

Setting the new upstream!

Please don’t be a moron and hack on this and then push it back up to the template master branch! Change the origin for the repo!

# List current remotes
git remote -v

# Change the remote
$ git remote set-url origin git@github.com:USERNAME/REPOSITORY.git

Database

Ran into a few issues with the docker database and some password settings, but managed to change a volume and resolve the issue pretty quickly. I didn’t bother to dig into the issue too much, but I believe the problem was that I was using the same db volume in this skeleton repo as I was for a production repo where the root password is set to something different…

I may come back to this to explore the issue more, but right now I want to figure out everything else.

Jack Moore

Email: jack(at)jmoore53.com