Giter Site home page Giter Site logo

sosaucily / r3-go Goto Github PK

View Code? Open in Web Editor NEW
10.0 3.0 2.0 4.84 MB

React/Redux/Rails fast fast fast! - Based on react-boilerplate frontend

License: MIT License

JavaScript 68.71% CSS 0.47% HTML 6.05% Shell 0.37% Ruby 23.12% ApacheConf 1.27% CoffeeScript 0.01%

r3-go's Introduction

#R3-GO!

A full-featured react / rails framework

Based on some popular projects from around the nets, combined together for awesomeness and speed.

  • Rails Backend, React/Redux/Saga client.

  • Hosted completely independently on Heroku and Netlify, respectively.

  • React-toolbox for quickly leveraging redux friendly components styled with Material Design

  • Various features you "always" need are done! Including

  • Authentication system, email/pass using JWT tokens, ready to go, as well as Facebook and Google(wip)
  • Simple deploy scripts, done!
  • Rails admin portal

Client system is based primarily on https://github.com/react-boilerplate/react-boilerplate

Server is just a simple Rails 5 server for now. Considering basing the rails system on https://github.com/thoughtbot/suspenders but for now it seems like overkill

Requirements

Client

  • node ^4.5.0
  • yarn ^0.17.0 or npm ^3.0.0

Server

  • Ruby 2+

Getting Started

Setting up locally

  • Fork or clone the repo
  • In the 'server' directory, install the gems with bundle (hint: consider creating a gemset for housekeeping)
  • The repo is currently configured to work with postgres, but feel free to change that. You will need to initialize a database. go into the database.yml file and set the name of your database. Run rake db:create then rake db:migrate then rake db:seed
  • Create a figaro config file for your environment variables with bundle exec figaro install. This will generate for you an application.yml file which will feed environment variables to your application. Do not check this file into github. For the content of this file, see the sample_application.yml file and replace the values in application.yml as needed.
  • In the 'client' directory, install the node modules with yarn install
  • Run the rails server; cd to 'server' and run env PORT=3001 rails server
  • In another terminal window, run the React client; cd to 'client' and run yarn start
  • If you like foreman, do both at once with foreman start Procfile in the root dir.

Facebook auth

You'll need to create a facebook application, and test application, for your site. Make sure to add http://localhost:3000 to the Website -> Site URL field in order to get the callbacks working correctly on your development server, and add your fully qualified url in the "Valid OAuth redirect URIs" field in the Facebook Login -> Settings sectoin. Use the 'test app' key/secret in your application.yml default section, and the production key/secret under production.

You will also need to put the Facebook key in webpack.dev.babel.js and webpack.prod.babel.js

Setting up for 'prod' deploy

Deploying the Rails server

Deploying the JS client

  • Update the deploy-client.sh file to point to the correct repo name you will use in netlify.
  • Update the API_URL variable in 'webpack.prod.babel.js' with the URL of your heroku instance
  • Configure a free netlify instance for your JS client, configuring it to auto-deploy on push to a branch called 'r3-go/production'
  • Run the deploy-client.sh script
  • Browse to your netlify page to see your awesome website and test your login flow!

More about React client

Updating global js variables

See the 'API_URL' example in the webpack..babel.js files. WIP

More about Rails server

WIP

Figaro config settings

WIP

r3-go's People

Contributors

sosaucily avatar

Stargazers

Tiago avatar Tan Nguyen avatar Alex Stupakov avatar Rob Pataki avatar  avatar Jose Wilfredo avatar  avatar Ben avatar Lisandro Martinez avatar Nguyen Viet Cuong avatar

Watchers

 avatar James Cloos avatar  avatar

Forkers

kobbiman limitall

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.