You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/installation/installation.md
+29-26Lines changed: 29 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ rails new MyApp -T
27
27
28
28
which will create a new directory called `MyApp`. *Be sure to cd into the new directory when done.*
29
29
30
-
> The -T option prevents Rails from installing the minitest directories. Hyperstack uses the alternate rspec test framework for testing.
30
+
> The -T option prevents Rails from installing the minitest directories. Hyperstack uses the alternate rspec test framework for testing. If you are installing in an existing Rails app and already using mini-test that's okay.
31
31
32
32
## Adding the Hyperstack gem
33
33
@@ -71,16 +71,18 @@ At this point you're fully installed.
71
71
72
72
> **Note the first time you run you app it will take 1-2 minutes to compile all the system libraries.**
73
73
74
-
If you installed into a new rails app, you can run bundle exec foreman start
75
-
to start the server, and **App** will display on the top left hand side of the page. You will find the `App` component in the `app/hyperstack/components/app.rb` file. If you edit this file and save you should see the changes reflected in the browser.
74
+
If you installed into a new rails app, you can run
76
75
77
-
If you installed into an existing Rails apps, you can run bundle exec foreman start
78
-
to start the server, and your app should function exactly as it always has. From here, you'll need to start adding components and
79
-
and mounting them from either a view or a controller. See [How to add components](#adding-a-single-component-to-your-application) and [mount them](#mounting-components) for details.
76
+
`bundle exec foreman start`
77
+
78
+
to start the server, and **App** will display on the top left hand side of the page. You will find the `App` component in the `app/hyperstack/components/app.rb` file. If you edit this file and save it you will see the changes reflected immediately in the browser.
79
+
80
+
If you installed into an existing Rails app, your app should function exactly as it always has. You can also use `bundle exec foreman start` to start the server and the hotloader. From here, you'll need to start adding components and
81
+
and using them from either a view or a controller. See [How to add components](#adding-a-single-component-to-your-application) and [mount them](#mounting-components) for details.
80
82
81
83
## Summary of Installers and Generators
82
84
83
-
The following sections details the installers and generators you can use for for full control of the installation process. Details are also given on exactly what each installer and generator does if you want to manually apply the step or modify it to your needs.
85
+
The following sections details the installers and generators you can use for full control of the installation process. Details are also given on exactly what each installer and generator does if you want to manually apply the step or modify it to your needs.
84
86
85
87
```
86
88
bundle exec ... # for best results always use bundle exec!
@@ -92,11 +94,11 @@ rails hyperstack:install:skip-hyper-model # all but hyper-model
92
94
rails hyperstack:install:hotloader # just add the hotloader
93
95
rails hyperstack:install:skip-hotloader # skip the hotloader
94
96
95
-
# rails g is short for rails generate
96
-
97
97
rails g hyper:component CompName # adds a component named CompName
98
98
rails g hyper:router CompName # adds a router component
99
99
100
+
# Note: rails g ... is short for rails generate
101
+
100
102
# Both generators can take a list of components. Component names can be
101
103
# any legal Ruby class name. For example Module1::ComponentA will work.
102
104
@@ -112,18 +114,18 @@ rails g hyper:router CompName # adds a router component
112
114
# HyperComponent as the base class
113
115
# --no-help # don't add helper comments
114
116
115
-
# Note --add-route switch will not work if multiple components are generated.
117
+
# Note: the --add-route switch will not work if multiple components are generated.
116
118
117
-
# Note you can override the component base class for the entire application
119
+
# Note: you can override the component base class for the entire application
118
120
# by setting the Hyperstack `component_base_class` config option. See config options in the
119
121
# last section.
120
122
121
-
# Note that hyperstack:install is the same as running:
123
+
# Note: that hyperstack:install is the same as running:
122
124
123
125
rails g hyper:component App --add-route
124
126
rails hyperstack:install:webpack
125
127
rails hyperstack:install:hyper-model
126
-
rails hyperstack:install:hotloader-only
128
+
rails hyperstack:install:hotloader
127
129
```
128
130
129
131
## The `app/hyperstack` Directory
@@ -136,16 +138,17 @@ The following subdirectories are standard:
136
138
app/
137
139
...
138
140
hyperstack/
139
-
components/
140
-
models/
141
-
operations/
142
-
stores/
143
-
shared/
144
-
lib/
141
+
components/ <- runs on client/prerendering
142
+
models/ <- isomorphic
143
+
operations/ <- isomorphic
144
+
stores/ <- runs on client/prerendering
145
+
shared/ <- isomorphic
146
+
lib/ <- runs on client/prerendering
147
+
<- others are client/prerendering
145
148
```
146
149
147
150
The `models`, `operations`, and `shared` directories are *isomorphic*. That is the code will
148
-
be run on both the Rails server and on the client. All other directories (regardless of the name)
151
+
be run on both the Rails server, on the client and during prerendering. All other directories (regardless of the name)
149
152
will only be visible on the client and during prerendering.
150
153
151
154
These directories will be created as required by the installers and generators, or you can create them yourself as needed.
@@ -193,7 +196,7 @@ bundle exec rails g hyper:component Test --base-class=ApplicationComponent
193
196
194
197
Components render (or *mount*) other components in a tree-like fashion. You can mount the top level component of the tree in three different ways:
195
198
+ Render it from a controller using the `render_component` method
196
-
+ Mount it from within a view using the `react_component` view helper
199
+
+ Mount it from within a view using the `mount_component` view helper
197
200
+ Route to it from the Rails router
198
201
199
202
#### Rendering from a Controller Action
@@ -324,12 +327,12 @@ want to try webpacker - use the `hyperstack:install:webpack` task:
324
327
bundle exec rails hyperstack:install:webpack
325
328
```
326
329
This will do the following:
327
-
+ Insure yarn is installed
330
+
+ Insure node and yarn are installed
328
331
+ Install the Webpacker gem
329
332
+ Add the Hyperstack Webpacker manifests
330
333
+ Manage the Hyperstack dependencies with yarn
331
334
332
-
These steps are explained in detailed below.
335
+
You can manually perform the above steps following the instructions below.
333
336
334
337
#### Yarn and Node
335
338
@@ -342,9 +345,9 @@ Node can be installed following these instructions: [Node Install Instructions](
342
345
#### The Webpacker Gem
343
346
344
347
The Webpacker Gem uses a node package called Webpack to manage NPM assets instead of sprockets. So once you have webpacker installed you will want to bring in any javascript
345
-
libraries using Yarn, and let webpacker manage them instead of the including them as wrapped Ruby gems, or as files in the rails assets directory.
348
+
libraries using Yarn, and let webpacker manage them instead of including them as wrapped Ruby gems or as files in the rails assets directory.
346
349
347
-
To install webpacker manually add the `webpacker` gem to you gem file and run `bundle install` or simply run
350
+
To install webpacker manually add the `webpacker` gem to your gem file and run `bundle install` or simply run
348
351
```
349
352
bundle add webpacker
350
353
```
@@ -491,7 +494,7 @@ As your application develops you can begin defining more restrictive policies (o
491
494
> Note: The policy mechanism does not depend on [Pundit](https://github.com/varvet/pundit) but is compatible with it. You can add pundit style
492
495
policies for legacy parts of your system.
493
496
>
494
-
> For details on creating policies see the [policy documentation](https://github.com/hyperstack-org/hyperstack/blob/edge/docs/dsl-isomorphic/hyper-policy.md).
497
+
> For details on creating policies see the [policy documentation](https://hyperstack.org/edge/docs/dsl-isomorphic/policies).
0 commit comments