How to include a static page with custom css and js files in a Rails application

Question

I am working on a basic Rails application (Rails version 4.1) and I would like to include a static page in it. I have got the static page with following directory structure:

How can I include it in my application? I intend to make it my homepage btw.

I have tried using the 'layout' keyword in the controller by including the html file in the 'app/views/layout' directory. However, I have at-most been able to render the 'index.html' file but it misses any styling i.e. gets rendered as plain text. I have been able to obtain the same result by using the HighVoltage gem.

If it's only a static page then i think you'll be better of using high_voltage gem. Can you explain what issues you had while using it? — Mandeep
– Mandeep, Commented Sep 14, 2014 at 8:07
Why can't you place all of your css, js and images in the assets pipeline as usual? — caffeinated.tech
– caffeinated.tech, Commented Sep 14, 2014 at 8:55
@Mandeep As I wrote, I have only been able to render the page only as a plain text i.e as a black and white sheet, with variations only in size (like a .txt file). From what it looks to me, it seems to not be including the assets that came along with it. I have tried putting them alongwith it in the 'pages' folder meant for the HighVoltage gem, and in the app/assets folder. — purezen
– purezen, Commented Sep 14, 2014 at 8:59
@AdityaBhardwaj ahh okay! I see so high_voltage doesn't allow you to use a layout file where you could load your stylesheets and js — Mandeep
– Mandeep, Commented Sep 14, 2014 at 9:01

Richard Peck · Accepted Answer · 2014-09-14 09:26:05Z

5

Page

When you mention a "static" page -- all the pages are static in Rails

Rails just renders HTML, using the data from your database. Much like PHP (which many developers can appreciate), Rails is a processor which allows you to populate your view with the data you need.

This means that if you want to make a "static" page, you just need to not pull any data from the db:

#config/routes.eb
root: "application#home"

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   def home
   end
end

This will give you the ability to load the following view:

#app/views/application/home.html.erb
Put stuff here

Assets

Now, the slightly trickier part is to include the right assets for this view.

You mention you have your own directory structure. Let me tell you now that you'll be MUCH better served by creating & serving assets from your assets pipeline.

Here's how:

#app/views/layouts/application.html.erb
<head>
  ...
  <% if controller_name == "application" && action_name == "home" %>
     <%= stylesheet_link_tag "welcome" %>
     <%= javascript_include_tag "welcome" %>
  <% end %>
</head>

This will give you the ability to call the following:

#app/assets/stylesheets/welcome.css
...

#app/assets/javascripts/welcome.js
...

Finally, if you then add the "welcome" files to your asset precompilation list, it should work for you:

#config/application.rb
Rails.application.config.assets.precompile += ['welcome.js', 'welcome.css']

answered Sep 14, 2014 at 9:26

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Woodside Over a year ago

Is there a way to avoid having to add each file to the precompile list?

Mandeep · Accepted Answer · 2014-09-14 09:26:41Z

Since you have custom styles and js for your home page so you'll need to do to it more any other view. Create a controller for your home page, call it may be pages_controller. Create a custom action, lets say home, make a route for this action and then place your html inside this actions view

Follow these steps to make it work:

Create a controller:

rails g controller Pages

Create a action inside your pages_controller.rb

def home;end

Create a route for your action

root :to => 'pages#home'

This will by default use application.html.erb as your layout and inside your application.html.erb you have this line

<%= stylesheet_link_tag "application", media: "all" %> #this by default load all the css from assets/stylesheets/application.css so you can require your css file inside it

Collectives™ on Stack Overflow

How to include a static page with custom css and js files in a Rails application

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related