Locked lesson.
About this lesson
Allow people to sign up to your site, log in, and log out. Part 1.
Exercise files
Download this lesson’s related exercise files.
Devise Installation Part 1.docx58.6 KB Devise Installation Part 1 - Solution.docx
58.9 KB
Quick reference
Devise Installation Part 1
In this video we'll begin to install Devise to handle user management.
When to use
Devise is a great Ruby Gem that handles User Management. It allows people to sign up for your site, sign in, update their profile, and more.
Instructions
Head to RubyGems.org and search for "Devise".
Copy the gem reference to your Gemfile, save the file, and then run the "Bundle Install" command in the terminal.
Be sure to read the Devise documentation at RubyGems.org as well as the instructions that appear in your terminal after running the next command.
Next: run this command in the terminal:
rails generate devise:install
Next: in your config/environments/development.rb file, add this line of code:
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
Next: in your config/environments/production.rb file, add this line of code:
config.action_mailer.default_url_options = { host: 'yourappname.herokuapp.com'}
Be sure to change the "yourappname.herokuapp.com" url to your actual heroku url.
Next: Add a partial file named _flashmessage.html.erb to your app/views/home directory and add this code:
<% flash.each do |name, msg| %>
<div class="alert alert-warning alert-dismissible">
<button class="close" data-dismiss="alert">
<i class="glyphicon glyphicon-remove-circle"></i>
</button>
<%= content_tag(:div, msg) %>
</div>
<% end %>
Next: Render your partial right above the yield tag on your app/views/layouts/application.html.erb file:
<%= render 'home/flashmessage' %>
Next: enter this command into your terminal to render Devise views:
rails g devise:views
That's it for this video!
Hints & tips
- Step 1: Add the Devise Gem to your Gemfile and then run Bundle Install
- Step 2: Run this command in your terminal rails generate devise:install
- Step 3: Modify your config/environments/development.rb file
- Step 4: Modify your config/environments/production.rb
- Step 5: Ccreate a partial and add your flash message code to it
- Step 6: Add your partial render code to your application.html.erb file
- Step 7: Run this command in your terminal rails g devise:views
- 00:05 All right, so we're moving right along, and
- 00:07 now it's time to add some actual functionality to our app.
- 00:09 So we want people to be able to sign up for our site, and then login and logout.
- 00:14 And also do some profile editing and things like that,
- 00:17 basic things that you find in most websites.
- 00:19 And normally,
- 00:20 it would take a team of developers months to code that sort of functionality.
- 00:25 But luckily for us, we can use a simple gem to do that.
- 00:28 So head over to rubygems.org and search for devise, that's D-E-V-I-S-E.
- 00:33 And here we go, 22 million downloads.
- 00:36 Go ahead and click that, and devise will take care of all of that stuff for us.
- 00:39 It's a little bit tricky to install, so that's what we'll do in this video.
- 00:42 So go ahead and start out by clicking, grab the reference.
- 00:45 Come back, open up your Gemfile, like always, and Ctrl+V,
- 00:50 Cmd+V if you're on a Mac, to copy that in.
- 00:53 Save it, come down here and run the bundle install command, like always.
- 00:57 So while that does that, I'm gonna come back here and
- 01:00 take a look at the documentation for devise.
- 01:03 And if we scroll down here, we have some installation instructions.
- 01:08 First, you run your bundle install, we've already done that.
- 01:10 Next, we want to run this rails generated desive-install command.
- 01:15 So copy this, and this is the same rails generator
- 01:18 feature that we used earlier when we created our first web page.
- 01:21 So boom, boom, let's make this a little bit bigger.
- 01:24 So it starts to install, but then it gives us these further instructions.
- 01:28 And just kinda read through here, the first thing it's saying,
- 01:32 we need to add this line in a couple of different places.
- 01:35 So I'm gonna hit Ctrl+C, and
- 01:37 it wants us to add this to our config environments development.rb file.
- 01:41 So come to our config and environments and then development.rb.
- 01:46 Go ahead and make that smaller.
- 01:48 And just scroll down to the bottom of the file on top of this end line,
- 01:53 right above that, and just paste that in here, and go ahead and save it.
- 01:56 And close that.
- 01:57 And you could see it also wants us to add the same line to our production file.
- 02:01 So that's config, environments, not development but production.
- 02:05 So come back here, now this is the file for our production server, and
- 02:10 we use Heroku for our production server so
- 02:13 we need to change this local host to the URL of Heroku app.
- 02:16 And you may have forgotten what that is, so if you come to your terminal and
- 02:21 type in heroku config, that will give you a bunch of information.
- 02:25 And just right here at the top, that's your URL.
- 02:28 That's the beginning of your URL.
- 02:30 So if we copy this, come back to our production file, what we wanna do
- 02:35 is just delete this, paste that in and remember to type in .herokuapp.com.
- 02:41 So this whole this is the URL to your production level heroku website, so
- 02:46 that's right here.
- 02:48 So paste that in and then we can also delete this part here,
- 02:51 'cause we don't need it.
- 02:52 So go ahead and save that, and then you can close that file, close that one.
- 02:56 Now, let's pull this back up, and scroll back here, and
- 02:59 look at these instructions we've been given.
- 03:01 So we did the first one, the second one is ensure that you have a root url.
- 03:06 Well, we've already done that.
- 03:07 We did that right at the beginning of the course, so we don't need to do that.
- 03:10 The next thing to do is add flash messages.
- 03:13 So whenever somebody logs in or does something on your website, you wanna be
- 03:16 able to give them a little flash message that confirms whatever action I just took.
- 03:20 So it gives you some instructions here on what to do, but
- 03:23 I like to do it a little bit differently.
- 03:24 Since we're using Bootstrap, Bootstrap has some alert stuff.
- 03:28 So we can customize this just a little bit, and that's what we're gonna do.
- 03:32 Now, the instructions are saying we should put this in our application.html.erb file.
- 03:37 But we're gonna go ahead and create a partial instead,
- 03:42 because we already know how to do that, so
- 03:46 let's go to app, views, home, New File, and
- 03:50 let's call this _Flashmessage.html.erb.
- 03:55 And let's open this file, and I'm just gonna paste in some code here.
- 04:00 Now, this is actual Ruby code, and you don't need to know what this is,
- 04:04 it's basically an each loop, and it loops through here, and it has a little icon and
- 04:09 some Bootstrap stuff.
- 04:10 And I'll put this code in the resource section of the course here, so
- 04:14 you could just copy and paste it.
- 04:16 But like I said, this is Ruby, and we're using a little bit of embedded Rudy, so
- 04:19 save this.
- 04:20 Next, come to our application.html and we need to put the partial for this in.
- 04:25 And we put it right above our yield tag.
- 04:28 So = render \u0027home/flashmessage\u0027 and
- 04:35 then close our tag.
- 04:38 Make sure that flash message is correct.
- 04:41 Okay, so if we go ahead and save this, we're almost done.
- 04:44 The last thing we need to do is enter in this line, this command into our terminal.
- 04:49 And this will create all of our device views.
- 04:52 So hit that, and this rails g, that's short for generate,
- 04:56 using the rails generator like earlier, and it's created all of this stuff.
- 05:01 And let's take a quick look at that real quick here.
- 05:03 So if we go to our app views and we see we've got a new directory called devise.
- 05:08 So in the next video we'll go through all of this.
Lesson notes are only available for subscribers.