# Speed up your APEX development using Session Overrides and VS Code

# What is Session Overrides

> Session Overrides are a convenient way for developers to quickly change values in the session that the APEX engine is typically responsible for, like File Paths, Additional Files and Globalization Attributes.

Here is the [official documentation](https://docs.oracle.com/en/database/oracle/apex/22.1/htmdb/managing-session-state.html#GUID-2547369E-7A20-4818-948F-018CCAAF2995).

> Okay, but how do Session Overrides speed up the development process?

They speed it up because it allows using a local JS or CSS files on your machine which are referenced in the app. This way you don't have to go to the Shared Components and edit your Workspace or Application files before you can see the results in the app. Very convenient feature - once you start to use it, you'll never look back. Small detail - it's available since [APEX version 22.1](https://apex.oracle.com/en/platform/features/whats-new-221/)

# Visual Studio Code setup

1. Install Visual Studio Code (VS Code) if you don't already have it installed - visit the [official website](https://code.visualstudio.com/)

2. Install "Live Server" extension
  - Open VS Code and navigate to the `Extensions` menu item on the left. 
  - Search for the `Live Server` extension. 
  - Click on it, as shown in the screenshot. The extension page will open. 
  - Click Install so you add the extension to your VS Code instance.

 ![VS Code Extensions menu](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309300586/oWVTWy4kT.png align="center")

 ![Live Server Extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309400327/gB-f2514i.png align="center")

3. Create a new folder on your machine (`Localfiles` for example) and two files we will be using in our APEX application - `apex_session_override.js` and `apex_session_override.css` 

 ![Localfiles folder on your machine](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309429931/OeLTpexUh.png align="center")

4. Add `New Folder` in VS Code
  - Going back to VS Code, open the `Explorer` (first item in the menu)
  - Click on `Open Folder` and select the `Localfiles` folder you have already created
  - Confirm that you trust the files in this folder (obviously)
  - After confirming, select the `Go Live` option in the bottom right of VS Code editor
  - It will start a `localhost` server on your machine with both files listed and accessible at `http://127.0.0.1:5500/`

 ![Open Folder](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309527340/o2K9qjVOk.png align="center")

 ![Start the local server](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309471525/-8T_uATDI.png align="center")

# APEX setup

1. Enable `Session Overrides` in your APEX Application
  - Make sure you are logged into the APEX Builder, so that `APEX Dev Toolbar` is available
  - Select `Session` / `Session Overrides`
  - Click the toggle to enable them and add the URLs for the CSS and JS files as shown
  - Click `Save` to confirm your changes
  - Both files should now be available on your page. To validate that, you can use the Browser Dev Tools, as shown 

 ![Enable Session Overrides in APEX](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309885254/IapMG3ojm.png align="center")

 ![Verifying files are included on the page](https://cdn.hashnode.com/res/hashnode/image/upload/v1666309909443/X7UjAeSmj.png align="center")

# Test your setup

1. To test the Session Overrides, create a Page Item (Button), using the following settings:
2. Update the CSS file we already created with some style for the page button
3. Save the document and refresh the page
4. Enjoy the changes

![Sample Button on your APEX page](https://cdn.hashnode.com/res/hashnode/image/upload/v1666310401959/7SjZLZ_xO.png align="center")

![Sample CSS file](https://cdn.hashnode.com/res/hashnode/image/upload/v1666310426575/3lqjY3EPV.png align="center")

```css
:root {
    --pm-button-background-color: #cb3d06;
    --pm-button-state-background-color: #a43205;
}

.pm_custom_button {
    --a-button-background-color: var(--pm-button-background-color);
}

.pm_custom_button:hover {
    --a-button-state-background-color: var(--pm-button-state-background-color);
}
```
# Follow me

> Liked that post? Follow me on Twitter and LinkedIn!

🔷 [@plamen_9](twitter.com/plamen_9) on Twitter <br>
🔷 [Plamen Mushkov](linkedin.com/in/plamen-mushkov/) on LinkedIn