1 | <h1 align="center">
|
2 | <br>
|
3 | <img src="https://raw.githubusercontent.com/OraOpenSource/apex-nitro/master/docs/img/apex-nitro-logo.png" alt="APEX Nitro" width="600">
|
4 | <br>
|
5 | <br>
|
6 | </h1>
|
7 |
|
8 | > Your essential APEX companion
|
9 |
|
10 | [![npm](https://img.shields.io/npm/v/apex-nitro.svg)](https://www.npmjs.com/package/apex-nitro) [![Build Status](https://travis-ci.org/OraOpenSource/apex-nitro.svg?branch=master)](https://travis-ci.org/OraOpenSource/apex-nitro) [![Dependency Status](https://david-dm.org/OraOpenSource/apex-nitro.svg)](https://david-dm.org/OraOpenSource/apex-nitro) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
|
11 |
|
12 | APEX developers of all skills inevitably have to write JavaScript and CSS. Do you feel the learning curve to be steep? That is 100% normal. Barely any guidelines exist within APEX to learn the fundamentals of these languages. Let’s fix that.
|
13 |
|
14 | APEX Nitro takes your front-end development to the next level by reducing mundane tasks, boosting performance, modularizing code, enhancing teamwork and more.
|
15 |
|
16 | ## What APEX Nitro is
|
17 | APEX Nitro is a tool that runs in the background while you develop an APEX application, watching for local static file (e.g. `js`, `css`) modifications inside of a given directory, compiling them into a better format and sending them back to your APEX application seamlessly. It makes front-end coding faster by syncing these local files to your APEX application in real-time.
|
18 |
|
19 | APEX Nitro also establishes clear front-end guidelines and enforces good programming practices. It streamlines JavaScript and CSS by eliminating the *bad* practice of inline coding, so your APEX application benefits from an efficient 100% file-based approach.
|
20 |
|
21 | ### What APEX Nitro does
|
22 | - Browser Synchronization
|
23 | - File Minification
|
24 | - File Concatenation
|
25 | - Source Mapping
|
26 | - Error Handling
|
27 | - CSS Preprocessing
|
28 | - CSS Auto-Prefixer
|
29 | - Theme Roller Customization
|
30 |
|
31 | For more info on the features, [read the documentation](/docs/features.md).
|
32 |
|
33 | ### Benefits
|
34 | - Reduce development time
|
35 | - Reduce mundane tasks
|
36 | - Increase maintainability
|
37 | - Better modularization
|
38 | - Performance boost
|
39 | - Enhances teamwork
|
40 | - Makes responsive development easier
|
41 |
|
42 | For more info on the benefits, [read the documentation](/docs/benefits.md).
|
43 |
|
44 | ## Quickstart
|
45 | This following sections show the easiest way to get started with APEX Nitro.
|
46 |
|
47 | [Go to the full documentation](/docs/) to read more about using APEX Nitro.
|
48 |
|
49 | ### System Requirements
|
50 | - [Node.js](https://nodejs.org)
|
51 | - [SQLcl](http://www.oracle.com/technetwork/developer-tools/sqlcl/overview/index.html) *>= v17.2 (optional, used for the publish feature)*
|
52 |
|
53 | ### Install
|
54 | Execute this command to install APEX Nitro:
|
55 | ```
|
56 | npm install -g apex-nitro
|
57 | ```
|
58 |
|
59 | *Getting errors? Make sure to read the [troubleshooting section](/docs/troubleshooting.md).*
|
60 |
|
61 | ### Project Configuration
|
62 | Execute this command to configure an APEX Nitro project:
|
63 | ```
|
64 | apex-nitro config <project>
|
65 | ```
|
66 |
|
67 | A new browser tab will open and you can simply fill the form:
|
68 |
|
69 | ![](/docs/img/command-config.png)
|
70 |
|
71 | *You can read about the different options by hovering the help icons.*
|
72 |
|
73 | ### APEX Application Setup
|
74 | APEX Nitro requires to make one small modification to your APEX application to allow real-time synchronization. Head to Shared Components, under Application Processes and create a new application process with the following attributes:
|
75 |
|
76 | Attribute | Value
|
77 | --- | ---
|
78 | Name | `APEX Nitro`
|
79 | Sequence | `-999`
|
80 | Process Point | `On Load: Before Header (page template header)`
|
81 | Condition | `owa_util.get_cgi_env('APEX-Nitro') is not null`
|
82 | Source (`PL/SQL`) | `apex_application.g_flow_images := owa_util.get_cgi_env('APEX-Nitro');`
|
83 |
|
84 | ![](/docs/img/setup-application-process.png)
|
85 |
|
86 | [Read the documentation](/docs/setup.md) for more information.
|
87 |
|
88 | ### Launch
|
89 | ```
|
90 | apex-nitro launch <project>
|
91 | ```
|
92 |
|
93 | ![](/docs/img/command-launch.png)
|
94 |
|
95 | ### Usage
|
96 | After APEX Nitro is launched, create, edit or delete any file within your project's source folder. Example `/my_project/src/`:
|
97 | ```
|
98 | |-/src/
|
99 | |-css
|
100 | |-app.css
|
101 | |-js
|
102 | |-app.js
|
103 | ```
|
104 |
|
105 | APEX Nitro will compile your files to a new folder of your choice. Example `/my_project/dist/`.
|
106 | APEX Nitro will then synchronize the compiled folder (`/my_project/dist/`) to your APEX application.
|
107 |
|
108 | [**Read more about usage.**](/docs/usage.md)
|
109 | [**See common patterns.**](/docs/patterns.md)
|
110 | [**Try our examples.**](/examples/)
|
111 |
|
112 | ### Publish to APEX
|
113 | When you are done developing, you can upload your files to the *Shared Components* in APEX.
|
114 |
|
115 | ```
|
116 | apex-nitro publish <project>
|
117 | ```
|
118 |
|
119 | ![](/docs/img/command-publish.png)
|
120 |
|
121 | This feature is optional. [Read more](/docs/publish.md) to get SQLcl running on your environment.
|
122 |
|
123 | ## Troubleshoot
|
124 | [Read more about common issues.](/docs/troubleshooting.md)
|
125 |
|
126 | ## Changelog
|
127 | [See changelog.](changelog.md)
|
128 |
|
129 | ## Project Sponsors
|
130 | [Insum Solutions](http://insum.ca/)
|
131 |
|
132 | ## Team
|
133 | - [Vincent Morneau](https://github.com/vincentmorneau)
|
134 | - [Martin Giffy D'Souza](https://github.com/martindsouza)
|