- Create a new Rails app:
$ rails new my_app
- add
--api
flag to create an API-only application
$ rails new my_app
--api
flag to create an API-only applicationSSL setup: https://vimeo.com/209534466
rails g migration CreateJoinTableGameInvitesInvitees game_invites invitees
has_and_belongs_to_many :invitees, class_name: 'User', foreign_key: 'invitee_id', #the associated column and the alien model
join_table: 'game_invites_invitees', #name of the join table
association_foreign_key: 'game_invite_id' #the name of the domestic model in the join table
source 'https://rubygems.org' | |
# ------------------------------------- Universal gems ----------------------------------------------- | |
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' | |
gem 'rails', '~> 5.1.4' | |
# Use Puma as the app server | |
gem 'puma', '~> 3.7' | |
# Websockets |
$ rails g devise:install
$ rails g devise User
$ rails g devise:views
The following lines needs to be copied in the ApplicationController
, so that no additional params are passed in Devise fields:
source 'https://rubygems.org' | |
gem 'rails', '~> 5.1.6' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' | |
gem 'puma', '~> 3.7' # Use Puma as the app server | |
gem 'jbuilder', '~> 2.5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder | |
gem 'redis', '~> 4.0' # Use Redis adapter to run Action Cable in production | |
gem 'bcrypt', '~> 3.1.7' # Authentication | |
gem 'jwt' # encoding and decoding of HMACSHA256 tokens available in the Rails application | |
gem 'pg', '~> 0.20.0' # Database | |
gem 'rack-cors', require: 'rack/cors' # Allow Cross Origin Ressource Sharing |
Set the Rails API up as described in this guide
Create a React client app using $ create-react-app
inside the root folder of the Rails app
Set up local servers using the Foreman gem
gem foreman
in the development group of your Gemfile and run command $ bundle install
Procfile.dev
file and add the following lines so that both the rails server and the react server start (on different ports) when running $ foreman start -f Procfile.dev
:
/* So that a 'component style file' is not compiled to css in a separate file by npm watch, it needs to start with an underscore */ | |
$hover: #eee; | |
$checked: #20c997; | |
$unchecked: white; | |
/* Customize the label (the checkbox-area) */ | |
.checkbox-area { | |
position: relative; | |
cursor: pointer; |
In depth analysis of functions mechanism in JS
Function are objects in JS and hence they have a prototype. The advantage of function being objects is that they can be easily passed as arguments to other functions or objects. There are 3 main methods in Function's prototype:
.call()
and .apply()
: they do significantly the same thing, ie executing a function while letting you specify a different 'this' than the natural one (that you pass in the first argument). The difference between the two is that arguments in addition to this
are passed individually in .call()
and as an array in .apply()
.export class MainLayout extends React.Component { | |
dimensionsUpdatePoll: any = null; | |
constructor(props){ | |
super(props); | |
this.state = { | |
width: 0, | |
height: 0 | |
} | |
this.lastCheck = Date.now() |