@@ -5,5 +5,322 @@ Tendrl Frontend is a graphical user interface for [Tendrl]
55web-based storage management platform, using RESTFul API
66to communicate with Tendrl API server.
77
8- ## Documentation
9- For more information, please check out the [ project documentation] ( ./docs/ )
8+ # Tendrl Frontend: Development #
9+
10+ Tendrl frontend is a static webapp, built from a Node.js project. This document
11+ details how to contribute to the project as a developer.
12+
13+ ## Prerequisites ##
14+
15+ ### Required skills/expertise ###
16+
17+ * Experience of webapplication development
18+ * Understanding of JavaScript, CSS, HTML
19+ * Familiarity with Node.js & npm
20+ * Familiarity with angularjs
21+
22+ ### Setting up workstation ###
23+
24+ Make sure you have ` git ` , ` nodejs ` , ` npm ` installed in your system, along with
25+ your favorite code-editor & browser with devtools (latest Mozilla Firefox or
26+ Google Chrome recommended).
27+
28+ Follow your platform's own process to set these up. On a Fedora PC, you'll use
29+
30+ ``` sh
31+ $ sudo dnf install -y git nodejs npm
32+ ```
33+
34+ ## Obtaining the source ##
35+
36+ Fork the https://github.com/Tendrl/tendrl_frontend[upstream repo] to your own
37+ GitHub account.
38+
39+ * This is required.*
40+
41+ You will be working/making changes on your own repo, and create
42+ https://help.github.com/articles/about-pull-requests/[pull requests] to submit
43+ changes to the upstream. Upon peer-review, those changes will be merged, if
44+ everything went well. You should never directly push to the upstream, even if
45+ you have write access.
46+
47+ Once forked, you can clone the repo to your workstation for development:
48+
49+ ``` sh
50+ $ git clone git@github.com:GitHubUsername/tendrl_frontend.git
51+ $ cd tendrl_frontend
52+ ```
53+
54+ ### Reaching out ###
55+
56+ To communicate with the existing developers, ask for help/clarifications etc.
57+ send an email to tendrl-devel@redhat.com prepending ` [Frontend] ` in the subject
58+ line. This is the mailing list for Tendrl developers, and to be in the loop you
59+ should subscribe here: https://www.redhat.com/mailman/listinfo/tendrl-devel .
60+
61+ ## Contributing ##
62+
63+ ### Coding guidelines ###
64+
65+ Follow standard frontend development best practices to work on the code.
66+ Consult http://taitems.github.io/Front-End-Development-Guidelines/[this ] and
67+ https://isobar-idev.github.io/code-standards/[this ] consolidated guides for
68+ further details.
69+
70+ In case of confusion or conflict of opinions, please
71+ https://github.com/Tendrl/tendrl_frontend/issues/new[create an issue] to start
72+ the discussion.
73+
74+ ### Building from source ###
75+
76+ Within the git cloned source directory, run the following commands to build the
77+ app. You should be able to build from the source successfully before making any
78+ changes to the source.
79+
80+
81+ ``` sh
82+ $ sudo npm install -g gulp
83+ $ npm install
84+ $ gulp
85+ ```
86+
87+ Upon success of all the steps, you should have the build artifacts in ` ./dist/ `
88+ subdirectory.
89+
90+ You can also run gulp dev command. It will add watchers to all files and
91+ accordingly dist folder will be updated continuosly.
92+
93+ ### Running a dev-server ###
94+
95+ To run and test the build locally, you can use various static file server over
96+ HTTP. We recommend using ` http-server ` module, however, httpd/nginx etc can as
97+ well be used.
98+
99+
100+ ``` sh
101+ $ npm install -g http-server
102+ $ cd dist
103+ $ http-server # starts the web-server with doc-root as `pwd`
104+ ```
105+
106+ The advantage of using ` http-server ` module is that, it's easy to use it with
107+ another existing server which can handle the request, which the test server is
108+ incapable of serving.
109+
110+
111+ ``` sh
112+ $ http-server -P http://production.server/
113+ ```
114+
115+ You should be able to browse the app, running on test server by visiting
116+ http://127.0.0.1:8080 from your browser.
117+
118+ ### Making changes ###
119+
120+ * Make sure to pull from ` upstream/master ` before starting to work on something
121+ * Preferably create a branch, after the pull to work on a specific issue
122+ * Fix one thing per commit - neither more, nor less
123+ * Fixing an issue may require a bunch of commits - that's okay
124+ * Give meaningful commit messages, if necessary add descriptions
125+ * Signing off code isn't mandatory but is recommended
126+ * Do not introduce different line-ending conventions in your code (especially
127+ if using non-* nix systems)
128+ * Comment/document your code in a way, any new contributor can understand the
129+ concept behind the implementation
130+ * Make sure to write tests for the feature you add
131+ * Make sure not to break tests of other features while working on one
132+
133+ ### Submitting pull requests ###
134+
135+ Once you've successfully made some changes, built, ran, tested and pushed to
136+ your GitHub remote - then you should submit a pull request for the changes to
137+ be applied on the upstream repo.
138+
139+ Use https://help.github.com/articles/about-pull-requests/[GitHub's interface]
140+ to create new pull requests. Once submitted, the code will go through some
141+ automated tests, integration and peer-reviews.
142+
143+ You might be asked for clarification or requested to update your code depending
144+ on the review. You can append new commits to fix those nits on the same branch
145+ of your repo, and the pull request should be automatically updated to reflect
146+ those changes.
147+
148+ Once approved, your code will be merged with the upstream.
149+
150+ Rejoice!
151+
152+ ## Next steps ##
153+
154+ If you enjoyed contributing to Tendrl frontend, pick up another issue. If you
155+ need help, reach out to us on mailing list. If you've successfully submitted a
156+ few changes, feel free to ask to be a member of the GitHub org.
157+
158+ _ May the source be with you._
159+
160+
161+
162+ # Tendrl Frontend: Deployment #
163+
164+ Tendrl frontend is a static webapp, built from a Node.js project. This document
165+ details how to build from the source, and then how to configure the webhost to
166+ serve the app.
167+
168+ ## Basic Requirements ##
169+
170+ ### Minimum System Requirements ###
171+
172+ This is the bare minimal requirements for a VM to be able to run the Tendrl
173+ frontend server. However, for performance and efficiency, more resources would
174+ be good to avail:
175+
176+ * * CPU:* 1 core, 1 thread
177+ * * RAM:* 512 MiB
178+ * * Storage:* 10GiB
179+ * * OS:* RHEL 7.x or similar
180+
181+ ### Package dependencies ###
182+
183+ * httpd or, nginx
184+
185+ ### Build dependencies ###
186+
187+ * Only required if building from source:*
188+
189+ Installed with distro's package manager: ` git ` , ` nodejs ` , ` npm ` +
190+ Installed with ` npm ` : ` gulp ` , <add more >
191+
192+ ## How to Deploy ##
193+
194+ To deploy Tendrl frontend, you may want to build from source, or install the
195+ package.
196+
197+ * * If installing from package* , skip the "Building from source" section
198+ * * If building from source* , likewise, skip "Installing from repo" section
199+
200+ TIP: This entire process should be handled by a bootstrapping script in future.
201+
202+ NOTE: _ The commands listed here assumes latest version of Fedora in use as the
203+ host OS, use proper substitution if your environment differ._
204+
205+ ### Step 1: Preparing host ###
206+
207+ #### If you're on * Fedora* ####
208+ Nothing to do here, jump to next step.
209+
210+ #### If you're on * RHEL* ####
211+ You need to register and activate your subscription with customer portal ID to
212+ add repos and install packages. _ @TODO: process details & guides._
213+
214+ #### If you're on * CentOS* ####
215+ You need to enable EPEL repo with ` yum install epel-release `
216+
217+ #### If you're on * Other Distro* ####
218+ Follow along the next steps, and depending on distros, some processes, commands
219+ and package names may vary.
220+
221+ ### Step 2: Building from source ###
222+
223+ First we need the essential packages
224+
225+ ``` sh
226+ $ sudo dnf install -y git nodejs npm
227+ ```
228+
229+ Then we need the frontend source
230+
231+ ``` sh
232+ $ git clone https://github.com/Tendrl/tendrl_frontend.git
233+ $ cd tendrl_frontend
234+ ```
235+
236+ Next we will install the dependencies for the package to build
237+
238+ ``` sh
239+ $ sudo npm install -g gulp
240+ $ npm install
241+ ```
242+
243+ Lastly, the build... which is an one step process, using gulp to automate the
244+ underlying steps
245+
246+ ``` sh
247+ $ gulp
248+ ```
249+
250+ Once gulp finishes compiling, the build artifacts will be available in the
251+ ` dist ` subdirectory within the source path.
252+
253+ ### Step 3: Installing from repo ###
254+
255+ _ @TODO: content to be added when package details are available._
256+
257+ ### Step 4: Serving the application ###
258+
259+ In this step, we take the build artifacts and serve them as web contents.
260+
261+ _ @TODO: if installed from package, depending on which all steps are covered in
262+ the process, this section might need updating._
263+
264+ ---
265+
266+ #### Configure firewall ####
267+
268+ For the server to be able to accept and serve external http requests, we need
269+ to configure the firewall.
270+
271+ This isn't required to be the first step (and can be done after installing the
272+ webserver), however, this is a common step for whatever webserver we choose to
273+ go with up next.
274+
275+ ``` sh
276+ $ sudo firewall-cmd --permanent --zone=public --add-service=http
277+ $ sudo firewall-cmd --reload
278+ ```
279+
280+ ---
281+
282+ #### Serve using nginx ####
283+
284+ First, let's install and start ` nginx `
285+
286+ ``` sh
287+ $ sudo dnf install -y nginx
288+ $ sudo systemctl start nginx
289+ ```
290+
291+ At this point, you should be able to see the default nginx webpage, by visiting
292+ ` http://<hostname.or.ip.address>/ ` from your browser.
293+
294+ Now, to serve the app content (instead of the default page) you can take either
295+ of the 2 following ways (among many other possible, less desirable ways):
296+
297+ . * Easy way:* copy over app contents to nginx's default webroot
298+ .. Backup the default pages: ` $ sudo mv /usr/share/nginx/html /usr/share/nginx/default `
299+ .. Copy over the app contents: ` $ cp -r <source-path>/dist /usr/share/nginx/html `
300+ . * Right way:* follow along https://www.nginx.com/resources/admin-guide/serving-static-content/[nginx's official documentation] on how to configure the server for serving static webapp.
301+
302+ ---
303+
304+ #### Serve using httpd ####
305+
306+ Again, let's install and start Apache first
307+
308+ ``` sh
309+ $ sudo dnf install -y httpd
310+ $ sudo systemctl start httpd
311+ ```
312+
313+ At this point, you should be able to see the default httpd webpage, by visiting
314+ ` http://<hostname.or.ip.address>/ ` from your browser.
315+
316+ Now, to serve the app content (instead of the default page) you can take either
317+ of the 2 following ways (among many other possible, less desirable ways):
318+
319+ . * Easy way:* copy over app contents to httpd's default webroot: ` $ cp -r <source-path>/dist/* /var/www/html/ `
320+ . * Right way:* follow along https://httpd.apache.org/docs/trunk/configuring.html[Apache's official documentation] on how to configure the server for serving static webapp.
321+
322+ ---
323+
324+ If everything went well, then browsing ` http://<hostname.or.ip.address>/ ` from
325+ your web-browser should give you Tendrl's frontend landing page. * Congrats!*
326+
0 commit comments