16Apr
APEX Nitro tip 2 Command Line
By: Marc-André Brasseur On: April 16, 2018 In: APEX Developer Solutions Comments: 2

For the past month and a half, we’ve been feeding our Twitter community (see @InsumSolutions)  APEX Nitro tips. How nice of us. You are welcome, world!

These quickly digestible tips are to help you appreciate what a fabulous front-end development tool APEX Nitro is for Oracle Application Express (APEX), which is, of course, an awesome Rapid Application Development tool for Oracle Database users. APEX Nitro is quickly gaining popularity in the tightly-knit and ridiculously enthusiastic APEX community. It takes your front-end development to the next level by reducing mundane tasks, boosting performance, modularizing code, enhancing teamwork, and more.

To Save You Time

Now, since we didn’t want to force you to scroll through our numerous tweets, we put all these tips in an easily accessible single-entry point in the ever-popular blog format.

A tool that runs in the background

Ok, so back to APEX Nitro.  It’s a command line tool that runs in the background while you develop an APEX app.
While running, it watches for local static file (e.g. `js`, `css`) modifications inside of a given directory, compiles them into a better format and sends 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.

APEX Nitro also makes front-end development easier by establishing clear guidelines and by enforcing good programming practices. It starts by streamlining CSS and JavaScript and by entirely eliminating the (bad) practice of inline coding, so your APEX application benefits from an efficient 100% file-based approach.
APEX Nitro is available on GitHub.

And Now, the APEX Nitro tips

And without further ado, here is the series of tips that we provided:

Tip #1: Prerequisites & installation. Node.js is required to get APEX Nitro. Once Node.js is installed, simply execute the following on your command line and you are up and running

APEX Nitro tip 1 Prerequisites

Tip #2: Using the command line #APEXNitro has a powerful CLI (command line interface). Fire it up by executing the following command: apex-nitro Use the “help” command to read more about a specific feature.

APEX Nitro tip 2 Command Line

Tip #3: Project Configuration Before you can use #APEXNitro, you need to configure a project. Executing the following on your command line: apex-nitro config <myprojectname> A browser tab will open and follow the steps.

APEX Nitro tip 3 Configuration image

APEX Nitro tip 3 Project configuration image B

Tip #4: Application Setup Before launching #APEXNitro, it needs to connect to an #orclapex app. An Application Process enables the connection: apex_application.g_flow_images := owa_util.get_cgi_env(‘APEX-Nitro’)

APEX Nitro tip 4 Application setup

Tip #5: Launch your project After you’ve configured APEX Nitro project (tip #3) & your #orclapex app (tip #4), you are ready to go. Execute this on your command line: apex-nitro launch <myprojectname>

APEX Nitro top 5 Publishing files

Tip #6: Understanding Browser Synchronization When you have launched APEX Nitro, files from your computer are synchronized with your #orclapex application in real-time.
In a short time, we’ll also be officially launching our APEX Nitro Service offer.

Tip #7: Publishing files in APEX Thanks to @oraclesqlcl, APEX Nitro allows to upload a whole local directory to APEX Shared Components. Execute this on your command line: apex-nitro publish <myprojectname>

APEX Nitro tip 7 Publishing Files-Images

Tip #8: JavaScript & CSS File Minification APEX Nitro automatically produces a minified version of your code. The idea is to remove all unnecessary white spaces in a static file. Smaller file size = faster page load. Read more github.com/OraOpenSource/… #orclapex

Apex Nitro

Tip #9: JavaScript & CSS File Concatenation

APEX Nitro can concatenate multiple files into one. This makes file maintenance easier and you benefit from referencing a single file in #orclapex.

Nitro tip 9_JavaScript and CSS File Concatination

Tip #10: Autofixer

Some CSS properties require complex knowledge of browser vendor prefix “display: -webkit-box;”? With APEX Nitro, the developer doesn’t need to remember when they apply.

Nitro tip 10 Autofixer

 

Continuing with the next batch

Tip #11: Dealing with error handling

It’s very easy to introduce syntax errors into your JavaScript or CSS because these languages are not compiled. APEX Nitro will get you ahead of the curve with error notifications.

Nitro tip 11 dealing with error handling 1

Nitro tip 11 dealing with error handling 2

Nitro tip 11 dealing with error handling 3

APEX Nitro Tip #12: CSS Preprocessing

Do you find CSS to be lacking compared to other languages? APEX Nitro comes with #SASS and #LESS support. Give your CSS some love with variables, nesting and functions. Read more github.com/OraOpenSource/…

APEX Nitro Tip #13: External device synchronization

You can use APEX Nitro to enhance responsive design and cross-platform development. Simply enable this option in your project config (screenshot1) and use the external URL (screenshot2).

Nitro Tip 13 External Device Synchronization 1

Nitro Tip 13 External Device Synchronization 2

APEX Nitro Tip #14: Developing an APEX Plugin

A lot of #orclapex plugins are achieved by bundling a JavaScript / CSS library with an APEX item / region / DA. APEX Nitro will take your plugin to the next level.

More on this: https://github.com/OraOpenSource/apex-nitro/blob/master/docs/setup.md#apex-plugin-development

Conclusion

So there you have them. If you’d like to learn more about APEX Nitro or other Insum products and services. Contact us!

Read more about what inspired Vincent Morneau to create APEX Nitro here!

Share this:
Share

2 Comments:

    • Ashwin
    • November 10, 2018
    • Reply

    Thanks Alot Vincent. Amazing Stuff. I have few questions in using Apex Nitro locally. What is the url where I can post my question?

      • Marc Ruel
      • November 15, 2018
      • Reply

      Hi Ashwin, You can ask you question right here in the comments section. Vincent will be happy to answer!

Leave reply:

Your email address will not be published. Required fields are marked *