Getting Started
The first thing you need to do to get Phlex up and running in your Rails app is to install it.
# Run from the root of your Rails project
$ bundle add phlex-rails
Next, run the installation command to set up the necessary files:
$ bin/rails generate phlex:install
This creates several important files that youβll be working with frequently as you build your Phlex components.
Important Phlex files
Installing Phlex into your Rails application creates and modifies several key files. Understanding these files is crucial as you migrate your existing views to Phlex components.
$ rails g phlex:install
create config/initializers/phlex.rb
create app/components/base.rb
create app/views/base.rb
Configuration file at config/initializers/phlex.rb
π Unlock content
Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.
βββ βββββββ βββββ βββββββββββββ βββββββ βββ βββββ βββ ββββββββββ βββββ ββββ βββββ ββββββββββ ββββ βββββ βββββ βββ βββ βββββββββ βββββ βββββ βββ ββββββββββ ββ ββββ ββββ ββββββ ββ βββββββββ βββββββ βββββ ββββββββ βββββββββ βββββ ββββ ββββββ βββββββββββ ββββββββββββ
β ββββββββββββββββββββββ ββββ
β βββββββ βββ βββββββ ββββββ ββ ββββ ββ βββ ββββββββββ βββ
β ββββββ βββββββββ ββ βββ
module Views
end
β βββββββ βββ ββββββββββββ ββββββ ββ ββββ ββ βββ ββββββββββ βββ
β ββββββ βββββββββ ββ ββ βββ βββββββ ββββββββββββ βββββ ββ β βββ
β ββ βββββ ββββ βββββββ βββββ βββββ
module Components
extend βββββ::βββ
end
β ββββββββ βββββ ββββ βββ βββββ ββ βββββββββββ ββββββ ββ ββββββββββ
β ββββ βββ βββββββ βββββββ
βββββ.βββββββββββ.ββββ.ββββββββ(
βββββ.ββββ.ββββ("app/views"), namespace: βββββ
)
β ββββββββ βββββ ββββ βββ βββββ ββ ββββββββββββββββ ββββββ ββ ββββββββββ
β ββββ βββ ββββββββββββ βββββββ
βββββ.βββββββββββ.ββββ.ββββββββ(
βββββ.ββββ.ββββ("app/components"), namespace: ββββββββββ
)
βββββ βββββ ββββ βββ ββββββββ βββ βββ ββββββββββββ βββ βββββ ββββ ββ ββββββββββ ββββ ββ ββββββ βββββ ββββ βββ ββββ ββββ βββββ βββ βββββββββ βββββββ ββ ββββ ββββββββββ βββββββββ
Base component file at app/components/base.rb
βββ ββββββ βββββββββ ββββ ββ βββ ββββββ ββ βββ ββββββββββ βββ ββββ βββββββββ βββ βββββ βββββ ββ ββββ βββββββ ββββ ββββββ βββ ββββββββββββββββ βββββ βββββ ββββ ββββββββββββββ
class Components::Base < βββββ::ββββ
β βββββββ βββ βββββββ βββ ββββ ββ ββ βββββββββ ββββββ βββ ββββββββββ
include βββββ::βββββ::βββββββ::ββββββ
β ββββ ββββ ββ ββββ βββββββ ββββββ βββ βββββββββ ββ ββ βββββββββββ ββββ
β ββ ββββ ββ ββββββ ββ βββββ ββββ βββ βββββββββ ββββββ ββββββββββ
if βββββ.βββ.ββββββββββββ
def βββββββββββββββ
βββββββ { "Before #{self.βββββ.ββββ}" }
super
end
end
end
βββββββ ββ ββββ ββββ ββββ ββββββ βββ ββββββββββ ββββ βββββββ ββββ βββ ββββββ ββ ββ βββββ βββββ ββ βββ ββββ βββββββββββββ ββββββ ββββββ ββββ ββββββ ββββββββ ββββββββ ββββ ββββ ββββββββ ββ ββββ ββββ ββββ βββββββ βββ ββββ βββββββ βββββββββββββ ββββββ ββββββββββ βββββββββ βββ βββ βββββββββββ ββ βββββ βββββββ ββ βββββ βββββββββ βββ βββ βββββ ββ ββββββββββ ββββββββββ ββ ββββββββ ββββββββββ βββββββ βββββββββ ββββ ββββ βββββ
Base view file at app/views/base.rb
βββ βββββ ββββ ββ βββ βββββββββββ ββββββ ββ ββββββ βββββ βββ ββββββββ ββββ βββ ββββββββββββββββ ββββββ
class Views::Base < ββββββββββ::ββββ
β βββ βββββββββββββ ββ ββ ββββββββ βββββ βββ βββ ββββ ββββββ
β ββ ββββββββ ββ ββββββββ ββββ βββββββββββββββββββ βββ βββ
β βββ ββββββ ββββ ββ βββββββββββββ ββ βββ ββββ ββ ββββ βββββ βββ
β ββββββββββ ββββββββββββ
end
βββ βββββ ββββββ βββ ββββ ββββ ββββ ββ βββββββ β ββββββ βββ ββββ ββββ ββ ββββββ βββββββ ββββ ββββ βββββ ββββββ βββββββ βββ βββ βββββββββββ
Whatβs the difference between a βViewβ and a βComponentβ in Phlex?
ββ ββββ ββββββ βββ βββββ ββ βββββββββ βββββ βββ βββββββββββ βββββββ βββββββ βββ ββββββββββββ ββ ββββββ ββββββ β βββββββ βββββββ βββββ βββββββββββ βββββ βββ ββββββββββ
Phlex Concept | Rails Equivalent | Description |
---|---|---|
ββββ | ββββ | β βββββββββ ββββββββ ββββ βββββββββββ ββ β ββββββββββ βββββββ βββββ βββββββ βββ ββββ ββββββ βββ ββββββββββββ ββ β βββββ |
βββββββββ | βββββββ | β ββββββββ βββββ ββ ββ ββββ βββ ββ ββββββββ ββββββ βββββ ββ βββββ βββββββββββ βββββββ ββ β ββββββββ ββ βββββββ ββ ββββββββ |
ββββ ββ βββββ ββββ βββ ββββ βββββ βββ ββββ βββββββββ βββ ββββββββ βββ ββββββββ βββββββββ βββββ ββββ βββββ βββ ββββ βββββββββ ββββ ββββββββββ ββ ββββββββββ ββββββββ βββββ ββββββββββ βββββ ββ ββββββββ ββ ββββββββ ββββ βββ ββ ββββββββ ββββββββ ββββββββββ ββββ ββββββββββββ
Directories
ββββββ ββββ βββ ββββ βββββ βββ βββββββββ ββββ βββ βββ ββββββββββββ
- βββββββββ β ββββ βββββ βββββ βββ βββββββ βββββββββ ββββ ββββββββ βββββ ββββββ ββββββββ βββ ββ βββββββββ βββββββ ββ βββββ βββββββ ββββββββ ββββββββ ββββββββββββββ βββββ βββββ ββββββββββ βββ ββββ βββββ ββββ βββ βββ βββ ββββββββββ
- ββββββββββββββ β ββββ βββββββββ ββ ββββββ βββ ββ ββββ βββββ ββββββββ βββ βββββ ββββββββββ ββββ ββββ βββ ββββ βββ βββ βββ βββββββββ βββββ βββββββ ββββ ββββββ
βββ ββββ βββ ββββββββββ βββ ββββββββββββ ββββββββββ βββββ βββββββ βββ ββ ββββββ βββ ββββββββ ββββ βββββ ββββββββββ βββ βββββ ββββββββββββ