next_on_rails 0.1.1

data/lib/generators/nor/backend/templates/Procfile

@@ -0,0 +1,2 @@
+backend: bundle exec rails s -p 3000
+frontend: sh -c 'cd ./frontend && yarn run dev'

data/lib/generators/nor/backend/templates/application_controller.rb

@@ -0,0 +1,2 @@
+class ApplicationController < NextOnRails::ApplicationController
+end

data/lib/generators/nor/backend/templates/cors.rb

@@ -0,0 +1,23 @@
+# Be sure to restart your server when you modify this file.
+
+# Avoid CORS issues when API is called from the frontend app.
+# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.
+
+# Read more: https://github.com/cyu/rack-cors
+
+Rails.application.config.middleware.insert_before 0, Rack::Cors do
+  allow do
+    origins 'localhost:3001'
+
+    resource '*',
+      headers: :any,
+      methods: [:get, :post, :put, :patch, :delete, :options, :head],
+      expose: [
+        DeviseTokenAuth.headers_names[:'access-token'],
+        DeviseTokenAuth.headers_names[:client],
+        DeviseTokenAuth.headers_names[:expiry],
+        DeviseTokenAuth.headers_names[:uid],
+        DeviseTokenAuth.headers_names[:'token-type']
+      ]
+  end
+end

data/lib/generators/nor/backend/templates/current_user_serializer.rb.tt

@@ -0,0 +1,8 @@
+class Current<%= user_class %>Serializer < <%= user_class %>Serializer
+  attributes :email
+  meta do |current_<%= user_class.underscore %>|
+    {
+      last_sign_in_at: current_<%= user_class.underscore %>.last_sign_in_at
+    }
+  end
+end

data/lib/generators/nor/backend/templates/user.rb.tt

@@ -0,0 +1,8 @@
+class <%= user_class %> < ApplicationRecord
+  # Include default devise modules. Others available are:
+  # :timeoutable
+  devise :database_authenticatable, :registerable,
+    :recoverable, :rememberable, :trackable, :validatable,
+    :confirmable, :lockable, :omniauthable
+  include DeviseTokenAuth::Concerns::<%= user_class %>
+end

data/lib/generators/nor/backend/templates/user_migration.rb.tt

@@ -0,0 +1,53 @@
+class DeviseTokenAuthCreateUsers < ActiveRecord::Migration[5.2]
+  def change
+    create_table(:<%= user_class.constantize.table_name %>) do |t|
+      ## User Info
+      t.string :email
+
+      ## Required
+      t.string :provider, null: false, default: 'email'
+      t.string :uid, null: false, default: ''
+
+      ## Database authenticatable
+      t.string :encrypted_password, null: false, default: ''
+
+      ## Recoverable
+      t.string   :reset_password_token
+      t.datetime :reset_password_sent_at
+      t.boolean  :allow_password_change, default: false
+
+      ## Rememberable
+      t.datetime :remember_created_at
+
+      ## Trackable
+      t.integer  :sign_in_count, default: 0, null: false
+      t.datetime :current_sign_in_at
+      t.datetime :last_sign_in_at
+      t.string   :current_sign_in_ip
+      t.string   :last_sign_in_ip
+
+      ## Confirmable
+      t.string   :confirmation_token
+      t.datetime :confirmed_at
+      t.datetime :confirmation_sent_at
+      t.string   :unconfirmed_email # Only if using reconfirmable
+
+      ## Lockable
+      t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
+      t.string   :unlock_token # Only if unlock strategy is :email or :both
+      t.datetime :locked_at
+
+      ## Tokens
+      t.text :tokens
+
+      t.timestamps
+    end
+
+    add_index :users, :email,                unique: true
+    add_index :users, :uid,                  unique: true
+    add_index :users, [:uid, :provider],     unique: true
+    add_index :users, :reset_password_token, unique: true
+    add_index :users, :confirmation_token,   unique: true
+    add_index :users, :unlock_token,         unique: true
+  end
+end

data/lib/generators/nor/backend/templates/user_serializer.rb.tt

@@ -0,0 +1,11 @@
+class <%= user_class %>Serializer
+  include FastJsonapi::ObjectSerializer
+
+  set_type :<%= user_class.underscore %>
+  set_id :id
+  attributes :email
+
+  # link :<%= user_class.underscore %>_url do |<%= user_class.underscore %>|
+  #   Rails.application.routes.url_helpers.<%= user_class.underscore %>_url(<%= user_class.underscore %>, host: 'http://localhost:3000')
+  # end
+end

data/lib/generators/nor/frontend/frontend_generator.rb

@@ -0,0 +1,60 @@
+module Nor
+  class FrontendGenerator < Rails::Generators::Base
+    attr_reader :frontend_path
+    source_root File.expand_path('templates', __dir__)
+
+    def initialize(args, *options)
+      super
+      @frontend_path = File.join(destination_root, 'frontend')
+    end
+
+    def create_next_app
+      if revoke? && frontend_exist?
+        say_status :remove, relative_to_original_destination_root(frontend_path)
+        FileUtils.remove_dir(frontend_path, force: true)
+      elsif frontend_exist?
+        say_status('skipped', 'Create Next app: directory frontend already exist!')
+      else
+        run 'yarn create next-app frontend'
+        inside frontend_path do
+          gsub_file 'package.json', 'create-next-example-app', 'next-on-rails-frontend'
+          gsub_file 'package.json', '"dev": "next dev"', '"dev": "node server.js"'
+          if `which json`.present?
+            run "json -I -f package.json -e 'this.license=\"MIT\"'"
+            run "json -I -f package.json -e 'this.private=true'"
+            run "json -I -f package.json -e 'this.version=\"0.1.0\"'"
+          end
+          remove_file 'components/head.js'
+          remove_file 'components/nav.js'
+          remove_file 'pages/index.js'
+          remove_file 'next.config.js'
+        end
+      end
+    end
+
+    def install_dependencies
+      return if revoke?
+
+      inside frontend_path do
+        run 'yarn add next-compose-plugins @zeit/next-sass node-sass bootstrap compression express inflection lodash nookies nprogress next-on-rails next@8.1.0 react@16.8.6 react-dom@16.8.6'
+        run 'yarn add --dev babel-eslint eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard prettier sass-lint'
+      end
+    end
+
+    def install_templates
+      return if revoke?
+
+      directory 'frontend'
+    end
+
+    protected
+
+      def frontend_exist?
+        File.exist?(frontend_path)
+      end
+
+      def revoke?
+        behavior == :revoke
+      end
+  end
+end

data/lib/generators/nor/frontend/templates/frontend/components/flash.js

@@ -0,0 +1,29 @@
+import { useFlash } from 'next-on-rails/utils'
+
+const Flash = () => {
+  const { flash } = useFlash()
+  if (flash) {
+    return Object.entries(flash)
+      .filter(([key, value]) => value && value !== '')
+      .map(([key, value]) => (
+        <div key={key} className={`alert alert-${alertClass(key)}`}>
+          {value}
+        </div>
+      ))
+  } else {
+    return null
+  }
+}
+
+const alertClass = flashType => {
+  switch (flashType) {
+    case 'notice':
+      return 'success'
+    case 'alert':
+      return 'danger'
+    default:
+      return 'info'
+  }
+}
+
+export default Flash

data/lib/generators/nor/frontend/templates/frontend/components/inputs.js

@@ -0,0 +1,69 @@
+import { dasherize, titleize } from 'inflection'
+
+const Input = ({ name, value, label, error }) => {
+  const id = `input-${dasherize(name).toLowerCase()}`
+  const className = `form-control ${error ? 'is-invalid' : null}`
+  if (label === undefined) label = titleize(name)
+  return (
+    <div className="form-group">
+      {label ? <label htmlFor={id}>{label}</label> : null}
+      <input type="text" id={id} className={className} name={name} defaultValue={value} />
+      {error ? <div className="invalid-feedback">{error}</div> : null}
+    </div>
+  )
+}
+
+const TextArea = ({ name, value, label, error }) => {
+  const id = `input-${dasherize(name).toLowerCase()}`
+  const className = `form-control ${error ? 'is-invalid' : null}`
+  if (label === undefined) label = titleize(name)
+  return (
+    <div className="form-group">
+      {label ? <label htmlFor={id}>{label}</label> : null}
+      <textarea id={id} className={className} name={name} defaultValue={value}></textarea>
+      {error ? <div className="invalid-feedback">{error}</div> : null}
+    </div>
+  )
+}
+
+const CheckBox = ({ name, value, label, error }) => {
+  const id = `input-${dasherize(name).toLowerCase()}`
+  const className = `form-check-input ${error ? 'is-invalid' : null}`
+  if (label === undefined) label = titleize(name)
+  return (
+    <div className="form-group form-check">
+      <input type="hidden" name={name} defaultValue={false} />
+      <input type="checkbox" id={id} className={className} name={name} defaultChecked={value} />
+      {error ? <div className="invalid-feedback">{error}</div> : null}
+      {label ? (
+        <label htmlFor={id} className="form-post-label">
+          {label}
+        </label>
+      ) : null}
+    </div>
+  )
+}
+
+const Select = ({ name, value, label, error, collection, selectPlaceholder = 'Select one...' }) => {
+  const id = `input-${dasherize(name).toLowerCase()}`
+  const className = `form-control ${error ? 'is-invalid' : null}`
+  if (label === undefined) label = titleize(name)
+  return (
+    <div className="form-group">
+      {label ? <label htmlFor={id}>{label}</label> : null}
+      <select id={id} className={className} name={name} defaultValue={value}>
+        {selectPlaceholder ? <option>{selectPlaceholder}</option> : null}
+        {collection.map(([value, display]) => (
+          <option key={value} value={value}>
+            {display}
+          </option>
+        ))}
+      </select>
+      {error ? <div className="invalid-feedback">{error}</div> : null}
+    </div>
+  )
+}
+
+const HiddenIdField = ({ id }) => (id ? <input type="hidden" name="id" defaultValue={id} /> : null)
+
+export { Input, TextArea, CheckBox, Select, HiddenIdField }

data/lib/generators/nor/frontend/templates/frontend/components/login-form.js

@@ -0,0 +1,23 @@
+import { useLoginForm } from 'next-on-rails/devise'
+
+const LoginForm = ({ successCallback, errorCallback }) => {
+  const login = useLoginForm(successCallback, errorCallback)
+
+  return (
+    <form onSubmit={login}>
+      <div className="form-group">
+        <label htmlFor="form-login-email">Email</label>
+        <input id="form-login-email" type="text" name="email" className="form-control" />
+      </div>
+      <div className="form-group">
+        <label htmlFor="form-login-password">Password</label>
+        <input id="form-login-password" type="password" name="password" className="form-control" />
+      </div>
+      <button type="submit" className="btn btn-primary">
+        Login
+      </button>
+    </form>
+  )
+}
+
+export default LoginForm

data/lib/generators/nor/frontend/templates/frontend/components/registration-form.js

@@ -0,0 +1,49 @@
+import { useRegistrationForm } from 'next-on-rails/devise'
+
+const RegistrationForm = ({ successCallback, errorCallback }) => {
+  const [register, getError] = useRegistrationForm(successCallback, errorCallback)
+
+  return (
+    <form onSubmit={register}>
+      <div className="form-group">
+        <label htmlFor="form-registration-email">Email</label>
+        <input
+          id="form-registration-email"
+          type="text"
+          name="email"
+          className={`form-control ${getError('email') ? 'is-invalid' : null}`}
+        />
+        {getError('email') ? <div className="invalid-feedback">{getError('email')}</div> : null}
+      </div>
+      <div className="form-group">
+        <label htmlFor="form-registration-password">Password</label>
+        <input
+          id="form-registration-password"
+          type="password"
+          name="password"
+          className={`form-control ${getError('password') ? 'is-invalid' : null}`}
+          defaultValue="qwerty"
+        />
+        {getError('password') ? <div className="invalid-feedback">{getError('password')}</div> : null}
+      </div>
+      <div className="form-group">
+        <label htmlFor="form-registration-password-confirmation">Confirm Password</label>
+        <input
+          id="form-registration-password-confirmation"
+          type="password"
+          name="password_confirmation"
+          className={`form-control ${getError('password') ? 'is-invalid' : null}`}
+          defaultValue="qwerty"
+        />
+        {getError('password_confirmation') ? (
+          <div className="invalid-feedback">{getError('password_confirmation')}</div>
+        ) : null}
+      </div>
+      <button type="submit" className="btn btn-primary">
+        Register
+      </button>
+    </form>
+  )
+}
+
+export default RegistrationForm

data/lib/generators/nor/frontend/templates/frontend/next-on-rails.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  baseURL: 'http://localhost:3000'
+}

data/lib/generators/nor/frontend/templates/frontend/next.config.js

@@ -0,0 +1,20 @@
+const withPlugins = require('next-compose-plugins')
+const withSass = require('@zeit/next-sass')
+// const optimizedImages = require('next-optimized-images')
+
+module.exports = withPlugins(
+  [
+    [withSass, {}]
+    // [optimizedImages, {}],
+    // [exportPathMap, {
+    //   '/': { page: '/' }
+    // }]
+  ],
+  {
+    webpack: config => {
+      // Fixes npm packages that depend on `fs` module
+      config.node = { fs: 'empty' }
+      return config
+    }
+  }
+)

data/lib/generators/nor/frontend/templates/frontend/pages/_app.js

@@ -0,0 +1,3 @@
+import '../stylesheets/application.scss'
+import App from 'next-on-rails/app'
+export default App

data/lib/generators/nor/frontend/templates/frontend/pages/index.js

@@ -0,0 +1,57 @@
+import { useCurrentUser } from 'next-on-rails/current-user'
+import { useLogout } from 'next-on-rails/devise'
+import { getDetailFromResponseError, useFlash } from 'next-on-rails/utils'
+
+import Flash from '../components/flash'
+import LoginForm from '../components/login-form'
+import RegistrationForm from '../components/registration-form'
+
+const Home = props => {
+  const { setFlash } = useFlash()
+  const logout = useLogout()
+  const { currentUser } = useCurrentUser()
+
+  const loginSuccessCallback = response => {
+    setFlash({ notice: `Welcome ${response.data.email}!` })
+  }
+
+  const loginErrorCallback = error => {
+    setFlash({ alert: getDetailFromResponseError(error) })
+  }
+
+  const registrationSuccessCallback = response => {
+    setFlash({
+      notice: `Welcome ${response.data.email}! An email to confirm your account has been sent to this email address.`
+    })
+  }
+
+  return (
+    <div className="container pt-4">
+      <Flash />
+      <h1>Welcome to Next On Rails!</h1>
+
+      <img src="https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif" alt="Magic" />
+
+      <p>{currentUser ? `Hi, ${currentUser.email}` : 'You are not logged'}</p>
+
+      {currentUser ? (
+        <button className="btn btn-primary" onClick={logout}>
+          Logout
+        </button>
+      ) : (
+        <div className="row">
+          <div className="col">
+            <h6>Login</h6>
+            <LoginForm successCallback={loginSuccessCallback} errorCallback={loginErrorCallback} />
+          </div>
+          <div className="col">
+            <h6>Register</h6>
+            <RegistrationForm successCallback={registrationSuccessCallback} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Home

data/lib/generators/nor/frontend/templates/frontend/server.js

@@ -0,0 +1,31 @@
+const express = require('express')
+const next = require('next')
+const compression = require('compression')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app
+  .prepare()
+  .then(() => {
+    const server = express()
+    server.use(compression())
+
+    // server.get('/post/:id', (req, res) => {
+    //   app.render(req, res, '/post', { id: req.params.id })
+    // })
+
+    server.get('*', (req, res) => {
+      return handle(req, res)
+    })
+
+    server.listen(3001, err => {
+      if (err) throw err
+      console.log('> Ready on http://localhost:3001')
+    })
+  })
+  .catch(ex => {
+    console.error(ex.stack)
+    process.exit(1)
+  })