README.md

APEX Front-End Boost

• What APEX Front-End Boost is
  • What APEX Front-End Boost does
  • How APEX Front-End Boost helps you
  • Other benefits
• Project Sponsors
• System Requirements
• Install
  • via Git
  • via npm
• Upgrade
  • via Git
  • via npm
• Configuration
• APEX Application Setup
• Run
• Usage
• Features
• Changelog

What APEX Front-End Boost is

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

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.

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)
• Minifies images seamlessly (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.

Other benefits

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

Having Cross Origin Sharing Requests issues? See CORS documentation.

Install

• Open the command line
• Go to the APEX Front-End Boost directory

via Git

git clone https://github.com/OraOpenSource/apex-frontend-boost.git
cd apex-frontend-boost		
npm install

via npm

npm install apex-frontend-boost

Note: installing via npm automatically creates a \node_modules\ directory and installs APEX Front-End Boost within. Please use only if you understand what that entails, otherwise use the Git method.

Having problems installing on Windows? See documentation.

Having problems installing on Linux? See documentation.

Upgrade

• Open the command line
• Go to your APEX Front-End Boost directory

via Git

git fetch origin
git reset --hard origin/master
npm install

via npm

npm install apex-frontend-boost

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

On the command line:

npm start -- --project=yourProjectName

or use Windows shortcut:

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

or use Linux/OS X shortcut:

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

Note: If you encounter errors while executing the steps above, you may need to use an elevated command line (run as administrator).

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

Having problems regarding Self-Signed SSL Browser Warning? See documentation.

Features

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

See features examples.

Changelog

See changelog.

Project Team

• Vincent Morneau
• Martin Giffy D'Souza