Thank you for continuing to follow this tutorial. If you stumble on this post and don’t know what happening, please check Part 1 , Part 2 and Part 3 that covers basic setup and styling. Also please check Live Demo for the final result. If like to deep straight into code, here is the source code for all 3 parts.
Let me help you!
Hey, I am Anatoly, founder of this blog. I would love to help you! I have 6+ years experience in Web Development and IT Leadership. Lets work together on your project! Leave me your email and I will schedule a FREE Consultation!
Pre-requisites:
- verified heroku account
- postgresql
- heroku command line tool
- git
For deployment to Heroku I will be using amazing example from heroku blog
First of all go to your Gemfile and uncomment line:
notificator/Gemfile
gem 'redis', '~> 3.0'
Then run:
bundle install
Create heroku app, by going into your
heroku create notificator-rails5
Add redis to our app (it requires verified account, but redis itself is free up to 10 connections)
heroku addons:add redistogo --app notificator-rails5
Get redis url that is used for production
heroku config --app notificator-rails5 | grep REDISTOGO_URL
You will get something like this:
REDISTOGO_URL: redis://redistogo:4d0d40e2110d2ca3531e8cc0ce2faa38@sculpin.redistogo.com:9490/
Put this variable into cable.yml (please change your redis url to the one you got from the heroku)
notificator/config/cable.yml
development: adapter: async test: adapter: async production: adapter: redis url:redis://redistogo:4d0d40e2110d2ca3531e8cc0ce2faa38@sculpin.redistogo.com:9490/
Next step is to specify websockets url path. Go to production.rb and add following lines:
notificator/config/environments/production.r
config.web_socket_server_url = "wss://notificator-rails5.herokuapp.com/cable" config.action_cable.allowed_request_origins = [ 'https://notificator-rails5.herokuapp.com', /http://notificator-rails5.herokuapp.com.*/ ]
While you are in production.rb, we need to do a special fix for Heroku to show assets:
change from false to true:
notificator/config/environments/production.r
config.assets.compile = true
add :
notificator/config/environments/production.r
config.assets.digest = true
Cool! We are good to go!
Commit this and push to master:
git push heroku master
In case when its succeeds you still don’t see your website, run:
heroku rake db:migrate
to force database migration
Please post your questions into comment section.
If you like what you see please Subscribe to my blog. If you need help with your project, please Get In Touch.
Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.
It is not working in localhost, most specifically the real time feature. I am very sure that you skipped few things in this tutorial. The end output is not identical with demo. It is not even working on heroku. You used redis to go for heroku but you did not mention any such storage structure for localhost. You did not mention what should be there in Procfile. CSS is not working. I am using chrome but .svg file is not supported under image_tag.
Even in heroku the real time feature is not working.
This issues are very serious. Have a look !
Hey Abhradip,
I am sorry that this tutorial does not work on localhost. To help you better please provide more information on what exactly does not work for you maybe with error message for clarity.
Addressing some of the concerns of your demo:
a.”The end output is not identical with demo.” -> Can you please specify what exactly is not identical ? This demo is build from the code in this repository: https://github.com/myprogrammingblog/notificator-rails5-example . What I mean is heroku is using it as a source code to build the demo. I see demo working, so how can it be different ? Please specify which parts are different for you.
b. “It is not even working on heroku”. -> IF you look at the demo – it is on Heroku and it is working. Please specify what exactly does not work for you on Heroku.
c. “You used redis to go for heroku but you did not mention any such storage structure for localhost.” -> Please see “Setup part” of http://myprogrammingblog.com/2016/08/22/rails5-actioncable-realtime-notifications-part1/
d. “CSS is not working. I am using chrome but .svg file is not supported under image_tag.” -> My code is using an “.svg” and I have no problem with it (On Chrome). Please specify what errors are you getting on the console and where are you storing an image.
Also did you try getting source code from the repository and running it -> https://github.com/myprogrammingblog/notificator-rails5-example
Thanks for your comment, and I look forward for your reply!
Thank you for the response! . Firstly I cloned your app from the git repository blindly and then I pushed it into my heroku. My heroku has RedisToGo add on installed. And I have set url as heroku config:set REDIS_PROVIDER=REDISTOGO_URL command on my windows machine. Then also the real time feature was not working.
Please tell me what else to do. I missed some settings I think.
And I forgot to say, I also ran heroku run rake db:migrate to generate necessary migrations.
grep is not a windows command . Thats why I am unable to run heroku config –app notificator-rails5 | grep REDISTOGO_URL command. Thats why all the things are messed up. Can you tell me any alternative of ‘grep’ for windows?