APEX Front-End Boost

APEX Front-End Boost makes coding faster, easier, and prettier. This productivity tool helps you work with static files (js, css, images, etc.) more efficiently within an APEX application.

APEX Front-End Boost is a personal local web server that hosts and distributes your files to your APEX application.

What APEX Front-End Boost does

• Minifies js and css.
• Generates js and css sourcemaps.
• Adds css vendor prefixes.
• Concatenates js and css. (optional)
• Parses scss and less to css. (optional)
• Generates APEX Theme Roller configuration. (optional)
• Transforms css to RTL format. (optional)
• Adds a standardized header comment block to js and css files. (optional)

How APEX Front-End Boost helps you

• Cut down on front-end development time.
• Enhance your application performance due to smaller file sizes.
• Keep coding in your favorite code editor, without having to constantly upload anything to APEX or a web server.
• Stop manual refresh of your browser to get js and css modification.
• Stop affecting other developers. Any development done within APEX Front-End Boost affects you and only you.
• Be notified of js and css errors as you save.

It makes responsive development easier by synchronizing multiple devices together. Your desktop, tablet and mobile device will imitate each others actions (scrolling, clicking, typing) as long as you've got APEX Front-End Boost running.

It eliminates the need for refreshing the browser. As soon as you save your code in the text editor, you get automatic code injection / reloading in the browser.

Project Sponsors

Thanks to Insum Solutions for sponsoring this project.

System Requirements

• Node.js 4.4 (or more)
• Oracle APEX 5 (or more) for Application Setup Option 1
• Oracle APEX 4-5 (or more) for Application Setup Option 2

Install

On the command line:

npm install apex-frontend-boost

Having problems installing on Windows? See documentation.

Having problems installing on Linux? See documentation.

Configuration

You need to configure APEX Front-End Boost for your project(s). See documentation.

APEX Application Setup

There are two options to setup your application:

• Option 1) Standard
  • 1 Build Option
  • 1 Application Process
• Option 2) Custom Application Item
  • 1 Build Option
  • 1 Application Item
  • 2 Application Processes

Review the APEX Setup docs to choose the most appropriate option for your project.

Run

npm start -- --project=yourProjectName

Running on Windows?

• Launch apex-frontend-boost.bat
• Enter project name

Running on Linux/OSx?

• Execute ./apex-frontend-boost.sh
• Enter project name

Usage

From the src folder you can create, edit or delete any files in:

|-/src/
	|-scss
	|-less
    |-css
    |-img
    |-js
    |-lib

APEX Front-End Boost will automatically compile your files to this folder structure:

|-/dist/
    |-css
    |-img
    |-js
    |-lib

Self-Signed SSL Browser Warning

See documentation.

Features

• Browsersync
• Sass
• Less
• Autoprefixer
• JSHint
• UglifyJS
• Sourcemaps
• Header
• RTLCSS
• More...

See features examples.

Changelog

See changelog.

Project Team

• Vincent Morneau
• Martin Giffy D'Souza