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.
source to share
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']
source to share
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
source to share