Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
React Rails | 6,674 | 4,577 | 48 | 7 days ago | 61 | July 31, 2023 | 17 | apache-2.0 | JavaScript | |
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. | ||||||||||
React_on_rails | 4,984 | 419 | 9 | 20 days ago | 196 | July 31, 2023 | 15 | mit | Ruby | |
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. | ||||||||||
Awesome Opensource Apps | 2,859 | 2 months ago | 36 | |||||||
:house::information_source: Curated list of awesome open source crafted web & mobile applications - Learn, Fork, Contribute & Most Importantly Enjoy! | ||||||||||
Chaskiq | 2,631 | a day ago | 76 | other | TypeScript | |||||
A full featured Live Chat, Support & Marketing platform, alternative to Intercom, Drift, Crisp, etc ... | ||||||||||
Hound | 1,934 | 3 months ago | 64 | mit | Ruby | |||||
Automated code review for GitHub pull requests. | ||||||||||
React Webpack Rails Tutorial | 1,704 | 2 days ago | 12 | mit | Ruby | |||||
Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration. And React Native! Live Demo: | ||||||||||
Astuto | 1,500 | a day ago | 49 | gpl-3.0 | TypeScript | |||||
A free, open source, self-hosted customer feedback tool 🦊 | ||||||||||
Ifme | 1,394 | 12 days ago | 38 | agpl-3.0 | Ruby | |||||
Free, open source mental health communication web app to share experiences with loved ones | ||||||||||
Charting Library Examples | 1,149 | a month ago | 94 | mit | Ruby | |||||
Examples of Charting Library integrations with other libraries, frameworks and data transports | ||||||||||
Bootstrap Loader | 1,027 | 2,081 | 165 | a month ago | 69 | March 07, 2023 | 6 | mit | JavaScript | |
Load Bootstrap styles and scripts in your Webpack bundle |
Count Online Users - tracks whether a user is online or not(has opened webpage in browser), showing a green button "Online" at the user card and changes the users counter at the subheader. Built with RoR and React framework, deployed to Heroku.
This project only shows the current online user on the home page. This is useful for creating presence features like showing a green dot next to a user name if they're online. Based on RailsGuide - ActionCable Example 1: User Appearances To do that, it create each user automatically by unique ip address and type of device. To tracks users used Rails Action Cable with Redis and WebSocket technology. For fronted - used React.
How it works with Action Cable(works strangely because of cookies):
The user ID is stored in cookies, so if you just change the device type in the browser, the change does not occur, you also need to clear the cookies. Better for testing to open one tab in incognito mode.
Main tasks:
Deployed to Heroku and available online. It used redistogo Heroku addons to automatic setup and run Redis server.
The setups steps expect following tools installed on the system.
git clone https://github.com/Synkevych/realtime_user_tracking
cd realtime_user_tracking
By default this repo create database count_online_users_development
, edit the database configuration as required and provide correct username and password from your PostgreSQL.
Run the following commands to create and setup the database and all required libraries.
rails db:create
rails db:setup
rails db:migrate
rails db:seed # create 3 default user on database
bundle install
yarn install
You can start the rails server using the command: rails s
.
And now you can visit the site with the URL http://localhost:3000
Here is instruction how to deploy this app to Heroku:
heroku login
- login to your profile
heroku create count-online-users
- create new heroku app with specific name
heroku addons:add redistogo
- this addons create redis server
heroku config --app count-online-users | grep REDISTOGO_URL
- this command show you unique url to your redis server on heroku, copy them and past on config/cable.yml
production:
adapter: redis
url: redis://redistogo:[email protected]:10775/
Then add configuration to the config/environments/production.rb
Rails.application.configure do
...
# Configuration for Action Cable and WebSockets
config..web_socket_server_url = "wss://count-online-users.herokuapp.com/cable"
# Allowed Request Origin
config.action_cable.allowed_request_origins = ['https://count-online-users.herokuapp.com', 'http://count-online-users.herokuapp.com']
end
git add -A; git commit -m "update redis conf"
- commit changes
git push heroku master
- push you project to Heroku server
heroku run rake db:migrate
- run migration on Heroku server
heroku pg:reset
- drop database on Heroku server
heroku open
- open and test your website
rails new count_online_users --webpack=react --database=postgresql -T
- create a new app with React and PostgreSQL
rails g model User name:string ip_address:string device:string visits:integer online:boolean
rails db:setup
rails g serializer User name ip_address device, emoji, last_seen_at, visits, online
rails g channel Activity
yarn add react-router-dom
yarn add axios
yarn add styled-components
git checkout redis_for_heroku -- config/cable.yml
- get changes from specific files from another branch
git merge --squash fix_updating_when_user_returned
- squash all changes from a branch to the master
Feel free to send us feedback on Twitter or file an issue. Feature requests are always welcome.