The fastest way to get started with Scroll Viewport theme development is to use viewport-uploader. The viewport-uploader package is a node module to upload local resources to the Scroll Viewport app inside Atlassian Confluence Server. For example, it can be used as part of a webpack build process to automate building and uploading a theme.
Please make sure you have a installed and the necessary user permissions to edit page contents.
Create the file .vpconfig.json in your home directory and add your target environments similar to the example below.
Note: The identifier (in the below case "DEV") must equal the environment name in the envName property.
// ~/.vpconfig.json
{
"DEV": {
"envName": "DEV",
"confluenceBaseUrl": "http://localhost:8090/confluence",
"username": "admin",
"password": "admin",
"spaceKey": ""
},
"PROD": {
"envName": "PROD",
"confluenceBaseUrl": "https://example.com/confluence",
"username": "admin",
"password": "admin",
"spaceKey": "prodspace"
}
}
CODE
Properties | Types | Description |
|---|
envName | String | Name of target environment. This should also be the name of the identifier. |
confluenceBaseUrl | String | URL of Confluence Server. It may not contain a trailing slash. |
username | String | Username for Confluence Server |
password | String | Password for Confluence Server |
spaceKey | String | Space key (empty for global). It may contain up to 225 alphanumeric characters. Scroll Viewport treats space keys case-sensitive even though for Confluence they are case-insensitive. If you provide the wrong case, the upload will fail without a helpful error message. |
This example contains a basic theme setup, including a page.vm for the templating, styles and scripts to edit functionality and appearance of your theme and a webpack configuration to bundle and upload the code.
git clone git@github.com:K15t/viewport-uploader.git
cd example/basic
CODE
Start development mode with automatic rebuilds. Once the webpack build has finished, the theme will be uploaded to the specified Confluence environment.
VPRT_ENV=DEV yarn watch
BASH
Build and upload a development build (e.g contains source maps) to your Confluence instance.
VPRT_ENV=DEV yarn upload:dev
BASH
Specify a PROD environment in your ~/.vpconfig.json first.
VPRT_ENV=PROD yarn upload:prod
BASH
The configuration for the upload can be found in the webpack.config.js. For further information on how the upload works see the Viewport Uploader API Documentation.
We recommend that only users with advanced webpack knowledge should make changes to the webpack configuration.
If you would like to create your own webpack configuration or use a different bundler in your CI, use the viewport-uploader package by installing it via yarn or NPM.
yarn add @k15t/viewport-uploader
CODE
npm i @k15t/viewport-uploader
CODE
To learn more about the configuration and usage of viewport-uploader please visit the API Documentation on Github.
