# Permanent URL

Any specific version of LiveCodes app can be accessed through the permanent unique URL:

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import CodeBlock from '@theme/CodeBlock';
import { AppVersion } from '../../src/components/Versions.tsx';

export const AppVersionLink = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
    <a href={`https://v${siteConfig.customFields.appVersion}.livecodes.io`} target="\_blank">
      https://v{siteConfig.customFields.appVersion}.livecodes.io
    </a>
  );
};

`{version}.livecodes.io`
(e.g. <AppVersionLink />)

This allows [embedded playgrounds](./embeds.html.md) to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions.

Permanent URL is used by default in the code generated by the [embed screen UI](./embeds.html.md).
It is also available when [sharing](./share.html.md) projects from the share screen.

The [SDK](../sdk/index.html.md) embed option [`appUrl`](../sdk/js-ts.html.md)#appurl) allows specifying the URL for the app to be used.
In addition, it is always a good practice to use a specific version of the SDK.

Example:

export const Code = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
    <CodeBlock title="index.html" language="html">
      {`<div id="container"></div>\n<script type="module">
${'  '}// specific SDK version
// highlight-next-line
${'  '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n
${'  '}createPlayground('#container', {
${'    '}// App permanent URL
// highlight-next-line
${'    '}appUrl: 'https://v${siteConfig.customFields.appVersion}.livecodes.io',
${'    '}template: 'react',
${'  '}});
</script>`}
    </CodeBlock>
  );
};

<Code />

## Get Permanent URL

You can get the permanent URL for the app from the [About screen](pathname:///../?screen=about) (Help menu → About). By default, the code generated in the [Embed screen](./embeds.html.md)#app-embed-screen) uses permanent URL.
Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this:

export const GetPermanentUrl = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
    <CodeBlock language="js">
      {`await livecodes.exec('showVersion');\n
// output:
// App Version: ${siteConfig.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${siteConfig.customFields.appVersion})
// SDK Version: ${siteConfig.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${siteConfig.customFields.sdkVersion})
// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f)
// App Permanent URL: https://v${siteConfig.customFields.appVersion}.livecodes.io/
// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.js
`}
    </CodeBlock>
  );
};

<GetPermanentUrl />

:::caution

Please note that this only applies to the LiveCodes app and its dependencies.
[NPM imports](./module-resolution.html.md) in [project code](./projects.html.md)#script-editor) that do not specify versions use the latest version.
[Package versions](./module-resolution.html.md)#package-version) can be specified in the import.
[Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior.

Example:

```js
import lodash from 'lodash@4.17.21';

console.log(lodash.VERSION); // -> 4.17.21
```

It is recommended to also specify versions of [external resources](./external-resources.html.md).

:::

#### Full Example:

export const FullCode = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
    <CodeBlock title="index.html" language="html">
      {`<div id="container"></div>\n<script type="module">
${'  '}// specific SDK version
// highlight-next-line
${'  '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n
${'  '}createPlayground('#container', {
${'    '}// App permanent URL
// highlight-next-line
${'    '}appUrl: 'https://v${siteConfig.customFields.appVersion}.livecodes.io',
${'    '}config: {
${'        '}script: {
${'            '}language: 'javascript',
${'            '}// project code imports package with specific version
// highlight-next-line
${'            '}content: 'import lodash from "lodash@4.17.21";\\nconsole.log(lodash.VERSION);',
${'        '}},
${'        '}activeEditor: 'script',
${'        '}tools: { status: 'open', active: 'console' },
${'    '}},
${'  '}});
</script>`}
    </CodeBlock>
  );
};

<FullCode />

## Related

- [Embedded playgrounds](./embeds.html.md)
- [Share](./share.html.md)
- [SDK](../sdk/index.html.md)
- [`exec` SDK method](../sdk/js-ts.html.md)#exec)