A boilerplate for static Atlassian Connect add-ons built on top of create-react-app
A boilerplate for static Jira / Confluence Atlassian Connect addons built on top of create-react-app.
Create Atlassian Connect addon just in a few minutes.
Follow instruction on the developer.atlassian.com
git clone https://github.com/leanconvert/create-react-static-atlassian-connect-addon.git <YOUR-ADDON-NAME>
cd <YOUR-ADDON-NAME>
rm -rf .git
npm i
You’ll need to have Node >= 6 on your machine.
Specify the following properties:
atlassian-connect-dev-instance-host
- name of the host of your Atlassian development instance (e.g. <YOUR-DEV-INSTANCE-NAME>.atlassian.net
)atlassian-connect-prod-instance-host
- name of the host of your atlassian production instance (e.g. <YOUR-PROD-INSTANCE-NAME>.atlassian.net
)atlassian-connect-addon-home
- URL to your addon on production (e.g. <YOUR-ADDON-NAME>.firebaseapp.com
)atlassian-addon.json
is an Atlassian Addon Descriptor - visit official Atlassian documentation for more info.
npm start
https://<YOUR-DEV-INSTANCE-NAME>.atlassian.net/plugins/servlet/upm
npm start
(path to the atlassian-connect.json
generated by ngrok)Now you are all set! Use all the benefits of the react-create-app
tooling developing an awesome Atlassian add-on.
atlassian-addon.json
is an Atlassian Addon Descriptor - visit official Atlassian documentation for more info.
react-scripts start
(see package.json
)REACT_APP_HOST
environment variable with your Atlassian development instance host URL specified in the "atlassian-connect-dev-instance-host"
in your package.json
filehttps://localhost:3000
public/atlassian-connect.json
's "baseUrl"
with the by ngrok generated URLpublic/atlassian-connect.json
's "links/config"
with the full public path to the atlassian-connect.json
file (e.g. https:/4c413a45.ngrok.io/atlassian-connect.json
)ngrok
) to the clipboard so you don't need to open the file to copy it yourself before installing in your Atlassian instancereact-scripts start
(see package.json
)REACT_APP_HOST
environment variable with your Atlassian production instance host URL specified in the atlassian-connect-prod-instance-host
in your package.json
filepublic/atlassian-connect.json
's "baseUrl"
with one specified in package.json
's "atlassian-connect-addon-home"
propertypublic/atlassian-connect.json
's "links/config"
with the full public path to the production atlassian-connect.json
file (e.g. https://myaddon.firebaseapp.com/atlassian-connect.json
)Contains helper functions to be used in pre-start.js
and pre-build.js
scripts.
atlassian-connect-dev-instance-host
- host URL of your Atlassian development instanceatlassian-connect-prod-instance-host
- host URL of your Atlassian production instanceatlassian-connect-addon-home
- where your addon will be hosted on production"copy-paste"
- used to add the development atlassian-connect.json
URL to the clipboard"ngrok"
- used to create a tunnel to the localhost for the development"start": "node scripts/pre-start.js & react-scripts start"
- runs pre-start.js
in addition to react-scripts start
"build": "node scripts/pre-build.js & react-scripts build"
- runs pre-build.js
in addition to react-scripts build
{
"name": "create-react-app-atlassian-connect-addon",
"version": "0.1.0",
"private": true,
"atlassian-connect-dev-instance-host": "dev-example.atlassian.net",
"atlassian-connect-prod-instance-host": "example.atlassian.net",
"atlassian-connect-addon-home": "https://example.com/",
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"copy-paste": "^1.3.0",
"ngrok": "^2.2.10",
"react-scripts": "1.0.7"
},
"scripts": {
"start": "node scripts/pre-start.js & react-scripts start",
"build": "node scripts/pre-build.js & react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Atlassian Addon</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
See https://developer.atlassian.com/static/connect/docs/latest/concepts/javascript-api.html#js-client-lib for more details on what this script does and why it is required.
-->
<script data-options="sizeToParent:true;" src="%REACT_APP_HOST%/atlassian-connect/all.js"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>