Rails 5 Imgur Clone Welcome to the second and final part of the Rails 5 Imgur clone, in this part, we will build the image uploading, manage configurations and then deploy to Heroku. Be sure to check out the first part if you haven’t already. here First, signup and verify a new cloudinary account by going , it’s my referral link to cloudinary which will give me little bit extra space. here Let’s start by adding few more variables to our cloudinary configuration at config/initializers/cloudinary.rb Remember, the has to exactly in that folder, if you open the you’ll see in the comments written it says the config has to be there, it’s just how rails configuration works. cloudinary.rb config/application.rb Make sure your looks something like this. cloudinary.rb . . [ ] . [ ] . [ ] . . Cloudinary config do | | config config cloud_name = ENV 'CLOUDINARY_CLOUD_NAME' config api_key = ENV 'CLOUDINARY_API_KEY' config api_secret = ENV 'CLOUDINARY_API_SECRET' config cdn_subdomain = true config enhance_image_tag = trueend Go to cloudinary dashboard and you will the variables which we will use. The inclusion of increases image serving performance by getting the best cdn location and adds more functions to the built in rails method. Cloud name, API Key, API Secret cdn_subdomain enhance_image_tag image_tag Okay, here we are dynamically setting environment variables to our application. It will pick up variables for production and development environments. You really don’t wanna hard code this as it is not safe and wise to publicize your keys and other info as these are highly sensitive. This style is highly recommended for any of your rails project not just this. It’s just really a damn good practice. You might think its just a home project but if you work at a company this is really serious so, it’s better to practice from now. Secondly, and this is the most important step, setting up your variables in your environment. We are going to use the gem. Add this to your and run in your terminal to install the gem and then restart your server. dotenv Gemfile bundle gem 'dotenv-rails', groups: [:development, :test] This is by far the best, easiest and simple solution and works perfectly. Now go to project’s root directory and create a file called .env We are going to set our variables like this. export CLOUDINARY_CLOUD_NAME=export CLOUDINARY_API_KEY=export CLOUDINARY_API_SECRET= Just put the variables as it is without any quotes. And then add to your so that it doesn’t get pushed to your GitHub repo. We are going to add Heroku cloudinary add-on and set the variable in the production environment in their way. .env .gitignore Alright, our configuration part is done for now. If you wanna further know about the gem then go to their and read more. dotenv github page Finally, we are going to add code to our controller for uploading and saving images to the database. Go to your controller at and add to your & method like this. pics_controller.rb new create .**newend def @pic = Pic new def @pic = Pic**. ( . ( ). ( )) . create new params require :pic permit :image @pic saveredirect_to @picend What we are doing here is basically creating an called @ and adding the method to our model which we will use it in all over our project. Later, in the create method we are allowing it to add to the database, then save it and take it to that pic page after it’s been saved to our database. instance variable pic new Pic Now, create a & in directory new.html.erb _form.html.erb app/views/pics/ In your add this code. _form.html.erb <%= <%= <%= <%= <% <%= ** .submit %>**<% form_for @pic do | | %> f .label :image do %> f .hidden_field :image_cache %> f .file_field :image %> f end %> f end %> So, here we are creating a form for a pic to be added to our database and then we are going to display it in the web. Now, we going to implement the show page and controller. In your add this following code pics_controller.rb . ( [ ]) def @pic = Pic show find params :id end Here we are pulling the data from database by their id Create a new file in directory and this simple line to display the image to the public show.html.erb app/views/pics/ <%= image_tag(@pic.image.url, width: '100%', crop: "scale")  %> We are also scaling the image to fit in the display so, that it looks beautiful. Great, your image is displayed now we are going to display all the images to our index/ home page. Open add this following code to controller to get all the images from the database pics_controller.rb index . def @pics = Pic index allend In your add this to loop through all the images and display it to the index page. index.html.erb <% <%=  **image_tag( .image.url, width: '100%', crop: "scale")  %>**<% @pics.each do | | %> pic pic end %> Now, we are going to prettify our app a little by adding simple bootstrap css and a navigation. Go to , it’s a bootstrap material design flavor which I really like, you could use this or anything else you like. Grab the link add it to the of your right below the csrf meta tags bootstrap head application.html.erb <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"> Now, create a named inside the directory, and add the navigation to our header partial _header.html.erb app/views/layouts/ <%= <%= <nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"> link_to 'Rimgur', root_path, class: 'navbar-brand' %> link_to 'New Post', new_pic_path, class: 'navbar-brand' %></div></div></nav> And then render the header to our main application page. Add this to your on top application.html.erb yield <%= render 'layouts/header' %> Now, as a final step we are going to take our app live by deploying it to heroku. For our application to work on production, we need to do some modification to our Move the to group and add for P** ** for Gemfile. gem ‘sqlite’ development pg ostgreSQL production. **group :development dogem 'sqlite3'end group :production dogem 'pg'end** Then do this following to install the gems bundle gem install bundler Git add and commit all of your files. git add .; git commit -m ‘project finished’ Create a new git repo in your account and our codebase to it. Follow the instructions on the screen to do . git remote add and push Now, we are ready to take it live. Create a new account for FREE and verify it. Then, create a new heroku app in your terminal and push it. heroku heroku create git push heroku master We are going to have migrate our schema to production for our app to work. We can do it like this. heroku run rails db:migrate Do to open the app in browser. heroku open Okay, now you are going to do the most important step for our image uploading to work. heroku addons:create cloudinary:starter Remember, we set up the environment variables for for machine, now we are going to do it for our production. cloudinary development Go to your heroku dashboard, then to your app, and then to the cloudinary dashboard to get our configurations. Now, in your terminal do this following to add the config variables. heroku config:set CLOUDINARY_CLOUD_NAME= heroku config:set CLOUDINARY_API_KEY= heroku config:set CLOUDINARY_API_SECRET= Try uploading a pic in your app and then check the cloudinary dashboard that it’s been added. Congratulations, you have successfully built a fully functional web app. Feel free to play around with it and make it more awesome. Here is the link to my github . All the code is hosted here for your reference. repo Thank you for reading it, hope you enjoyed it and will use this knowledge to build something awesome. Subscribe me if you would like to receive future posts to your inbox. LIKE & SHARE if you have liked my post. Please comment below any feedbacks, suggestions or requests. Also please visit my website .

Heroku

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Rails 5 Imgur Clone Tutorial…Part 2

Too Long; Didn't Read

Companies Mentioned

Priom Chowdhury

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Rails 5 Imgur Clone Tutorial…Part 2

Too Long; Didn't Read

Companies Mentioned

Priom Chowdhury

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES