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

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 a static page with the following directory structure:

| | - Communication | - Communication | - (some css files) | - Communication | - (some js files) | - Communication | - (some images)

How do I include it in my application? I intend to do this on my home page.

I tried to use the 'layout' keyword in the controller by including the html file in the "app / views / layout" directory. However, I was able to render the index.html file, but it is missing any style, i.e. Gets rendered as plain text. I was able to get the same result using the HighVoltage gem.

+3


source to share


2 answers


Page

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

Rails simply renders HTML using data from your database. Like PHP (which many developers might appreciate), Rails is a processor that lets you populate yours view

with the data you need.

This means that if you want to create a "static" page, you simply don't need to fetch 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 tricky part is to include the required resources for this view.

You mentioned that you have your own structure directory

. Let me tell you that you will be much better served by building and maintaining assets from your asset 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 add the "welcome" files to your asset's precompilation list, it should work for you:

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

      

+4


source


Since you have custom styles and js for your home page, you will need to do even more of any other kind. Create a controller for your home page, call it could be page_controller. Create your own activity say home, make a route for that activity and then put your html in that activity view

To do this, follow these steps:

  • Create controller:

rails g controller Pages

  • Create an 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

      

0


source







All Articles