diff --git "a/.github/ISSUE_TEMPLATE/new-extension-request-for-codeflow-ide-\360\237\247\251.md" "b/.github/ISSUE_TEMPLATE/new-extension-request-for-codeflow-ide-\360\237\247\251.md" index d72e2085..15e4446c 100644 --- "a/.github/ISSUE_TEMPLATE/new-extension-request-for-codeflow-ide-\360\237\247\251.md" +++ "b/.github/ISSUE_TEMPLATE/new-extension-request-for-codeflow-ide-\360\237\247\251.md" @@ -1,9 +1,9 @@ --- -name: "New Extension Request for Codeflow IDE \U0001F9E9" -about: Your favorite extension is missing from Codeflow IDE? Let us bring it over! +name: "New Extension Request for StackBlitz \U0001F9E9" +about: Your favorite extension is missing from StackBlitz? Let us bring it over! title: 'EXTENSION REQUEST:' labels: '' -assignees: sylwiavargas +assignees: HeyGarrison --- diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 271dc22e..65b69b24 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -16,6 +16,8 @@ interface ThemeConfig extends DefaultTheme.Config { }; } + + export default defineConfigWithTheme({ srcDir: './docs', outDir: `./build${BASE_PATH}`, @@ -88,7 +90,6 @@ export default defineConfigWithTheme({ }, nav: [ { text: 'Guides', link: defaultGroupLink('userGuide') }, - { text: 'Codeflow', link: defaultGroupLink('codeflow') }, { text: 'API', link: defaultGroupLink('api') }, { text: 'WebContainers', link: defaultGroupLink('webcontainers') }, { text: 'Teams', link: defaultGroupLink('teams') }, @@ -96,7 +97,6 @@ export default defineConfigWithTheme({ ], sidebar: { '/guides/': sidebarLinks('main', ['userGuide', 'integrationGuide']), - '/codeflow/': sidebarLinks('main', ['codeflow']), '/teams/': sidebarLinks('main', ['teams']), '/platform/api/': sidebarLinks('main', ['api']), '/platform/webcontainers/': sidebarLinks('main', ['webcontainers']), diff --git a/.vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs b/.vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs deleted file mode 100644 index 935b7b53..00000000 --- a/.vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs +++ /dev/null @@ -1,252 +0,0 @@ -// .vitepress/config.ts -import dotenv from "file:///home/stackblitz/docs/node_modules/dotenv/lib/main.js"; -import mdFootnote from "file:///home/stackblitz/docs/node_modules/markdown-it-footnote/index.js"; -import { defineConfig } from "file:///home/stackblitz/docs/node_modules/vitepress/dist/node/index.js"; - -// docs/links.ts -var groupLinks = { - userGuide: [ - { text: "What is StackBlitz", link: "/guides/user-guide/what-is-stackblitz" }, - { text: "Getting started", link: "/guides/user-guide/getting-started" }, - { text: "Starter projects", link: "/guides/user-guide/starter-projects" }, - { text: "Available environments", link: "/guides/user-guide/available-environments" }, - { text: "Importing projects", link: "/guides/user-guide/importing-projects" }, - { text: "IDE: what\u2019s on your screen", link: "/guides/user-guide/ide-whats-on-your-screen" }, - { text: "Collections", link: "/guides/user-guide/collections" }, - { text: "Keyboard shortcuts", link: "/guides/user-guide/keyboard-shortcuts" }, - { text: "General FAQs", link: "/guides/user-guide/general-faqs" } - ], - integrationGuide: [ - { text: "Embedding projects", link: "/guides/integration/embedding" }, - { text: "Launching projects from GitHub", link: "/guides/integration/open-from-github" }, - { text: "Creating projects with the SDK", link: "/guides/integration/create-with-sdk" }, - { text: "Bug reproductions", link: "/guides/integration/bug-reproductions" } - ], - codeflow: [ - { text: "What is Codeflow?", link: "/codeflow/what-is-codeflow" }, - { text: "Using pr.new", link: "/codeflow/using-pr-new" }, - { text: "Working in Codeflow IDE", link: "/codeflow/working-in-codeflow-ide" }, - { text: "Integrating CodeflowApp bot", link: "/codeflow/integrating-codeflowapp-bot" }, - { text: "Environment Variables", link: "/codeflow/environment-variables" }, - { - text: "Content updates with Web Publisher", - link: "/codeflow/content-updates-with-web-publisher" - }, - { text: "Integrating Web Publisher", link: "/codeflow/integrating-web-publisher" }, - { text: "Codeflow FAQ", link: "/codeflow/codeflow-faq" } - ], - teams: [ - { text: "What is StackBlitz Teams", link: "/teams/what-is-stackblitz-teams.md" }, - { text: "Setting Up Your Team", link: "/teams/setting-up-your-team" }, - { text: "Collaboration and Access Control", link: "/teams/collaboration-and-access-control" }, - { text: "Pull Request Review Integration", link: "/teams/pull-request-review-integration" }, - { text: "Environment Variables", link: "/teams/environment-variables" }, - { text: "Private NPM Registry Integration", link: "/teams/private-npm-registry-integration" } - ], - api: [ - { - text: "JavaScript SDK", - link: "/platform/api/javascript-sdk", - items: [ - { text: "SDK overview", link: "/platform/api/javascript-sdk" }, - { text: "Options reference", link: "/platform/api/javascript-sdk-options" }, - { text: "Controlling embeds", link: "/platform/api/javascript-sdk-vm" }, - { text: "Managing dependencies", link: "/platform/api/javascript-sdk-dependencies" } - ] - }, - { text: "POST API", link: "/platform/api/post-api" }, - { text: "WebContainer API", link: "/platform/api/webcontainer-api" } - ], - webcontainers: [ - { text: "Roadmap", link: "/platform/webcontainers/roadmap" }, - { text: "Browser support", link: "/platform/webcontainers/browser-support" }, - { text: "Browser configuration", link: "/platform/webcontainers/browser-config" }, - { text: "Project configuration", link: "/platform/webcontainers/project-config" }, - { text: "Turbo package manager", link: "/platform/webcontainers/turbo-package-manager" }, - { text: "Troubleshooting", link: "/platform/webcontainers/troubleshooting-webcontainers" } - ], - enterprise: [ - { text: "Overview", link: "/enterprise/overview" }, - { - text: "Installation", - link: "/enterprise/installation/quickstart", - items: [ - { text: "Quickstart on Bare Metal", link: "/enterprise/installation/quickstart" }, - { text: "Quickstart on GCP (Non-GKE)", link: "/enterprise/installation/quickstart-gcp" }, - { - text: "Quickstart (Existing Cluster)", - link: "/enterprise/installation/quickstart-existing-cluster" - }, - { text: "Administrator Guide", link: "/enterprise/installation/administrator-guide" }, - { text: "Air Gapped Installs", link: "/enterprise/installation/air-gapped-installs" } - ] - }, - { text: "Configuring DNS & TLS", link: "/enterprise/configuring-dns" }, - { text: "Configuring Firewall Rules", link: "/enterprise/configuring-firewall-rules" }, - { text: "Setting up SSO", link: "/enterprise/sso" }, - { text: "Setting up SSO with Okta", link: "/enterprise/okta-sso" }, - { text: "Setting up SSO with ADFS", link: "/enterprise/adfs-sso" }, - { text: "Connect npm Registry", link: "/enterprise/npm" }, - { text: "Starter Projects", link: "/enterprise/starter-projects" }, - { text: "User Management", link: "/enterprise/user-management" }, - { text: "Aggregating Logs", link: "/enterprise/log-aggregation" }, - { text: "Data Migration", link: "/enterprise/data-migration" } - ] -}; -var linkGroups = { - userGuide: { - text: "User Guide", - items: groupLinks.userGuide - }, - integrationGuide: { - text: "Integration Guide", - items: groupLinks.integrationGuide - }, - codeflow: { - text: "Codeflow", - items: groupLinks.codeflow - }, - teams: { - text: "Teams", - items: groupLinks.teams - }, - api: { - text: "StackBlitz API", - items: groupLinks.api - }, - webcontainers: { - text: "WebContainers", - items: groupLinks.webcontainers - }, - enterprise: { - text: "Enterprise Server", - items: groupLinks.enterprise - } -}; -var defaultGroupLink = (linkGroup) => groupLinks[linkGroup][0].link; -var sidebarLinks = (sidebar, activeLinkGroups = []) => { - if (sidebar === "enterprise") { - return [linkGroups.enterprise]; - } - return Object.entries(linkGroups).filter(([key]) => key !== "enterprise").map(([key, data]) => ({ - ...data, - collapsed: !activeLinkGroups.includes(key) - })); -}; - -// .vitepress/config.ts -dotenv.config(); -var BASE = "/"; -var BASE_WITH_ORIGIN = `https://developer.stackblitz.com${BASE}`; -var config_default = defineConfig({ - srcDir: "./docs", - outDir: `./build${BASE}`, - assetsDir: "assets", - base: BASE, - // Generate files as `/path/to/page.html` and URLs as `/path/to/page` - cleanUrls: true, - // Prevent builds when content has dead links - ignoreDeadLinks: false, - // Metadata - lang: "en-US", - title: "StackBlitz Docs", - description: "Discover how to use StackBlitz, an online development environment for frontend, Node.js and the JavaScript ecosystem.", - head: [ - ["link", { rel: "icon", type: "image/png", href: `${BASE}img/theme/favicon.png` }], - ...getAnalyticsTags(process.env) - ], - // Sitemap - lastUpdated: true, - sitemap: { - hostname: BASE_WITH_ORIGIN - }, - /** - * Generate social media metadata tags at build time. - * Note: this does not run when using the development server, - * so it must be tested by doing a full build with `npm run build`. - */ - transformHead({ pageData, page }) { - const { title, description, og_image } = pageData.frontmatter; - const og_type = page === "index.md" ? "website" : "article"; - const tags = []; - tags.push(["meta", { property: "og:type", content: og_type }]); - tags.push(["meta", { property: "og:title", content: title }]); - if (og_image) { - const url = `${BASE_WITH_ORIGIN}img/og/${og_image}`; - tags.push(["meta", { property: "og:image", content: url }]); - } - tags.push(["meta", { name: "twitter:site", content: "@StackBlitz" }]); - tags.push(["meta", { name: "twitter:card", content: "summary_large_image" }]); - tags.push(["meta", { name: "twitter:title", content: title }]); - if (description) { - tags.push(["meta", { name: "twitter:description", content: description }]); - } - return tags; - }, - // Theme - themeConfig: { - siteTitle: "StackBlitz Docs", - logo: "/img/theme/docs-logo.svg", - search: getSearchConfig(process.env), - editLink: { - pattern: "https://pr.new/stackblitz/docs/edit/main/docs/:path", - text: "Edit this page" - }, - nav: [ - { text: "Guides", link: defaultGroupLink("userGuide") }, - { text: "Codeflow", link: defaultGroupLink("codeflow") }, - { text: "API", link: defaultGroupLink("api") }, - { text: "WebContainers", link: defaultGroupLink("webcontainers") }, - { text: "Teams", link: defaultGroupLink("teams") }, - { text: "Enterprise", link: defaultGroupLink("enterprise") } - ], - sidebar: { - "/guides/": sidebarLinks("main", ["userGuide", "integrationGuide"]), - "/codeflow/": sidebarLinks("main", ["codeflow"]), - "/teams/": sidebarLinks("main", ["teams"]), - "/platform/api/": sidebarLinks("main", ["api"]), - "/platform/webcontainers/": sidebarLinks("main", ["webcontainers"]), - "/enterprise/": sidebarLinks("enterprise", ["enterprise"]) - } - }, - postRender(context) { - context.teleports; - }, - markdown: { - config: (md) => { - md.use(mdFootnote); - } - } -}); -function getAnalyticsTags(env) { - if (!env.VITE_GTM_ID) { - return []; - } - return [ - [ - "script", - { src: `https://www.googletagmanager.com/gtag/js?id=${env.VITE_GTM_ID}`, async: "" } - ], - [ - "script", - {}, - `function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag('js',new Date),gtag('config','${env.VITE_GTM_ID}',{anonymize_ip:true})` - ] - ]; -} -function getSearchConfig(env) { - if (env.VITE_ALGOLIA_ID && env.VITE_ALGOLIA_KEY) { - return { - provider: "algolia", - options: { - indexName: "stackblitz", - appId: env.VITE_ALGOLIA_ID, - apiKey: env.VITE_ALGOLIA_KEY - } - }; - } -} -export { - config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGVwcmVzcy9jb25maWcudHMiLCAiZG9jcy9saW5rcy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9ob21lL3N0YWNrYmxpdHovZG9jcy8udml0ZXByZXNzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9zdGFja2JsaXR6L2RvY3MvLnZpdGVwcmVzcy9jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvc3RhY2tibGl0ei9kb2NzLy52aXRlcHJlc3MvY29uZmlnLnRzXCI7aW1wb3J0IGRvdGVudiBmcm9tICdkb3RlbnYnO1xuLyogQHRzLWV4cGVjdC1lcnJvciAqL1xuaW1wb3J0IG1kRm9vdG5vdGUgZnJvbSAnbWFya2Rvd24taXQtZm9vdG5vdGUnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnLCB0eXBlIEhlYWRDb25maWcgfSBmcm9tICd2aXRlcHJlc3MnO1xuaW1wb3J0IHsgZGVmYXVsdEdyb3VwTGluaywgc2lkZWJhckxpbmtzIH0gZnJvbSAnLi4vZG9jcy9saW5rcyc7XG5cbmRvdGVudi5jb25maWcoKTtcblxuY29uc3QgQkFTRSA9ICcvJztcbmNvbnN0IEJBU0VfV0lUSF9PUklHSU4gPSBgaHR0cHM6Ly9kZXZlbG9wZXIuc3RhY2tibGl0ei5jb20ke0JBU0V9YDtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgc3JjRGlyOiAnLi9kb2NzJyxcbiAgb3V0RGlyOiBgLi9idWlsZCR7QkFTRX1gLFxuICBhc3NldHNEaXI6ICdhc3NldHMnLFxuICBiYXNlOiBCQVNFLFxuXG4gIC8vIEdlbmVyYXRlIGZpbGVzIGFzIGAvcGF0aC90by9wYWdlLmh0bWxgIGFuZCBVUkxzIGFzIGAvcGF0aC90by9wYWdlYFxuICBjbGVhblVybHM6IHRydWUsXG5cbiAgLy8gUHJldmVudCBidWlsZHMgd2hlbiBjb250ZW50IGhhcyBkZWFkIGxpbmtzXG4gIGlnbm9yZURlYWRMaW5rczogZmFsc2UsXG5cbiAgLy8gTWV0YWRhdGFcbiAgbGFuZzogJ2VuLVVTJyxcbiAgdGl0bGU6ICdTdGFja0JsaXR6IERvY3MnLFxuICBkZXNjcmlwdGlvbjpcbiAgICAnRGlzY292ZXIgaG93IHRvIHVzZSBTdGFja0JsaXR6LCBhbiBvbmxpbmUgZGV2ZWxvcG1lbnQgZW52aXJvbm1lbnQgZm9yIGZyb250ZW5kLCBOb2RlLmpzIGFuZCB0aGUgSmF2YVNjcmlwdCBlY29zeXN0ZW0uJyxcbiAgaGVhZDogW1xuICAgIFsnbGluaycsIHsgcmVsOiAnaWNvbicsIHR5cGU6ICdpbWFnZS9wbmcnLCBocmVmOiBgJHtCQVNFfWltZy90aGVtZS9mYXZpY29uLnBuZ2AgfV0sXG4gICAgLi4uZ2V0QW5hbHl0aWNzVGFncyhwcm9jZXNzLmVudiksXG4gIF0sXG5cbiAgLy8gU2l0ZW1hcFxuICBsYXN0VXBkYXRlZDogdHJ1ZSxcbiAgc2l0ZW1hcDoge1xuICAgIGhvc3RuYW1lOiBCQVNFX1dJVEhfT1JJR0lOLFxuICB9LFxuXG4gIC8qKlxuICAgKiBHZW5lcmF0ZSBzb2NpYWwgbWVkaWEgbWV0YWRhdGEgdGFncyBhdCBidWlsZCB0aW1lLlxuICAgKiBOb3RlOiB0aGlzIGRvZXMgbm90IHJ1biB3aGVuIHVzaW5nIHRoZSBkZXZlbG9wbWVudCBzZXJ2ZXIsXG4gICAqIHNvIGl0IG11c3QgYmUgdGVzdGVkIGJ5IGRvaW5nIGEgZnVsbCBidWlsZCB3aXRoIGBucG0gcnVuIGJ1aWxkYC5cbiAgICovXG4gIHRyYW5zZm9ybUhlYWQoeyBwYWdlRGF0YSwgcGFnZSB9KSB7XG4gICAgLy8gR2V0IHRoZSByYXcgdGl0bGUgYW5kIGRlc2NyaXB0aW9uIGZyb20gZnJvbnRtYXR0ZXIsXG4gICAgLy8gcmF0aGVyIHRoYW4gdGhlIHRpdGxlIHdoaWNoIGhhcyB0aGUgc2l0ZSBzdWZmaXhcbiAgICBjb25zdCB7IHRpdGxlLCBkZXNjcmlwdGlvbiwgb2dfaW1hZ2UgfSA9IHBhZ2VEYXRhLmZyb250bWF0dGVyO1xuICAgIGNvbnN0IG9nX3R5cGUgPSBwYWdlID09PSAnaW5kZXgubWQnID8gJ3dlYnNpdGUnIDogJ2FydGljbGUnO1xuXG4gICAgLy8gTmV3IG1ldGEgdGFncyB0byBhZGQgdG8gdGhlIDxoZWFkPlxuICAgIGNvbnN0IHRhZ3M6IEhlYWRDb25maWdbXSA9IFtdO1xuXG4gICAgLy8gQWRkIG9wZW5ncmFwaCB0YWdzXG4gICAgdGFncy5wdXNoKFsnbWV0YScsIHsgcHJvcGVydHk6ICdvZzp0eXBlJywgY29udGVudDogb2dfdHlwZSB9XSk7XG4gICAgdGFncy5wdXNoKFsnbWV0YScsIHsgcHJvcGVydHk6ICdvZzp0aXRsZScsIGNvbnRlbnQ6IHRpdGxlIH1dKTtcbiAgICBpZiAob2dfaW1hZ2UpIHtcbiAgICAgIGNvbnN0IHVybCA9IGAke0JBU0VfV0lUSF9PUklHSU59aW1nL29nLyR7b2dfaW1hZ2V9YDtcbiAgICAgIHRhZ3MucHVzaChbJ21ldGEnLCB7IHByb3BlcnR5OiAnb2c6aW1hZ2UnLCBjb250ZW50OiB1cmwgfV0pO1xuICAgIH1cblxuICAgIC8vIEFkZCB0d2l0dGVyIHRhZ3NcbiAgICB0YWdzLnB1c2goWydtZXRhJywgeyBuYW1lOiAndHdpdHRlcjpzaXRlJywgY29udGVudDogJ0BTdGFja0JsaXR6JyB9XSk7XG4gICAgdGFncy5wdXNoKFsnbWV0YScsIHsgbmFtZTogJ3R3aXR0ZXI6Y2FyZCcsIGNvbnRlbnQ6ICdzdW1tYXJ5X2xhcmdlX2ltYWdlJyB9XSk7XG4gICAgdGFncy5wdXNoKFsnbWV0YScsIHsgbmFtZTogJ3R3aXR0ZXI6dGl0bGUnLCBjb250ZW50OiB0aXRsZSB9XSk7XG4gICAgaWYgKGRlc2NyaXB0aW9uKSB7XG4gICAgICB0YWdzLnB1c2goWydtZXRhJywgeyBuYW1lOiAndHdpdHRlcjpkZXNjcmlwdGlvbicsIGNvbnRlbnQ6IGRlc2NyaXB0aW9uIH1dKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGFncztcbiAgfSxcblxuICAvLyBUaGVtZVxuICB0aGVtZUNvbmZpZzoge1xuICAgIHNpdGVUaXRsZTogJ1N0YWNrQmxpdHogRG9jcycsXG4gICAgbG9nbzogJy9pbWcvdGhlbWUvZG9jcy1sb2dvLnN2ZycsXG4gICAgc2VhcmNoOiBnZXRTZWFyY2hDb25maWcocHJvY2Vzcy5lbnYpLFxuICAgIGVkaXRMaW5rOiB7XG4gICAgICBwYXR0ZXJuOiAnaHR0cHM6Ly9wci5uZXcvc3RhY2tibGl0ei9kb2NzL2VkaXQvbWFpbi9kb2NzLzpwYXRoJyxcbiAgICAgIHRleHQ6ICdFZGl0IHRoaXMgcGFnZScsXG4gICAgfSxcbiAgICBuYXY6IFtcbiAgICAgIHsgdGV4dDogJ0d1aWRlcycsIGxpbms6IGRlZmF1bHRHcm91cExpbmsoJ3VzZXJHdWlkZScpIH0sXG4gICAgICB7IHRleHQ6ICdDb2RlZmxvdycsIGxpbms6IGRlZmF1bHRHcm91cExpbmsoJ2NvZGVmbG93JykgfSxcbiAgICAgIHsgdGV4dDogJ0FQSScsIGxpbms6IGRlZmF1bHRHcm91cExpbmsoJ2FwaScpIH0sXG4gICAgICB7IHRleHQ6ICdXZWJDb250YWluZXJzJywgbGluazogZGVmYXVsdEdyb3VwTGluaygnd2ViY29udGFpbmVycycpIH0sXG4gICAgICB7IHRleHQ6ICdUZWFtcycsIGxpbms6IGRlZmF1bHRHcm91cExpbmsoJ3RlYW1zJykgfSxcbiAgICAgIHsgdGV4dDogJ0VudGVycHJpc2UnLCBsaW5rOiBkZWZhdWx0R3JvdXBMaW5rKCdlbnRlcnByaXNlJykgfSxcbiAgICBdLFxuICAgIHNpZGViYXI6IHtcbiAgICAgICcvZ3VpZGVzLyc6IHNpZGViYXJMaW5rcygnbWFpbicsIFsndXNlckd1aWRlJywgJ2ludGVncmF0aW9uR3VpZGUnXSksXG4gICAgICAnL2NvZGVmbG93Lyc6IHNpZGViYXJMaW5rcygnbWFpbicsIFsnY29kZWZsb3cnXSksXG4gICAgICAnL3RlYW1zLyc6IHNpZGViYXJMaW5rcygnbWFpbicsIFsndGVhbXMnXSksXG4gICAgICAnL3BsYXRmb3JtL2FwaS8nOiBzaWRlYmFyTGlua3MoJ21haW4nLCBbJ2FwaSddKSxcbiAgICAgICcvcGxhdGZvcm0vd2ViY29udGFpbmVycy8nOiBzaWRlYmFyTGlua3MoJ21haW4nLCBbJ3dlYmNvbnRhaW5lcnMnXSksXG4gICAgICAnL2VudGVycHJpc2UvJzogc2lkZWJhckxpbmtzKCdlbnRlcnByaXNlJywgWydlbnRlcnByaXNlJ10pLFxuICAgIH0sXG4gIH0sXG5cbiAgcG9zdFJlbmRlcihjb250ZXh0KSB7XG4gICAgY29udGV4dC50ZWxlcG9ydHM7XG4gIH0sXG5cbiAgbWFya2Rvd246IHtcbiAgICBjb25maWc6IChtZCkgPT4ge1xuICAgICAgbWQudXNlKG1kRm9vdG5vdGUpO1xuICAgIH0sXG4gIH0sXG59KTtcblxuZnVuY3Rpb24gZ2V0QW5hbHl0aWNzVGFncyhlbnY6IE5vZGVKUy5Qcm9jZXNzRW52KTogSGVhZENvbmZpZ1tdIHtcbiAgaWYgKCFlbnYuVklURV9HVE1fSUQpIHtcbiAgICByZXR1cm4gW107XG4gIH1cbiAgcmV0dXJuIFtcbiAgICBbXG4gICAgICAnc2NyaXB0JyxcbiAgICAgIHsgc3JjOiBgaHR0cHM6Ly93d3cuZ29vZ2xldGFnbWFuYWdlci5jb20vZ3RhZy9qcz9pZD0ke2Vudi5WSVRFX0dUTV9JRH1gLCBhc3luYzogJycgfSxcbiAgICBdLFxuICAgIFtcbiAgICAgICdzY3JpcHQnLFxuICAgICAge30sXG4gICAgICBgZnVuY3Rpb24gZ3RhZygpe2RhdGFMYXllci5wdXNoKGFyZ3VtZW50cyl9d2luZG93LmRhdGFMYXllcj13aW5kb3cuZGF0YUxheWVyfHxbXSxndGFnKCdqcycsbmV3IERhdGUpLGd0YWcoJ2NvbmZpZycsJyR7ZW52LlZJVEVfR1RNX0lEfScse2Fub255bWl6ZV9pcDp0cnVlfSlgLFxuICAgIF0sXG4gIF07XG59XG5cbmZ1bmN0aW9uIGdldFNlYXJjaENvbmZpZyhlbnY6IE5vZGVKUy5Qcm9jZXNzRW52KSB7XG4gIGlmIChlbnYuVklURV9BTEdPTElBX0lEICYmIGVudi5WSVRFX0FMR09MSUFfS0VZKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHByb3ZpZGVyOiAnYWxnb2xpYScsXG4gICAgICBvcHRpb25zOiB7XG4gICAgICAgIGluZGV4TmFtZTogJ3N0YWNrYmxpdHonLFxuICAgICAgICBhcHBJZDogZW52LlZJVEVfQUxHT0xJQV9JRCxcbiAgICAgICAgYXBpS2V5OiBlbnYuVklURV9BTEdPTElBX0tFWSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxufVxuIiwgImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9zdGFja2JsaXR6L2RvY3MvZG9jc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvc3RhY2tibGl0ei9kb2NzL2RvY3MvbGlua3MudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvc3RhY2tibGl0ei9kb2NzL2RvY3MvbGlua3MudHNcIjtpbXBvcnQgdHlwZSB7IENhcmRMaW5rLCBGb290ZXJTZWN0aW9uLCBNZW51TGlua0dyb3VwLCBNZW51TGlua0l0ZW0gfSBmcm9tICdAdGhlbWUvZGF0YS90eXBlcyc7XG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBMaW5rIEdyb3VwcyAvIFNpZGViYXJcblxuY29uc3QgZ3JvdXBMaW5rczogUmVjb3JkPE1lbnVMaW5rR3JvdXAsIE1lbnVMaW5rSXRlbVtdPiA9IHtcbiAgdXNlckd1aWRlOiBbXG4gICAgeyB0ZXh0OiAnV2hhdCBpcyBTdGFja0JsaXR6JywgbGluazogJy9ndWlkZXMvdXNlci1ndWlkZS93aGF0LWlzLXN0YWNrYmxpdHonIH0sXG4gICAgeyB0ZXh0OiAnR2V0dGluZyBzdGFydGVkJywgbGluazogJy9ndWlkZXMvdXNlci1ndWlkZS9nZXR0aW5nLXN0YXJ0ZWQnIH0sXG4gICAgeyB0ZXh0OiAnU3RhcnRlciBwcm9qZWN0cycsIGxpbms6ICcvZ3VpZGVzL3VzZXItZ3VpZGUvc3RhcnRlci1wcm9qZWN0cycgfSxcbiAgICB7IHRleHQ6ICdBdmFpbGFibGUgZW52aXJvbm1lbnRzJywgbGluazogJy9ndWlkZXMvdXNlci1ndWlkZS9hdmFpbGFibGUtZW52aXJvbm1lbnRzJyB9LFxuICAgIHsgdGV4dDogJ0ltcG9ydGluZyBwcm9qZWN0cycsIGxpbms6ICcvZ3VpZGVzL3VzZXItZ3VpZGUvaW1wb3J0aW5nLXByb2plY3RzJyB9LFxuICAgIHsgdGV4dDogJ0lERTogd2hhdFx1MjAxOXMgb24geW91ciBzY3JlZW4nLCBsaW5rOiAnL2d1aWRlcy91c2VyLWd1aWRlL2lkZS13aGF0cy1vbi15b3VyLXNjcmVlbicgfSxcbiAgICB7IHRleHQ6ICdDb2xsZWN0aW9ucycsIGxpbms6ICcvZ3VpZGVzL3VzZXItZ3VpZGUvY29sbGVjdGlvbnMnIH0sXG4gICAgeyB0ZXh0OiAnS2V5Ym9hcmQgc2hvcnRjdXRzJywgbGluazogJy9ndWlkZXMvdXNlci1ndWlkZS9rZXlib2FyZC1zaG9ydGN1dHMnIH0sXG4gICAgeyB0ZXh0OiAnR2VuZXJhbCBGQVFzJywgbGluazogJy9ndWlkZXMvdXNlci1ndWlkZS9nZW5lcmFsLWZhcXMnIH0sXG4gIF0sXG4gIGludGVncmF0aW9uR3VpZGU6IFtcbiAgICB7IHRleHQ6ICdFbWJlZGRpbmcgcHJvamVjdHMnLCBsaW5rOiAnL2d1aWRlcy9pbnRlZ3JhdGlvbi9lbWJlZGRpbmcnIH0sXG4gICAgeyB0ZXh0OiAnTGF1bmNoaW5nIHByb2plY3RzIGZyb20gR2l0SHViJywgbGluazogJy9ndWlkZXMvaW50ZWdyYXRpb24vb3Blbi1mcm9tLWdpdGh1YicgfSxcbiAgICB7IHRleHQ6ICdDcmVhdGluZyBwcm9qZWN0cyB3aXRoIHRoZSBTREsnLCBsaW5rOiAnL2d1aWRlcy9pbnRlZ3JhdGlvbi9jcmVhdGUtd2l0aC1zZGsnIH0sXG4gICAgeyB0ZXh0OiAnQnVnIHJlcHJvZHVjdGlvbnMnLCBsaW5rOiAnL2d1aWRlcy9pbnRlZ3JhdGlvbi9idWctcmVwcm9kdWN0aW9ucycgfSxcbiAgXSxcbiAgY29kZWZsb3c6IFtcbiAgICB7IHRleHQ6ICdXaGF0IGlzIENvZGVmbG93PycsIGxpbms6ICcvY29kZWZsb3cvd2hhdC1pcy1jb2RlZmxvdycgfSxcbiAgICB7IHRleHQ6ICdVc2luZyBwci5uZXcnLCBsaW5rOiAnL2NvZGVmbG93L3VzaW5nLXByLW5ldycgfSxcbiAgICB7IHRleHQ6ICdXb3JraW5nIGluIENvZGVmbG93IElERScsIGxpbms6ICcvY29kZWZsb3cvd29ya2luZy1pbi1jb2RlZmxvdy1pZGUnIH0sXG4gICAgeyB0ZXh0OiAnSW50ZWdyYXRpbmcgQ29kZWZsb3dBcHAgYm90JywgbGluazogJy9jb2RlZmxvdy9pbnRlZ3JhdGluZy1jb2RlZmxvd2FwcC1ib3QnIH0sXG4gICAgeyB0ZXh0OiAnRW52aXJvbm1lbnQgVmFyaWFibGVzJywgbGluazogJy9jb2RlZmxvdy9lbnZpcm9ubWVudC12YXJpYWJsZXMnIH0sXG4gICAge1xuICAgICAgdGV4dDogJ0NvbnRlbnQgdXBkYXRlcyB3aXRoIFdlYiBQdWJsaXNoZXInLFxuICAgICAgbGluazogJy9jb2RlZmxvdy9jb250ZW50LXVwZGF0ZXMtd2l0aC13ZWItcHVibGlzaGVyJyxcbiAgICB9LFxuICAgIHsgdGV4dDogJ0ludGVncmF0aW5nIFdlYiBQdWJsaXNoZXInLCBsaW5rOiAnL2NvZGVmbG93L2ludGVncmF0aW5nLXdlYi1wdWJsaXNoZXInIH0sXG4gICAgeyB0ZXh0OiAnQ29kZWZsb3cgRkFRJywgbGluazogJy9jb2RlZmxvdy9jb2RlZmxvdy1mYXEnIH0sXG4gIF0sXG4gIHRlYW1zOiBbXG4gICAgeyB0ZXh0OiAnV2hhdCBpcyBTdGFja0JsaXR6IFRlYW1zJywgbGluazogJy90ZWFtcy93aGF0LWlzLXN0YWNrYmxpdHotdGVhbXMubWQnIH0sXG4gICAgeyB0ZXh0OiAnU2V0dGluZyBVcCBZb3VyIFRlYW0nLCBsaW5rOiAnL3RlYW1zL3NldHRpbmctdXAteW91ci10ZWFtJyB9LFxuICAgIHsgdGV4dDogJ0NvbGxhYm9yYXRpb24gYW5kIEFjY2VzcyBDb250cm9sJywgbGluazogJy90ZWFtcy9jb2xsYWJvcmF0aW9uLWFuZC1hY2Nlc3MtY29udHJvbCcgfSxcbiAgICB7IHRleHQ6ICdQdWxsIFJlcXVlc3QgUmV2aWV3IEludGVncmF0aW9uJywgbGluazogJy90ZWFtcy9wdWxsLXJlcXVlc3QtcmV2aWV3LWludGVncmF0aW9uJyB9LFxuICAgIHsgdGV4dDogJ0Vudmlyb25tZW50IFZhcmlhYmxlcycsIGxpbms6ICcvdGVhbXMvZW52aXJvbm1lbnQtdmFyaWFibGVzJyB9LFxuICAgIHsgdGV4dDogJ1ByaXZhdGUgTlBNIFJlZ2lzdHJ5IEludGVncmF0aW9uJywgbGluazogJy90ZWFtcy9wcml2YXRlLW5wbS1yZWdpc3RyeS1pbnRlZ3JhdGlvbicgfSxcbiAgXSxcbiAgYXBpOiBbXG4gICAge1xuICAgICAgdGV4dDogJ0phdmFTY3JpcHQgU0RLJyxcbiAgICAgIGxpbms6ICcvcGxhdGZvcm0vYXBpL2phdmFzY3JpcHQtc2RrJyxcbiAgICAgIGl0ZW1zOiBbXG4gICAgICAgIHsgdGV4dDogJ1NESyBvdmVydmlldycsIGxpbms6ICcvcGxhdGZvcm0vYXBpL2phdmFzY3JpcHQtc2RrJyB9LFxuICAgICAgICB7IHRleHQ6ICdPcHRpb25zIHJlZmVyZW5jZScsIGxpbms6ICcvcGxhdGZvcm0vYXBpL2phdmFzY3JpcHQtc2RrLW9wdGlvbnMnIH0sXG4gICAgICAgIHsgdGV4dDogJ0NvbnRyb2xsaW5nIGVtYmVkcycsIGxpbms6ICcvcGxhdGZvcm0vYXBpL2phdmFzY3JpcHQtc2RrLXZtJyB9LFxuICAgICAgICB7IHRleHQ6ICdNYW5hZ2luZyBkZXBlbmRlbmNpZXMnLCBsaW5rOiAnL3BsYXRmb3JtL2FwaS9qYXZhc2NyaXB0LXNkay1kZXBlbmRlbmNpZXMnIH0sXG4gICAgICBdLFxuICAgIH0sXG4gICAgeyB0ZXh0OiAnUE9TVCBBUEknLCBsaW5rOiAnL3BsYXRmb3JtL2FwaS9wb3N0LWFwaScgfSxcbiAgICB7IHRleHQ6ICdXZWJDb250YWluZXIgQVBJJywgbGluazogJy9wbGF0Zm9ybS9hcGkvd2ViY29udGFpbmVyLWFwaScgfSxcbiAgXSxcbiAgd2ViY29udGFpbmVyczogW1xuICAgIHsgdGV4dDogJ1JvYWRtYXAnLCBsaW5rOiAnL3BsYXRmb3JtL3dlYmNvbnRhaW5lcnMvcm9hZG1hcCcgfSxcbiAgICB7IHRleHQ6ICdCcm93c2VyIHN1cHBvcnQnLCBsaW5rOiAnL3BsYXRmb3JtL3dlYmNvbnRhaW5lcnMvYnJvd3Nlci1zdXBwb3J0JyB9LFxuICAgIHsgdGV4dDogJ0Jyb3dzZXIgY29uZmlndXJhdGlvbicsIGxpbms6ICcvcGxhdGZvcm0vd2ViY29udGFpbmVycy9icm93c2VyLWNvbmZpZycgfSxcbiAgICB7IHRleHQ6ICdQcm9qZWN0IGNvbmZpZ3VyYXRpb24nLCBsaW5rOiAnL3BsYXRmb3JtL3dlYmNvbnRhaW5lcnMvcHJvamVjdC1jb25maWcnIH0sXG4gICAgeyB0ZXh0OiAnVHVyYm8gcGFja2FnZSBtYW5hZ2VyJywgbGluazogJy9wbGF0Zm9ybS93ZWJjb250YWluZXJzL3R1cmJvLXBhY2thZ2UtbWFuYWdlcicgfSxcbiAgICB7IHRleHQ6ICdUcm91Ymxlc2hvb3RpbmcnLCBsaW5rOiAnL3BsYXRmb3JtL3dlYmNvbnRhaW5lcnMvdHJvdWJsZXNob290aW5nLXdlYmNvbnRhaW5lcnMnIH0sXG4gIF0sXG4gIGVudGVycHJpc2U6IFtcbiAgICB7IHRleHQ6ICdPdmVydmlldycsIGxpbms6ICcvZW50ZXJwcmlzZS9vdmVydmlldycgfSxcbiAgICB7XG4gICAgICB0ZXh0OiAnSW5zdGFsbGF0aW9uJyxcbiAgICAgIGxpbms6ICcvZW50ZXJwcmlzZS9pbnN0YWxsYXRpb24vcXVpY2tzdGFydCcsXG4gICAgICBpdGVtczogW1xuICAgICAgICB7IHRleHQ6ICdRdWlja3N0YXJ0IG9uIEJhcmUgTWV0YWwnLCBsaW5rOiAnL2VudGVycHJpc2UvaW5zdGFsbGF0aW9uL3F1aWNrc3RhcnQnIH0sXG4gICAgICAgIHsgdGV4dDogJ1F1aWNrc3RhcnQgb24gR0NQIChOb24tR0tFKScsIGxpbms6ICcvZW50ZXJwcmlzZS9pbnN0YWxsYXRpb24vcXVpY2tzdGFydC1nY3AnIH0sXG4gICAgICAgIHtcbiAgICAgICAgICB0ZXh0OiAnUXVpY2tzdGFydCAoRXhpc3RpbmcgQ2x1c3RlciknLFxuICAgICAgICAgIGxpbms6ICcvZW50ZXJwcmlzZS9pbnN0YWxsYXRpb24vcXVpY2tzdGFydC1leGlzdGluZy1jbHVzdGVyJyxcbiAgICAgICAgfSxcbiAgICAgICAgeyB0ZXh0OiAnQWRtaW5pc3RyYXRvciBHdWlkZScsIGxpbms6ICcvZW50ZXJwcmlzZS9pbnN0YWxsYXRpb24vYWRtaW5pc3RyYXRvci1ndWlkZScgfSxcbiAgICAgICAgeyB0ZXh0OiAnQWlyIEdhcHBlZCBJbnN0YWxscycsIGxpbms6ICcvZW50ZXJwcmlzZS9pbnN0YWxsYXRpb24vYWlyLWdhcHBlZC1pbnN0YWxscycgfSxcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7IHRleHQ6ICdDb25maWd1cmluZyBETlMgJiBUTFMnLCBsaW5rOiAnL2VudGVycHJpc2UvY29uZmlndXJpbmctZG5zJyB9LFxuICAgIHsgdGV4dDogJ0NvbmZpZ3VyaW5nIEZpcmV3YWxsIFJ1bGVzJywgbGluazogJy9lbnRlcnByaXNlL2NvbmZpZ3VyaW5nLWZpcmV3YWxsLXJ1bGVzJyB9LFxuICAgIHsgdGV4dDogJ1NldHRpbmcgdXAgU1NPJywgbGluazogJy9lbnRlcnByaXNlL3NzbycgfSxcbiAgICB7IHRleHQ6ICdTZXR0aW5nIHVwIFNTTyB3aXRoIE9rdGEnLCBsaW5rOiAnL2VudGVycHJpc2Uvb2t0YS1zc28nIH0sXG4gICAgeyB0ZXh0OiAnU2V0dGluZyB1cCBTU08gd2l0aCBBREZTJywgbGluazogJy9lbnRlcnByaXNlL2FkZnMtc3NvJyB9LFxuICAgIHsgdGV4dDogJ0Nvbm5lY3QgbnBtIFJlZ2lzdHJ5JywgbGluazogJy9lbnRlcnByaXNlL25wbScgfSxcbiAgICB7IHRleHQ6ICdTdGFydGVyIFByb2plY3RzJywgbGluazogJy9lbnRlcnByaXNlL3N0YXJ0ZXItcHJvamVjdHMnIH0sXG4gICAgeyB0ZXh0OiAnVXNlciBNYW5hZ2VtZW50JywgbGluazogJy9lbnRlcnByaXNlL3VzZXItbWFuYWdlbWVudCcgfSxcbiAgICB7IHRleHQ6ICdBZ2dyZWdhdGluZyBMb2dzJywgbGluazogJy9lbnRlcnByaXNlL2xvZy1hZ2dyZWdhdGlvbicgfSxcbiAgICB7IHRleHQ6ICdEYXRhIE1pZ3JhdGlvbicsIGxpbms6ICcvZW50ZXJwcmlzZS9kYXRhLW1pZ3JhdGlvbicgfSxcbiAgXSxcbn07XG5cbmNvbnN0IGxpbmtHcm91cHM6IFJlY29yZDxNZW51TGlua0dyb3VwLCB7IHRleHQ6IHN0cmluZzsgaXRlbXM6IE1lbnVMaW5rSXRlbVtdIH0+ID0ge1xuICB1c2VyR3VpZGU6IHtcbiAgICB0ZXh0OiAnVXNlciBHdWlkZScsXG4gICAgaXRlbXM6IGdyb3VwTGlua3MudXNlckd1aWRlLFxuICB9LFxuICBpbnRlZ3JhdGlvbkd1aWRlOiB7XG4gICAgdGV4dDogJ0ludGVncmF0aW9uIEd1aWRlJyxcbiAgICBpdGVtczogZ3JvdXBMaW5rcy5pbnRlZ3JhdGlvbkd1aWRlLFxuICB9LFxuICBjb2RlZmxvdzoge1xuICAgIHRleHQ6ICdDb2RlZmxvdycsXG4gICAgaXRlbXM6IGdyb3VwTGlua3MuY29kZWZsb3csXG4gIH0sXG4gIHRlYW1zOiB7XG4gICAgdGV4dDogJ1RlYW1zJyxcbiAgICBpdGVtczogZ3JvdXBMaW5rcy50ZWFtcyxcbiAgfSxcbiAgYXBpOiB7XG4gICAgdGV4dDogJ1N0YWNrQmxpdHogQVBJJyxcbiAgICBpdGVtczogZ3JvdXBMaW5rcy5hcGksXG4gIH0sXG4gIHdlYmNvbnRhaW5lcnM6IHtcbiAgICB0ZXh0OiAnV2ViQ29udGFpbmVycycsXG4gICAgaXRlbXM6IGdyb3VwTGlua3Mud2ViY29udGFpbmVycyxcbiAgfSxcbiAgZW50ZXJwcmlzZToge1xuICAgIHRleHQ6ICdFbnRlcnByaXNlIFNlcnZlcicsXG4gICAgaXRlbXM6IGdyb3VwTGlua3MuZW50ZXJwcmlzZSxcbiAgfSxcbn07XG5cbmV4cG9ydCBjb25zdCBkZWZhdWx0R3JvdXBMaW5rID0gKGxpbmtHcm91cDogTWVudUxpbmtHcm91cCkgPT4gZ3JvdXBMaW5rc1tsaW5rR3JvdXBdWzBdLmxpbms7XG5cbmV4cG9ydCBjb25zdCBzaWRlYmFyTGlua3MgPSAoXG4gIHNpZGViYXI6ICdtYWluJyB8ICdlbnRlcnByaXNlJyxcbiAgYWN0aXZlTGlua0dyb3VwczogTWVudUxpbmtHcm91cFtdID0gW11cbikgPT4ge1xuICBpZiAoc2lkZWJhciA9PT0gJ2VudGVycHJpc2UnKSB7XG4gICAgcmV0dXJuIFtsaW5rR3JvdXBzLmVudGVycHJpc2VdO1xuICB9XG5cbiAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKGxpbmtHcm91cHMpXG4gICAgLmZpbHRlcigoW2tleV0pID0+IGtleSAhPT0gJ2VudGVycHJpc2UnKVxuICAgIC5tYXAoKFtrZXksIGRhdGFdKSA9PiAoe1xuICAgICAgLi4uZGF0YSxcbiAgICAgIGNvbGxhcHNlZDogIWFjdGl2ZUxpbmtHcm91cHMuaW5jbHVkZXMoa2V5IGFzIE1lbnVMaW5rR3JvdXApLFxuICAgIH0pKTtcbn07XG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBIb21lXG5cbmV4cG9ydCBjb25zdCBob21lVG9wTGlua3M6IENhcmRMaW5rW10gPSBbXG4gIHtcbiAgICBpY29uOiAnZmEtZmlsZS1pbXBvcnQnLFxuICAgIHRpdGxlOiAnR2V0IFN0YXJ0ZWQnLFxuICAgIGRlc2NyaXB0aW9uOlxuICAgICAgJ0V4cGxvcmUgdGhlIGZ1bGwgcG90ZW50aWFsIG9mIFN0YWNrQmxpdHo6IGZyb20gd3JpdGluZyBjb2RlIG9yIHNwaW5uaW5nIHF1aWNrIGRlbW9zIHRvIG1ha2luZyB5b3VyIGRvY3MgZGVsaWdodGZ1bC4nLFxuICAgIHVybDogJy9ndWlkZXMvdXNlci1ndWlkZS93aGF0LWlzLXN0YWNrYmxpdHonLFxuICB9LFxuICB7XG4gICAgaWNvbjogJ2ZhLWJyb3dzZXInLFxuICAgIHRpdGxlOiAnQ29kZWZsb3cnLFxuICAgIGRlc2NyaXB0aW9uOlxuICAgICAgJ09uZSBjbGljayBvcGVucyBhIGZ1bGwgaW4tYnJvd3NlciBJREUgZm9yIHlvdXIgcmVwb3MsIGlzc3VlcywgYW5kIFBScy4gTm8gbW9yZSBjbG9uaW5nLCBpbnN0YWxsaW5nLCBzdGFzaGluZyEnLFxuICAgIHVybDogJy9jb2RlZmxvdy93aGF0LWlzLWNvZGVmbG93JyxcbiAgfSxcbiAge1xuICAgIGljb246ICdmYS1icmFja2V0cy1jdXJseScsXG4gICAgdGl0bGU6ICdBUEkgUmVmZXJlbmNlJyxcbiAgICBkZXNjcmlwdGlvbjpcbiAgICAgICdFbWJlZCBHaXRIdWIgcmVwb3MsIGNyZWF0ZSBuZXcgcHJvamVjdHMsIGJ1aWxkIGVkdWNhdGlvbmFsIGV4cGVyaWVuY2VzLCBhbGwgcHJvZ3JhbW1hdGljYWxseSB3aXRoIG91ciBTREsuJyxcbiAgICB1cmw6ICcvcGxhdGZvcm0vYXBpL2phdmFzY3JpcHQtc2RrJyxcbiAgfSxcbiAge1xuICAgIGljb246ICdmYS1saWZlLXJpbmcnLFxuICAgIHRpdGxlOiAnSW50ZWdyYXRpbmcgU3RhY2tCbGl0eicsXG4gICAgZGVzY3JpcHRpb246XG4gICAgICAnRm9sbG93IGd1aWRlcyBvbiBidWlsZGluZyBpbnRlcmFjdGl2ZSBwbGF5Z3JvdW5kcywgaW1wcm92aW5nIGJ1ZyByZXByb3MsIGFuZCB1c2luZyBTdGFja0JsaXR6IGZvciB0ZWNoIGVkdWNhdGlvbi4nLFxuICAgIHVybDogJy9ndWlkZXMvaW50ZWdyYXRpb24vb3Blbi1mcm9tLWdpdGh1YicsXG4gIH0sXG4gIHtcbiAgICBpY29uOiAnZmEtdXNlcnMnLFxuICAgIHRpdGxlOiAnVGVhbXMnLFxuICAgIGRlc2NyaXB0aW9uOlxuICAgICAgJ1dpdGggU3RhY2tCbGl0eiBUZWFtcyB5b3UgY3JlYXRlIGEgc2VjdXJlLCBwcml2YXRlIHdvcmtzcGFjZSBmb3IgeW91IGFuZCB5b3VyIHRlYW1tYXRlcy4nLFxuICAgIHVybDogJy90ZWFtcy93aGF0LWlzLXN0YWNrYmxpdHotdGVhbXMnLFxuICB9LFxuICB7XG4gICAgaWNvbjogJ2ZhLXNlcnZlcicsXG4gICAgdGl0bGU6ICdFbnRlcnByaXNlIFNlcnZlcicsXG4gICAgZGVzY3JpcHRpb246XG4gICAgICAnUnVuIFN0YWNrQmxpdHogYmVoaW5kIHlvdXIgZmlyZXdhbGwsIG9uIG5ldyBvciBleGlzdGluZyBLdWJlcm5ldGVzIGNsdXN0ZXJzLCB3aXRoIG9wdGlvbnMgZm9yIGFpciBnYXBwaW5nIGFuZCBTU08uJyxcbiAgICB1cmw6ICcvZW50ZXJwcmlzZS9vdmVydmlldycsXG4gIH0sXG5dO1xuXG5leHBvcnQgY29uc3QgaG9tZUV4dGVybmFsTGlua3M6IENhcmRMaW5rW10gPSBbXG4gIHtcbiAgICB0aXRsZTogJ1N0YWNrQmxpdHogQmxvZycsXG4gICAgZGVzY3JpcHRpb246XG4gICAgICAnU3RheSB1cCB0byBkYXRlIHdpdGggb3VyIG5ld3MsIHJlYWQgdGVjaCBwb3N0cyBmcm9tIG91ciBlbmdpbmVlcnMsIGFuZCBqb2luIGluIGNlbGVicmF0aW5nIG91ciBjb21tdW5pdHkuJyxcbiAgICB1cmw6ICdodHRwczovL2Jsb2cuc3RhY2tibGl0ei5jb20vJyxcbiAgICBsYXJnZTogdHJ1ZSxcbiAgICBiZ0ltZzogJ2JvbHQnLFxuICB9LFxuICB7XG4gICAgdGl0bGU6ICdDb21tdW5pdHknLFxuICAgIGRlc2NyaXB0aW9uOlxuICAgICAgJ0pvaW4gb3VyIHN1cHBvcnRpdmUgY29tbXVuaXR5IG9uIERpc2NvcmQsIGFzayBxdWVzdGlvbnMsIGFuZCBzaGFyZSB5b3VyIFN0YWNrQmxpdHogcHJvamVjdHMuJyxcbiAgICB1cmw6ICdodHRwczovL2Rpc2NvcmQuZ2cvc3RhY2tibGl0eicsXG4gICAgbGFyZ2U6IHRydWUsXG4gICAgYmdJbWc6ICdzcXVhcmVzJyxcbiAgfSxcbl07XG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBGb290ZXJcblxuZXhwb3J0IGNvbnN0IGZvb3RlclNlY3Rpb25zOiBGb290ZXJTZWN0aW9uW10gPSBbXG4gIHtcbiAgICB0aXRsZTogJ1dvcmtzcGFjZXMnLFxuICAgIGl0ZW1zOiBbXG4gICAgICB7IHRleHQ6ICdQb3B1bGFyJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vP3N0YXJ0ZXJzPXBvcHVsYXInIH0sXG4gICAgICB7IHRleHQ6ICdGcm9udGVuZCcsIGxpbms6ICdodHRwczovL3N0YWNrYmxpdHouY29tLz9zdGFydGVycz1mcm9udGVuZCcgfSxcbiAgICAgIHsgdGV4dDogJ0JhY2tlbmQnLCBsaW5rOiAnaHR0cHM6Ly9zdGFja2JsaXR6LmNvbS8/c3RhcnRlcnM9YmFja2VuZCcgfSxcbiAgICAgIHsgdGV4dDogJ0Z1bGxzdGFjaycsIGxpbms6ICdodHRwczovL3N0YWNrYmxpdHouY29tLz9zdGFydGVycz1mdWxsc3RhY2snIH0sXG4gICAgICB7IHRleHQ6ICdWaXRlJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vP3N0YXJ0ZXJzPXZpdGUnIH0sXG4gICAgICB7IHRleHQ6ICdEb2NzLCBCbG9ncyAmIFNsaWRlcycsIGxpbms6ICdodHRwczovL3N0YWNrYmxpdHouY29tLz9zdGFydGVycz1kb2NzJyB9LFxuICAgICAgeyB0ZXh0OiAnVmFuaWxsYScsIGxpbms6ICdodHRwczovL3N0YWNrYmxpdHouY29tLz9zdGFydGVycz12YW5pbGxhJyB9LFxuICAgIF0sXG4gIH0sXG4gIHtcbiAgICB0aXRsZTogJ1N0YXJ0IGEgbmV3IFByb2plY3QnLFxuICAgIGl0ZW1zOiBbXG4gICAgICB7IHRleHQ6ICdGcm9tIGEgV29ya3NwYWNlJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vP3N0YXJ0ZXJzPXBvcHVsYXInIH0sXG4gICAgICB7XG4gICAgICAgIHRleHQ6ICdGcm9tIGEgR2l0SHViIFJlcG9zaXRvcnknLFxuICAgICAgICBsaW5rOiAnL2d1aWRlcy91c2VyLWd1aWRlL2ltcG9ydGluZy1wcm9qZWN0cyNpbXBvcnQtZnJvbS1naXRodWInLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgdGV4dDogJ0Zyb20geW91ciBjb21wdXRlcicsXG4gICAgICAgIGxpbms6ICcvZ3VpZGVzL3VzZXItZ3VpZGUvaW1wb3J0aW5nLXByb2plY3RzI3VwbG9hZC1mcm9tLXlvdXItY29tcHV0ZXInLFxuICAgICAgfSxcbiAgICBdLFxuICB9LFxuICB7XG4gICAgdGl0bGU6ICdQcm9kdWN0JyxcbiAgICBpdGVtczogW1xuICAgICAgeyB0ZXh0OiAnRG9jcycsIGxpbms6ICdodHRwczovL2RldmVsb3Blci5zdGFja2JsaXR6LmNvbS8nIH0sXG4gICAgICB7IHRleHQ6ICdFbnRlcnByaXNlJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vZW50ZXJwcmlzZScgfSxcbiAgICAgIHsgdGV4dDogJ1ByaWNpbmcnLCBsaW5rOiAnaHR0cHM6Ly9zdGFja2JsaXR6LmNvbS9tZW1iZXJzaGlwJyB9LFxuICAgICAgeyB0ZXh0OiAnQ2FzZSBTdHVkaWVzJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vY2FzZS1zdHVkaWVzJyB9LFxuICAgIF0sXG4gIH0sXG4gIHtcbiAgICB0aXRsZTogJ0NvbXBhbnknLFxuICAgIGl0ZW1zOiBbXG4gICAgICB7IHRleHQ6ICdCbG9nJywgbGluazogJ2h0dHBzOi8vYmxvZy5zdGFja2JsaXR6LmNvbS8nIH0sXG4gICAgICB7IHRleHQ6ICdDYXJlZXJzJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vY2FyZWVycycgfSxcbiAgICAgIHsgdGV4dDogJ0NvbW11bml0eScsIGxpbms6ICdodHRwczovL2Rpc2NvcmQuZ2cvc3RhY2tibGl0eicgfSxcbiAgICAgIHsgdGV4dDogJ0VudGVycHJpc2UgU2FsZXMnLCBsaW5rOiAnaHR0cHM6Ly9zdGFja2JsaXR6LmNvbS9lbnRlcnByaXNlLWNvbnRhY3QnIH0sXG4gICAgICB7IHRleHQ6ICdQcml2YWN5JywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vcHJpdmFjeS1wb2xpY3knIH0sXG4gICAgICB7IHRleHQ6ICdUZXJtcyBvZiBTZXJ2aWNlJywgbGluazogJ2h0dHBzOi8vc3RhY2tibGl0ei5jb20vdGVybXMtb2Ytc2VydmljZScgfSxcbiAgICBdLFxuICB9LFxuICB7XG4gICAgdGl0bGU6ICdDb25uZWN0JyxcbiAgICBpdGVtczogW1xuICAgICAgeyB0ZXh0OiAnR2l0SHViJywgbGluazogJ2h0dHBzOi8vZ2l0aHViLmNvbS9zdGFja2JsaXR6L2NvcmUnIH0sXG4gICAgICB7IHRleHQ6ICdUd2l0dGVyJywgbGluazogJ2h0dHBzOi8vdHdpdHRlci5jb20vc3RhY2tibGl0eicgfSxcbiAgICAgIHsgdGV4dDogJ0Rpc2NvcmQnLCBsaW5rOiAnaHR0cHM6Ly9kaXNjb3JkLmdnL3N0YWNrYmxpdHonIH0sXG4gICAgXSxcbiAgfSxcbl07XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdRLE9BQU8sWUFBWTtBQUUzUixPQUFPLGdCQUFnQjtBQUN2QixTQUFTLG9CQUFxQzs7O0FDRTlDLElBQU0sYUFBb0Q7QUFBQSxFQUN4RCxXQUFXO0FBQUEsSUFDVCxFQUFFLE1BQU0sc0JBQXNCLE1BQU0sd0NBQXdDO0FBQUEsSUFDNUUsRUFBRSxNQUFNLG1CQUFtQixNQUFNLHFDQUFxQztBQUFBLElBQ3RFLEVBQUUsTUFBTSxvQkFBb0IsTUFBTSxzQ0FBc0M7QUFBQSxJQUN4RSxFQUFFLE1BQU0sMEJBQTBCLE1BQU0sNENBQTRDO0FBQUEsSUFDcEYsRUFBRSxNQUFNLHNCQUFzQixNQUFNLHdDQUF3QztBQUFBLElBQzVFLEVBQUUsTUFBTSxtQ0FBOEIsTUFBTSw4Q0FBOEM7QUFBQSxJQUMxRixFQUFFLE1BQU0sZUFBZSxNQUFNLGlDQUFpQztBQUFBLElBQzlELEVB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 diff --git a/.vitepress/theme/components/StarterGrid.vue b/.vitepress/theme/components/StarterGrid.vue index 63034d80..4d431b5c 100644 --- a/.vitepress/theme/components/StarterGrid.vue +++ b/.vitepress/theme/components/StarterGrid.vue @@ -17,7 +17,7 @@ defineProps<{ links: any[] }>(); display: grid; margin: 24px 0; padding: 0; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; list-style: none; } diff --git a/.vitepress/theme/data/types.ts b/.vitepress/theme/data/types.ts index 34615a08..a712fcd3 100644 --- a/.vitepress/theme/data/types.ts +++ b/.vitepress/theme/data/types.ts @@ -1,6 +1,5 @@ export type MenuLinkGroup = | 'api' - | 'codeflow' | 'teams' | 'enterprise' | 'integrationGuide' diff --git a/.vitepress/theme/icons/fa-bolt.svg b/.vitepress/theme/icons/fa-bolt.svg new file mode 100644 index 00000000..c82d1436 --- /dev/null +++ b/.vitepress/theme/icons/fa-bolt.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3155f30e..2d4e0ece 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -69,7 +69,7 @@ Except for small typo fixes and content updaets, the starting point for contribu **If you don't have any specific issue you'd like to work on**, you can browse available ones. Please note that we use [issue labels](#issue-labels-we-use) so you can modify your search. After you've found an issue you'd like to work on, leave a comment and tell us when you have time to do that. A docs team member will assign you. ### 2. **Work on the issue** -Once assigned to an issue, choose [the right tool for the job](README.md#development) - you may want to use Web Publisher, Codeflow, or develop locally. We have no preference. +Once assigned to an issue, choose [the right tool for the job](README.md#development) - you may want to use Web Publisher, StackBlitz, or develop locally. We have no preference. Whenever in doubt or whenever you feel stuck, please ask clarifying questions in the issue thread or on our [Discord](https://discord.gg/EQ7uJQxC). We are here to support you! diff --git a/README.md b/README.md index ac7897c8..7f904035 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ StackBlitz is an **instant fullstack web IDE for the JavaScript ecosystem**. It Now you can use the web to build the web. -In fact, why not edit this docs in Codeflow IDE? +In fact, why not edit this docs in StackBlitz? -Open in Codeflow +Open in StackBlitz --- @@ -65,7 +65,7 @@ If what you want to say doesn't really fall into actionable "problem" or "improv There are three ways to interact with this repository: - For **a small content update**, you can use [Web Publisher](#content-updates-with-web-publisher). -- If you want **to explore and develop** this site, use [StackBlitz Codeflow](#developing-with-stackblitz-codeflow). +- If you want **to explore and develop** this site, use [StackBlitz](#developing-with-stackblitz). - Alternatively, you can [run the docs locally](#developing-locally). ### Content updates with Web Publisher @@ -78,8 +78,8 @@ Use Web Publisher for small content updates for a pleasant editing experience: 4. You will be redirected to a GitHub PR template page prepared for you to submit a PR. -### Developing with StackBlitz Codeflow -Use StackBlitz Codeflow for bigger content updates. Codeflow will spin up the entire dev environment with a running dev server. When using Codeflow, please remember to commit and push your changes frequently. +### Developing with StackBlitz +Use StackBlitz for bigger content updates. StackBlitz will spin up the entire dev environment with a running dev server. When using StackBlitz, please remember to commit and push your changes frequently. To access it, [click this button](https://stackblitz.com/~/github.com/stackblitz/docs). diff --git a/docs/codeflow/assets/adding-dotenv-variables.gif b/docs/codeflow/assets/adding-dotenv-variables.gif deleted file mode 100644 index 5996cd7b..00000000 Binary files a/docs/codeflow/assets/adding-dotenv-variables.gif and /dev/null differ diff --git a/docs/codeflow/assets/codeflowapp-issue.jpg b/docs/codeflow/assets/codeflowapp-issue.jpg deleted file mode 100644 index 03874786..00000000 Binary files a/docs/codeflow/assets/codeflowapp-issue.jpg and /dev/null differ diff --git a/docs/codeflow/assets/updating-variables-scope.gif b/docs/codeflow/assets/updating-variables-scope.gif deleted file mode 100644 index d5775071..00000000 Binary files a/docs/codeflow/assets/updating-variables-scope.gif and /dev/null differ diff --git a/docs/codeflow/assets/wp-editor-view.png b/docs/codeflow/assets/wp-editor-view.png deleted file mode 100644 index 9c3f70f4..00000000 Binary files a/docs/codeflow/assets/wp-editor-view.png and /dev/null differ diff --git a/docs/codeflow/assets/wp-open-in-ide.png b/docs/codeflow/assets/wp-open-in-ide.png deleted file mode 100644 index 1aa4db1b..00000000 Binary files a/docs/codeflow/assets/wp-open-in-ide.png and /dev/null differ diff --git a/docs/codeflow/assets/wp-opening-from-gh.gif b/docs/codeflow/assets/wp-opening-from-gh.gif deleted file mode 100644 index 8daab5b4..00000000 Binary files a/docs/codeflow/assets/wp-opening-from-gh.gif and /dev/null differ diff --git a/docs/codeflow/assets/wp-preview-window-cut.png b/docs/codeflow/assets/wp-preview-window-cut.png deleted file mode 100644 index 63cc5911..00000000 Binary files a/docs/codeflow/assets/wp-preview-window-cut.png and /dev/null differ diff --git a/docs/codeflow/assets/wp-submitting-to-github.gif b/docs/codeflow/assets/wp-submitting-to-github.gif deleted file mode 100644 index 26668ec1..00000000 Binary files a/docs/codeflow/assets/wp-submitting-to-github.gif and /dev/null differ diff --git a/docs/codeflow/assets/wp-top-nav-bar-small-right.png b/docs/codeflow/assets/wp-top-nav-bar-small-right.png deleted file mode 100644 index 453a05e1..00000000 Binary files a/docs/codeflow/assets/wp-top-nav-bar-small-right.png and /dev/null differ diff --git a/docs/codeflow/assets/wp-top-nav-bar-small.png b/docs/codeflow/assets/wp-top-nav-bar-small.png deleted file mode 100644 index b6f1adfd..00000000 Binary files a/docs/codeflow/assets/wp-top-nav-bar-small.png and /dev/null differ diff --git a/docs/codeflow/assets/wp-top-nav-bar-u.png b/docs/codeflow/assets/wp-top-nav-bar-u.png deleted file mode 100644 index db58d9bd..00000000 Binary files a/docs/codeflow/assets/wp-top-nav-bar-u.png and /dev/null differ diff --git a/docs/codeflow/codeflow-faq.md b/docs/codeflow/codeflow-faq.md deleted file mode 100644 index e708d683..00000000 --- a/docs/codeflow/codeflow-faq.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Codeflow FAQ -description: 'This page addresses the frequently asked questions concerning: current features, security, planned features, pricing and access.' -og_image: codeflow-faq.png ---- - -# {{ $frontmatter.title }} - -This page addresses the frequently asked questions concerning: current features, security, planned features, pricing and access. - -[[toc]] - -## General FAQs - -### What is Codeflow? - - Codeflow consists of four tools: -- Codeflow IDE, -- Web Publisher for content edits, -- CodeflowApp bot for issues and PR, and -- a short URL that chooses the right tool for you. - -[Read more on Codeflow intro page.](./what-is-codeflow.md) - -### Is StackBlitz editor the same as Codeflow IDE? - -**StackBlitz editor** allows you for spinning up quick demos, embedding your projects in your docs, and building project starters. - - - -[Learn more about the full potential of StackBlitz on StackBlitz intro page.](/guides/user-guide/what-is-stackblitz.md) - -### Is Codeflow stable? -Codeflow is currently a beta version, however, general availability can be expected in early 2023. - -## Capabilities & Limitations - -### Can I run Vim? - -This is perhaps the most frequently-asked question with regards to StackBlitz features - and [one of the oldest issues on our repository](https://github.com/stackblitz/core/issues/3). We have good news: you can run Vim in Codeflow IDE by enabling the extension! 🥳 - -### Does my code persist between sessions? - - - -### Can I change the Node version? - -The Node version is locked so currently, there is no ability to change the Node version. - -### Which repos can/not be opened in Codeflow IDE? - -Codeflow IDE should be able to open any repository. When it comes to *running* it, your toolchain needs to be compatible with WebContainers. - -### Can I run private repositories? - -Yes. Private repositories are available for free during beta through 2022. Starting Q1 '23 private repositories will require a subscription. Contact us if you’re interested in learning more about pricing. - -### Can I run any Git repository? - -At this moment we only support GitHub.com repositories. - -### Which files can be opened in Web Publisher? - -Any file type can be opened in Web Publisher. - -### Which package managers do you support? - - - -### Which runtime does Codeflow support? - -Codeflow runs on top of [WebContainers](/guides/user-guide/available-environments#webcontainers), which currently support **Node.js 16**. - -### Does any company use Codeflow IDE for their daily development work? - -At StackBlitz, we do! We use Codeflow IDE for our internal dev work, including PR reviews. In fact, this docs page has been built in Codeflow IDE. - -It's a new product that has **just** been released so check back here in a few months. - -## Security - -### I would like to use Codeflow but I'm not sure if it's secure. - -Since we’re executing the code entirely in the browser's sandbox, Codeflow IDE is actually more secure than running locally. We also use expiring oAuth tokens for interactions with git. - -## Pricing and access - -### Is Codeflow free? - -Codeflow IDE is free for Open Source projects and for public repositories and will remain this way forever. This includes private repositories. Please reach out to [devrel@stackblitz.com](mailto:devrel@stackblitz.com) and we’ll get your organization hooked up with free private repos! - -If your company is interested in using Codeflow, reach out to our [Enterprise Team](https://stackblitz.com/beta-teams-signup). - -### Do I have to be signed in to use Codeflow IDE? - -Yes, only during the beta. Starting Q1 2023, you'll be able to open public repos without being logged in. - -### To open a repository in Codeflow IDE, do I need to be signed in both on StackBlitz and GitHub? Or only one of them? - -You need to sign in to [StackBlitz](https://stackblitz.com) *using* GitHub. diff --git a/docs/codeflow/parts/codeflow-ide.md b/docs/codeflow/parts/codeflow-ide.md deleted file mode 100644 index 161734a5..00000000 --- a/docs/codeflow/parts/codeflow-ide.md +++ /dev/null @@ -1 +0,0 @@ -**Codeflow IDE** is a fully fledged desktop-grade dev environment capable of running your whole workflow - from production-level dev work to reviewing pull requests. \ No newline at end of file diff --git a/docs/codeflow/parts/installing-codeflowapp.md b/docs/codeflow/parts/installing-codeflowapp.md deleted file mode 100644 index 045a58de..00000000 --- a/docs/codeflow/parts/installing-codeflowapp.md +++ /dev/null @@ -1,3 +0,0 @@ -:::tip -Installing CodeflowApp ensures every commit to default branch and any pull request branches are pre-cloned for instant bootup times. Your project will run faster on Codeflow. -::: \ No newline at end of file diff --git a/docs/codeflow/parts/supported-packages.md b/docs/codeflow/parts/supported-packages.md deleted file mode 100644 index b7133986..00000000 --- a/docs/codeflow/parts/supported-packages.md +++ /dev/null @@ -1 +0,0 @@ -Currently, Codeflow IDE supports multiple package managers including pnpm, npm, and Yarn. \ No newline at end of file diff --git a/docs/codeflow/what-is-codeflow.md b/docs/codeflow/what-is-codeflow.md deleted file mode 100644 index 07dfcb16..00000000 --- a/docs/codeflow/what-is-codeflow.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: What is Codeflow? -description: Codeflow is a one-click integration with GitHub for seamless coding workflows. -og_image: what-is-codeflow.png ---- - -# {{ $frontmatter.title }} - - - -:::warning Note: StackBlitz Codeflow is currently in Beta - -Please review our [FAQ](/codeflow/codeflow-faq#capabilities-limitations) for current limitations and [let us know](https://github.com/stackblitz/webcontainer-core/issues) if you find bugs! - -::: - -StackBlitz now helps you switch contexts seamlessly: -- -- -- -- - - -## Key features -- 🔒 **unmatched security**: all development is happening in your browser tab, including running Node.js, git, package managers (npm, yarn, pnpm), and local extensions. -- ⚡️ **shockingly fast**: the entire dev environment spins up in milliseconds - even reinstalling `node_modules` is as simple as refreshing the page, with pnpm running up to four times as fast as locally! -- 💻 **works online and offline**: continue your work even when you lose the Internet connection midway. -- 🔥 **your environment is always online**: your apps never go to sleep and have no bandwidth limits - share the URL with as many friends, colleagues, and communities as you’d like! -- 🆓 **always free for Open Source**: you're the future of the web development and we love you. - -## Explore - -Excited to try it yourself? Try these: -- 📝 Take Web Publisher for a spin by adding your name to [ilovecodeflow.com](https://ilovecodeflow.com/)! -- 💻 Explore how we built [this docs site](https://pr.new/github.com/stackblitz/docs) in Codeflow IDE! -- 🕵️ Review [this suspicious PR](https://pr.new/stackblitz/docs/pull/40) in Codeflow IDE -- 🤖 See our CodeflowApp bot in action on [a PR](https://github.com/stackblitz/docs/pull/40#issue-1404169268)! - -## Learn - -Understand the Codeflow better! Read about: -- Working in [Codeflow IDE](./working-in-codeflow-ide). -- Updating content [with Web Publisher](./content-updates-with-web-publisher). -- Using the short URL [pr.new](./using-pr-new). -- Getting help from [CodeflowApp bot](./integrating-codeflowapp-bot). - -You can also check our **[Frequently Asked Questions page](./codeflow-faq)**. - -## Add Codeflow to your project - -Follow these handy integration guides to link your project to Codeflow within minutes: -- 💻 [Using pr.new](./using-pr-new) integration guide -- 📝 [Web Publisher](./integrating-web-publisher) integration guide -- 🤖 [CodeflowApp bot](./integrating-codeflowapp-bot) integration guide - -## Feedback? Ideas? Dreams? - -Let us know what you think: -- **Ask questions** on [GitHub Discussions](https://github.com/stackblitz/docs/discussions/new?category=Q-A). -- **Request a new docs page** or a more thorough explanation using our [GitHub Discussions](https://github.com/stackblitz/docs/discussions/new?category=ideas)! - - -## What about other online IDEs? - -Unlike StackBlitz, legacy online IDEs run on remote servers and stream the results back to your browser. This approach yields **few security benefits** and **provides a worse experience** than your local machine in nearly every way. - -**StackBlitz solves these problems by doing all computing inside your browser**. This leverages decades of speed and security innovations but also **unlocks key development and debugging benefits**. - -Lastly, StackBlitz is capable of running Node.js inside the browser so you can use the web to build the web. - -## Get involved - -**We love our community!** Please do stay in touch and: - -- Join our supportive community on [the Discord server](https://discord.gg/22zTzrwQrU)! -- Read our [blog](https://blog.stackblitz.com/) and see what we have been up to in our [monthly update posts](https://blog.stackblitz.com/categories/monthly-updates/)! -- Share how you use Codeflow on [Twitter](https://twitter.com/stackblitz)! -- Reach out to our DevRel team via [email](mailto:devrel@stackblitz.com) with your Codeflow ideas, dreams, and wishes! diff --git a/docs/enterprise/overview.md b/docs/enterprise/overview.md index 62f5afa4..c62157f9 100644 --- a/docs/enterprise/overview.md +++ b/docs/enterprise/overview.md @@ -21,7 +21,7 @@ Unlock the full potential of your frontend development team with StackBlitz Ente ## Beta Features - **WebContainers for Node.js Toolchains:** Full node.js dev server and terminal running locally in the browser -- **Codeflow:** Elevate your code editing capabilities with our in-browser VS Code based editor, with extension support +- **Next-generation editor:** Elevate your code editing capabilities with our in-browser VS Code based editor, with extension support - **Enterprise Git Provider Integration:** Leverage your existing version control systems for even more streamlined workflows. ## Popular Use Cases diff --git a/docs/enterprise/starter-projects.md b/docs/enterprise/starter-projects.md index 7b852657..b1d3174f 100644 --- a/docs/enterprise/starter-projects.md +++ b/docs/enterprise/starter-projects.md @@ -102,7 +102,7 @@ This should create a temporary project (not yet saved to the database) using the 4. Edit the forked project's slug to: `polymer-base`. 5. Finally, go to `https://{your-instance}/admin/projects/polymer-base/edit` and change the value of the “Preset” field from `esm` to `polymer`, and save the project. -You should now have a project with the `polymer` preset and whose slug is `polymer-base`. Don't touch this project in the future (you can make it “frozen” in the [project settings](/guides/user-guide/ide-whats-on-your-screen#settings-sidebar) in the editor to prevent accidental changes) to make sure the SDK functionality works well. +You should now have a project with the `polymer` preset and whose slug is `polymer-base`. Don't touch this project in the future (you can make it “frozen” in the [project settings](/guides/user-guide/user-interface#settings-sidebar) in the editor to prevent accidental changes) to make sure the SDK functionality works well. You can add this project to the list of starters on `https://{your-instance}/starters`. diff --git a/docs/codeflow/assets/codeflow-ide-opening-repo.gif b/docs/guides/integration/assets/codeflow-ide-opening-repo.gif similarity index 100% rename from docs/codeflow/assets/codeflow-ide-opening-repo.gif rename to docs/guides/integration/assets/codeflow-ide-opening-repo.gif diff --git a/docs/guides/integration/assets/codeflowapp-issue.jpg b/docs/guides/integration/assets/codeflowapp-issue.jpg new file mode 100644 index 00000000..50c0f244 Binary files /dev/null and b/docs/guides/integration/assets/codeflowapp-issue.jpg differ diff --git a/docs/guides/integration/assets/codeflowapp-pr.jpg b/docs/guides/integration/assets/codeflowapp-pr.jpg new file mode 100644 index 00000000..f9eee23b Binary files /dev/null and b/docs/guides/integration/assets/codeflowapp-pr.jpg differ diff --git a/docs/guides/integration/assets/embed-options.png b/docs/guides/integration/assets/embed-options.png index cf087cf4..0b89a7b4 100644 Binary files a/docs/guides/integration/assets/embed-options.png and b/docs/guides/integration/assets/embed-options.png differ diff --git a/docs/codeflow/assets/wp-profile-dropdown.png b/docs/guides/integration/assets/wp-profile-dropdown.png similarity index 100% rename from docs/codeflow/assets/wp-profile-dropdown.png rename to docs/guides/integration/assets/wp-profile-dropdown.png diff --git a/docs/codeflow/assets/wp-whole.png b/docs/guides/integration/assets/wp-whole.png similarity index 100% rename from docs/codeflow/assets/wp-whole.png rename to docs/guides/integration/assets/wp-whole.png diff --git a/docs/guides/integration/create-with-sdk.md b/docs/guides/integration/create-with-sdk.md index d0ef5ddb..e15d35fe 100644 --- a/docs/guides/integration/create-with-sdk.md +++ b/docs/guides/integration/create-with-sdk.md @@ -147,7 +147,7 @@ Now that you have the content of your project defined, it is useful to provide s This is how the title and description look inside a StackBlitz project: -Example of Title and Description displayed in StackBlitz editor +Example of Title and Description displayed in StackBlitz ## Options: Customizing your project diff --git a/docs/guides/integration/embedding.md b/docs/guides/integration/embedding.md index 94e67618..fc400c9d 100644 --- a/docs/guides/integration/embedding.md +++ b/docs/guides/integration/embedding.md @@ -1,22 +1,22 @@ --- -title: Embedding projects -description: Embedding is one way to display a StackBlitz editor in a documentation page, a blog post, or any other page. This page covers manual embedding in iframes. +title: Manually embedding projects +description: Embedding is one way to display StackBlitz in a documentation page, a blog post, or any other page. This page covers manual embedding in iframes. og_image: embedding-projects.png --- # {{ $frontmatter.title }} -Embedding is one way to display a StackBlitz editor in a documentation page, a blog post, or any other page. This page covers manual embedding in iframes. You can also do it [programmatically by using our SDK](/guides/integration/create-with-sdk). +Embedding is one way to display StackBlitz in a documentation page, a blog post, or any other page. This page covers manual embedding in iframes. You can also do it [programmatically by using our SDK](/guides/integration/create-with-sdk). ## Embedding StackBlitz project on a page **1.** Open a project of your choosing and click the "Share" button in the top left navigation bar: -![Share Button in StackBlitz Editor](./assets/project-share-button.png) +![Share Button in StackBlitz](./assets/project-share-button.png) **2.** In the popup window, choose the "Embed" tab. Customize your embed by choosing appropriate options from the panel on the right and check the preview on the bottom to see how your embed will look. If you're satisfied, copy the embed URL. -![Embed and Preview tabs in StackBlitz Editor](./assets/embed-project.png) +![Embed and Preview tabs in StackBlitz](./assets/embed-project.png) :::tip You can customize your embed further by adding suitable [query parameters](#embed-url-options). @@ -69,5 +69,5 @@ You can use the following URL query parameters to customize the appearance and f Alternatively, you can use our [JavaScript SDK methods](/platform/api/javascript-sdk) for embedding StackBlitz projects in pages to avoid creating and configuring iframes. -[ui_docs]: /guides/user-guide/ide-whats-on-your-screen +[ui_docs]: /guides/user-guide/user-interface [available_env_docs]: /guides/user-guide/available-environments diff --git a/docs/codeflow/integrating-codeflowapp-bot.md b/docs/guides/integration/integrating-codeflowapp-bot.md similarity index 60% rename from docs/codeflow/integrating-codeflowapp-bot.md rename to docs/guides/integration/integrating-codeflowapp-bot.md index 26d95cc3..e6c8b9b0 100644 --- a/docs/codeflow/integrating-codeflowapp-bot.md +++ b/docs/guides/integration/integrating-codeflowapp-bot.md @@ -1,46 +1,46 @@ --- -title: Integrating CodeflowApp Bot -description: This page covers integrating CodeflowApp Bot into your GitHub repositories. +title: Integrating GitHub +description: This page covers integrating StackBlitz with your repositories in GitHub. og_image: integrating-codeflowapp-bot.png --- # {{ $frontmatter.title }} -This page covers integrating CodeflowApp Bot into your GitHub repositories. +{{ $frontmatter.description }} ## What is CodeflowApp Bot? ### Pull requests -Once integrated, it will comment on every PR with a link to instantly run and review it: +Once integrated, the StackBlitz app will comment on every PR with a link to instantly run and review it: CodeflowApp bot in action ### Issues -Whenever an issue is opened, CodeflowApp checks if a stackblitz.com bug reproduction URL is present in the comment text. +Whenever an issue is opened, the integration checks if a stackblitz.com bug reproduction URL is present in the comment text. -If reproduction URL is present, CodeflowApp will comment with a "Fix this issue" button that allows you to start a new pull request with the bug reproduction mounted in a sibling folder next to your repository directory for live testing: +If reproduction URL is present, the StackBlitz GitHub app will comment with a "Fix this issue" button that allows you to start a new pull request with the bug reproduction mounted in a sibling folder next to your repository directory for live testing: CodeflowApp bot in action -## Installing the CodeflowApp Bot +## Installing the StackBlitz GitHub app -To install the CodeflowApp bot on a repository, you will install it using GitHub UI. +To install the StackBlitz GitHub app on a repository, you will install it using GitHub UI. -1. Visit [CodeflowApp profile page](https://stackblitz.com/install-github-app) -2. Select the account or organization, as well as the repositories you want the bot to have access to. - - If you choose “all in Organization”, CodeflowApp bot will be installed on all repositories in your organization. - - Please don't worry - if you change your mind, you can change the bot access or completely disable it! +1. Visit the [GitHub integration configuration](https://stackblitz.com/install-github-app) +2. Select the account or organization, as well as the repositories you want the app to have access to. + - If you choose “all in Organization”, StackBlitz will be installed on all repositories in your organization. + - If you change your mind, you can always change the app's access (or disable it completely). -## Disabling CodeflowApp Bot +## Disabling the integration -Once installed, the bot will be enabled by default on the repository and will be triggered whenever there is a new PR or an issue. +Once installed, the app will be enabled by default on the repository and will be triggered whenever there is a new PR or an issue. -To disable the bot: +To disable the app: 1. Create `.stackblitz` folder in the root directory of the project. 2. Inside this folder, create a file called `codeflow.json`, specifying which actions you want disabled: @@ -65,7 +65,7 @@ Alternatively, you can also pause or uninstall the bot [through the GitHub UI](h ## Enabling package overrides for issue reproductions -Codeflow allows users to specify which packages they want to override in `package.json` and where the packages are located. A pnpm override is what is going to be installed when you run pnpm i instead of what is defined in a package.json file. +StackBlitz allows users to specify which packages they want to override in `package.json` and where the packages are located. A pnpm override is what is going to be installed when you run pnpm i instead of what is defined in a package.json file. :::info pnpm override A [pnpm override](https://pnpm.io/package_json#pnpmoverrides) "instructs pnpm to override a dependency in the dependency graph. This is useful to enforce all your packages to use a single version of a dependency, backport a fix, or replace a dependency with a fork." @@ -76,7 +76,7 @@ A [pnpm override](https://pnpm.io/package_json#pnpmoverrides) "instructs pnpm to For example, an issue is submitted to Vite with a StackBlitz reproduction. 1. A maintainer opens the issue in Codeflow IDE. Codeflow IDE pulls the reproduction that is defined in the issue, puts it in a reproduction folder, and reads the `codeflow.json` file. -2. If that file defines an override, Codeflow adds them to the repro’s `package.json` file. So, for example, instead of pulling Vite from npm, it will link the local vite project into that reproduction instead. +2. If that file defines an override, StackBlitz adds them to the repro’s `package.json` file. So, for example, instead of pulling Vite from npm, it will link the local vite project into that reproduction instead. 3. The maintainer can then run `pnpm i` in the repro and pnpm will install the dependencies defined in the override. :::info TL;DR diff --git a/docs/codeflow/integrating-web-publisher.md b/docs/guides/integration/integrating-web-publisher.md similarity index 97% rename from docs/codeflow/integrating-web-publisher.md rename to docs/guides/integration/integrating-web-publisher.md index 1e0cfa9b..a3e556cd 100644 --- a/docs/codeflow/integrating-web-publisher.md +++ b/docs/guides/integration/integrating-web-publisher.md @@ -101,7 +101,7 @@ To specify the first parameter, add `?` at the end of the base link. Connect the -Follow [this integration guide](./integrating-codeflowapp-bot.md) to integrate CodeflowApp bot into your project. +Follow [this integration guide](/guides/integration/integrating-codeflowapp-bot) to integrate CodeflowApp bot into your project. +**pr.new** is a short URL that can be used on any repository to explore code, a branch or an issue, to review a PR, or even to edit a file, all in a live environment with a realtime preview. ## How does pr.new work? @@ -26,7 +26,7 @@ To open a GitHub repository with pr.new, visit it on GitHub and in the browser's > pr.new/github.com/stackblitz/docs -You will be redirected to [Codeflow IDE](./working-in-codeflow-ide) where you can work to [submit a PR](./working-in-codeflow-ide#submitting-a-pr) or just explore the codebase. +You will be redirected to [StackBlitz](/guides/user-guide/working-in-stackblitz-editor) where you can work to [submit a PR](/guides/user-guide/working-in-stackblitz-editor#submitting-a-pr) or just explore the codebase. ### Opening a specific branch @@ -34,7 +34,7 @@ To inspect a branch with pr.new, visit it on GitHub and in the browser's address > pr.new/github.com/stackblitz/docs/tree/BRANCH-NAME -You will be redirected to [Codeflow IDE](./working-in-codeflow-ide) where you can explore the code, continue the work, or investigate the issue. +You will be redirected to [StackBlitz](/guides/user-guide/working-in-stackblitz-editor) where you can explore the code, continue the work, or investigate the issue. ### Reviewing a PR @@ -42,7 +42,7 @@ To review a PR with pr.new, visit the submitted pull request on GitHub and in th > pr.new/github.com/stackblitz/docs/pull/33 -You will be redirected to [Codeflow IDE](./working-in-codeflow-ide) in the ["PR review mode"](./working-in-codeflow-ide#reviewing-a-pr-with-codeflow-ide) where you will see diffs. You can switch to the standard file view by choosing the "file" icon in the left vertical nav bar. +You will be redirected to [StackBlitz](/guides/user-guide/working-in-stackblitz-editor) in the ["PR review mode"](/guides/user-guide/working-in-stackblitz-editor#reviewing-a-pr-with-codeflow-ide) where you will see diffs. You can switch to the standard file view by choosing the "file" icon in the left vertical nav bar. ## "Open in Codeflow" button @@ -74,12 +74,4 @@ Or, in HTML: ``` -If the user is logged in at GitHub and StackBlitz (in beta), Codeflow IDE will open up. No further configuration is needed. - -## Opening a single file - -To edit a single file with pr.new, visit it in the GitHub repository and click the "Edit" icon (a pencil). Now, in the browser's address tab, add `pr.new` to the beginning of the URL, for example: - -> pr.new/github.com/stackblitz/docs/edit/main/docs/guides/user-guide/what-is-stackblitz.md - -You will be redirected to [Web Publisher](./content-updates-with-web-publisher) for a more pleasant editing experience. If you prefer to work in a full environment, click on the "Open in IDE" button and you will be redirected to [Codeflow IDE](./working-in-codeflow-ide). \ No newline at end of file +If the user is logged in at GitHub and StackBlitz (in beta), Codeflow IDE will open up. No further configuration is needed. \ No newline at end of file diff --git a/docs/codeflow/assets/add-new-scope.gif b/docs/guides/user-guide/assets/add-new-scope.gif similarity index 100% rename from docs/codeflow/assets/add-new-scope.gif rename to docs/guides/user-guide/assets/add-new-scope.gif diff --git a/docs/guides/user-guide/assets/adding-dotenv-variables.gif b/docs/guides/user-guide/assets/adding-dotenv-variables.gif new file mode 100644 index 00000000..e69de29b diff --git a/docs/codeflow/assets/codeflow-ide-white-dots-cut.png b/docs/guides/user-guide/assets/codeflow-ide-white-dots-cut.png similarity index 100% rename from docs/codeflow/assets/codeflow-ide-white-dots-cut.png rename to docs/guides/user-guide/assets/codeflow-ide-white-dots-cut.png diff --git a/docs/codeflow/assets/codeflowapp-pr.jpg b/docs/guides/user-guide/assets/codeflowapp-pr.jpg similarity index 100% rename from docs/codeflow/assets/codeflowapp-pr.jpg rename to docs/guides/user-guide/assets/codeflowapp-pr.jpg diff --git a/docs/codeflow/assets/copy-paste-env.gif b/docs/guides/user-guide/assets/copy-paste-env.gif similarity index 100% rename from docs/codeflow/assets/copy-paste-env.gif rename to docs/guides/user-guide/assets/copy-paste-env.gif diff --git a/docs/codeflow/assets/error-out-of-memory-popup.png b/docs/guides/user-guide/assets/error-out-of-memory-popup.png similarity index 100% rename from docs/codeflow/assets/error-out-of-memory-popup.png rename to docs/guides/user-guide/assets/error-out-of-memory-popup.png diff --git a/docs/codeflow/assets/settings-json.png b/docs/guides/user-guide/assets/settings-json.png similarity index 100% rename from docs/codeflow/assets/settings-json.png rename to docs/guides/user-guide/assets/settings-json.png diff --git a/docs/codeflow/assets/settings-view-json-highlightened.png b/docs/guides/user-guide/assets/settings-view-json-highlightened.png similarity index 100% rename from docs/codeflow/assets/settings-view-json-highlightened.png rename to docs/guides/user-guide/assets/settings-view-json-highlightened.png diff --git a/docs/guides/user-guide/assets/updating-variables-scope.gif b/docs/guides/user-guide/assets/updating-variables-scope.gif new file mode 100644 index 00000000..e69de29b diff --git a/docs/codeflow/assets/vsc-to-sb-settings.webp b/docs/guides/user-guide/assets/vsc-to-sb-settings.webp similarity index 100% rename from docs/codeflow/assets/vsc-to-sb-settings.webp rename to docs/guides/user-guide/assets/vsc-to-sb-settings.webp diff --git a/docs/guides/user-guide/assets/wp-editor-view.png b/docs/guides/user-guide/assets/wp-editor-view.png new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/user-guide/assets/wp-opening-from-gh.gif b/docs/guides/user-guide/assets/wp-opening-from-gh.gif new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/user-guide/assets/wp-preview-window-cut.png b/docs/guides/user-guide/assets/wp-preview-window-cut.png new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/user-guide/assets/wp-profile-dropdown.png b/docs/guides/user-guide/assets/wp-profile-dropdown.png new file mode 100644 index 00000000..4d0165c3 Binary files /dev/null and b/docs/guides/user-guide/assets/wp-profile-dropdown.png differ diff --git a/docs/guides/user-guide/assets/wp-submitting-to-github.gif b/docs/guides/user-guide/assets/wp-submitting-to-github.gif new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/user-guide/assets/wp-top-nav-bar-u.png b/docs/guides/user-guide/assets/wp-top-nav-bar-u.png new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/user-guide/available-environments.md b/docs/guides/user-guide/available-environments.md index 32a34fe3..16b44ac3 100644 --- a/docs/guides/user-guide/available-environments.md +++ b/docs/guides/user-guide/available-environments.md @@ -12,13 +12,6 @@ og_image: available-environments.png There are two underlying compute environments that can be used to power a StackBlitz project: **EngineBlock** or **WebContainers**. Each project in StackBlitz runs on one of these compute environments. This docs page is designed to describe some of the technical differences between the environments and help you [determine which compute environment you are using](#which-compute-environment-are-you-using). -:::tip -The compute environments being discussed on this page refer to the behind the scenes tech powering the project and NOT the editor/visual user interface. As of Q1 2024 StackBlitz has 3 distinct editors, and you can learn more about them at the links below:
-:link: [StackBlitz Classic Editor](/guides/user-guide/getting-started)
-:link: [Stackblitz Codeflow](/codeflow/what-is-codeflow)
-:link: [Stackblitz Web Publisher](/codeflow/integrating-web-publisher) -::: - Depending on the compute environment and choice of editor, StackBlitz will have slightly different features and User Interface elements. See an overview of both compute environments in the table below - and you can directly consult the section on [EngineBlock](#engineblock) or [WebContainers](#webcontainers) for more specifics on each. | Feature | EngineBlock | WebContainers | @@ -27,12 +20,12 @@ Depending on the compute environment and choice of editor, StackBlitz will have | Supported package managers | Turbo v1 | npm, pnpm, yarn v1 | | Full Node.js environment | | | | Shareable preview URL | | | -| [Console](/guides/user-guide/ide-whats-on-your-screen#console) | | | -| [Terminal](/guides/user-guide/ide-whats-on-your-screen#terminal) | | | +| [Console](/guides/user-guide/user-interface#console) | | | +| [Terminal](/guides/user-guide/user-interface#terminal) | | | | ***Editor Support*** | | | | [Classic Editor](/guides/user-guide/getting-started) | | | -| [Codeflow](/codeflow/working-in-codeflow-ide) (beta) | | | -| [Web Publisher](/codeflow/content-updates-with-web-publisher) (beta) | | | +| [StackBlitz Editor](/guides/user-guide/working-in-stackblitz-editor) | | | +| [Web Publisher](/guides/user-guide/content-updates-with-web-publisher) (beta) | | | To explore these differences in practice, we took a React project in the Classic Editor and turned it into: @@ -69,13 +62,13 @@ With WebContainers, you gain the flexibility to work with virtually any front-en WebContainers natively support all the major package managers including [npm, pnpm, and yarn v1](https://blog.stackblitz.com/posts/announcing-native-package-manager-support/), just like a local development environment. This offers a more production grade approach to managing dependencies compared to EngineBlock's Turbo v1. **Editor Support**
-WebContainers are available in all StackBlitz editors: [Classic Editor](/guides/user-guide/getting-started), [Codeflow](/codeflow/working-in-codeflow-ide), and [Web Publisher](/codeflow/content-updates-with-web-publisher). +WebContainers are available in all StackBlitz editors: [Classic Editor](/guides/user-guide/getting-started), [StackBlitz](/guides/user-guide/working-in-stackblitz-editor), and [Web Publisher](/guides/user-guide/content-updates-with-web-publisher). ## Which Compute Environment Are You using? -The [Classic Editor](/guides/user-guide/getting-started) supports both EngineBlock and WebContainers compute environments, wheras the [Codeflow](/codeflow/working-in-codeflow-ide) and [Web Publisher](/codeflow/content-updates-with-web-publisher) editors only support WebContainers. +The [Classic Editor](/guides/user-guide/getting-started) supports both EngineBlock and WebContainers compute environments, whereas [StackBlitz's next gen editor](/guides/user-guide/working-in-stackblitz-editor) and [Web Publisher](/guides/user-guide/content-updates-with-web-publisher) editors only support WebContainers. -If clicking the project settings gear opens the VS Code settings dialouge shown below, you are in the **Codeflow editor** and therefore using **WebContainers**: +If clicking the project settings gear opens the VS Code settings dialouge shown below, you are in the **Next-generation editor** and therefore using **WebContainers**: ![Screenshot of the Codeflow settings pane](./assets/codeflow-settings.png) diff --git a/docs/codeflow/content-updates-with-web-publisher.md b/docs/guides/user-guide/content-updates-with-web-publisher.md similarity index 95% rename from docs/codeflow/content-updates-with-web-publisher.md rename to docs/guides/user-guide/content-updates-with-web-publisher.md index 2023c649..c3c44535 100644 --- a/docs/codeflow/content-updates-with-web-publisher.md +++ b/docs/guides/user-guide/content-updates-with-web-publisher.md @@ -23,14 +23,14 @@ To edit a page, you need to find its corresponding file on GitHub. You can do it ### "Edit in Web Publisher" button - + Edit in Web Publisher button If the page features our button, that's it! Click on it and you will be redirected to our friendly publishing tool 💕 :::tip Request the button! -If the page doesn't feature our button, you can suggest to the page admins to include it - here's our [Web Publisher integration guide](./integrating-web-publisher). +If the page doesn't feature our button, you can suggest to the page admins to include it - here's our [Web Publisher integration guide](/guides/integration/integrating-web-publisher). ::: ### "Edit this page on GitHub" link @@ -69,7 +69,7 @@ On the **right side**, you'll find two buttons: - **"Propose changes"**, which opens a dropdown with a button to "make a pull request" (which means sending the changes to the repository owner). - **Your Profile picture**, which opens a dropdown list with some usefull links: 1. **"Your profile"** which opens a new browser tab with your StackBlitz profile page. - 2. **"Open in Codeflow IDE"** button which redirects to [Codeflow IDE](./working-in-codeflow-ide) - it is helpful when you want to add images or work on a few files. + 2. **"Open in StackBlitz"** button which redirects to [StackBlitz](/guides/user-guide/working-in-stackblitz-editor) - it is helpful when you want to add images or work on a few files. 3. **"Edit on Github"** which redirects to the file "edit" page on GitHub. 4. **"Documentation"** which redirects to [StackBlitz docs page](https://developer.stackblitz.com/). 5. **"See a bug? File an issue"** which redirects to [WebContainer core repository](https://github.com/stackblitz/webcontainer-core/issues/new/choose) where you can file an issue describing the bug. diff --git a/docs/guides/user-guide/create-a-new-project.md b/docs/guides/user-guide/create-a-new-project.md new file mode 100644 index 00000000..d66472fa --- /dev/null +++ b/docs/guides/user-guide/create-a-new-project.md @@ -0,0 +1,159 @@ +--- +title: Create a new project +description: This page outlines how you can start using our StackBlitz. +og_image: getting-started.png +--- + +# {{ $frontmatter.title }} + + + +This guide outlines how to get started with StackBlitz. We'll walk you through creating your first project, navigating the editor, and connecting a GitHub repository. + +If you already have a project elsewhere you'd like to open in StackBlitz, review the page on [importing projects](importing-projects). + +## Create your first project + +We recommend starting with one of our pre-built starters. + +Navigate to the [StackBlitz homepage](https://stackblitz.com/). If you are not logged in, scroll down a bit to find a list of starter projects to choose from: + +![Available project starters](./assets/project-starters-public.png) + +If you _are_ logged in, you should see your dashboard: + +![Dashboard](./assets/dashboard.png) + +To see a list of available project starters, click on the "New Project" button: + +!["New Project" button is highlighted](./assets/dashboard-chosen-new-project.png) + +Next, you will see a modal with the available project starters: + +![Project Starter Dashboard](./assets/new-project.png) + +You can explore the different categories (for instance, “Popular”, “Frontend”, “Fullstack”) to find a technology stack that you’d like to try out. + +Alternatively, you can open an existing project (created by you or shared with you) in the "Projects" sidebar item: + +![Projects](./assets/projects-view.png) + +By selecting a starter or existing project, you will be taken to StackBlitz where you can start coding! + +:::tip Create a project with a simple URL +Some frameworks also provide short URLs that you can use to create new StackBlitz projects. Check out [the list of “.new domains” here](/guides/user-guide/starter-projects#new-domains). +::: + +## Customizing StackBlitz + +StackBlitz's next-generation editor is based on VS Code and is compatible with VS Code extensions, themes, and other customizations. + +### Import settings from VS Code + +To migrate the settings from your local VSCode to next-generation editor, follow these steps: + +1. In VSCode open the Settings tab (`cmd` + `,` on MacOS or `alt` + `,` on Windows and Linux). +2. Click on the "Open Settings (JSON)" button, located on the top right side of the view: + +![Settings view](./assets/settings-view-json-highlightened.png) + +3. This tab contains your VSCode settings. Copy its contents: + +![Settings view in JSON](./assets/settings-json.png) + +4. Repeat these actions in StackBlitz: + 1. Open the settings tab (you can use `cmd` + `,` key binding on MacOS or `alt` + `,` on Windows or Linux) + 2. Open the JSON view + 3. Paste the copied settings. + 4. [Optional] Replace the default settings with the ones you copied from your local environment. + +The gif below demonstrates these steps: + +![Migrating settings](./assets/vsc-to-sb-settings.webp) + +### Environment variables + +One way to handle reusable configuration data, such as sensitive data, is to use environment variables. These are encrypted values that can be set for each project and each user. This way, you can customize your configuration data without exposing it to others. + +:link: [How to add evironment variables to StackBlitz.](environment-variables) + +## Saving changes + +Whenever a file is changed, you will see a white dot next to its tab in the editor. + + +CodeflowApp bot in action + +You will also see that dot on the tab in your browser to remind you that you have unsaved changes. + + + + +## Grouping your projects into Collections + +[Collections](/guides/user-guide/collections) allow you to group projects together in one place. Use a private Collection to keep personal projects organized or create a public Collection to get a link you can share with others. + +[Learn how to create and manage Collections here.](collections) + +## Managing projects on your Dashboard + +Selecting multiple projects allows you to add them all to an existing [Collection](/guides/user-guide/collections) or delete them. To do so, select a few projects by clicking on the project logo, which will trigger a pop-up menu: + +![A few selected projects with a pop-up menu with options "Add to collection" and "Delete projects"](./assets/batch-action.png) + + +## Opening a GitHub repository in StackBlitz + +To work with an existing GitHub repository in StackBlitz, click "Open GitHub repository" on your dashboard. + +!["Open GitHub repository" button is highlighted](./assets/dashboard-chosen-new-github-repository.png) + +Next, you will see a modal prompting you to provide a GitHub repository URL: + +![GitHub URL prompt](./assets/github-repository-prompt-modal.png) + +After you provide the URL, click on the "Open repository" button, which will redirect you to StackBlitz. + +![Codeflow](./assets/codeflow-view.png) + +Alternatively, you can view a list of repositories by navigating to the "Repositories" sidebar item: + +![Repositories](./assets/repositories-view.png) + +## Using StackBlitz on your site + +If you’re writing a blog, maintaining a documentation site or an open source project, you can use StackBlitz to: + +1. [Embed examples and demos](/guides/integration/embedding) on your page or in your blog posts. +2. [Add “Open in StackBlitz” buttons](/guides/integration/open-from-github) to your READMEs and docs. +3. [Generate custom projects on the fly](/guides/integration/create-with-sdk) with our JavaScript SDK. +4. [Use StackBlitz reproductions in GitHub](/guides/integration/bug-reproductions) bug issue templates! +5. [Make PR reviews safer and faster](https://developer.stackblitz.com/guides/integration/integrating-codeflowapp-bot) with the StackBlitz app for GitHub. +6. [Provide a one-click environment](https://developer.stackblitz.com/guides/integration/using-pr-new) so other developers can submit bug fixes without setting up the local environment. + +## Troubleshooting + +### Out of memory error + +Keeping several StackBlitz projects open at the same time may cause your browser to run out of memory. In this case, you will see the following popup: + +### Preview doesn't work + +If the Preview doesn't work, oftentimes browser configuration or browser incompatibility is the culprit. Please see [this page for troubleshooting](/platform/webcontainers/browser-support). + +### Preview stopped working / is not responding + +Please note that, depending on the framework, **some changes may cause the dev server to stop running**, which in turn causes the Preview to either not respond to new updates or show an error screen ("Unable to connect to `local.webcontainer.io`"). + +Check in the terminal if the dev server is still running. If you want to restart it, click in the terminal window and: +1. press `ctrl`+`c` to "kill" the server, +2. press the "up arrow" button to bring up the start command, +3. press enter to run that command, +4. in the popup notification in the bottom right corner, choose to open the Preview. + +### Reopening the Preview panel + +If you close the Preview by accident, you can reopen it by selecting the icon of a plug entitled "Ports in use" from the left-side navigation bar. Note that you can open the Preview in a separate tab or as a split screen. + + +Happy coding! diff --git a/docs/codeflow/environment-variables.md b/docs/guides/user-guide/environment-variables.md similarity index 97% rename from docs/codeflow/environment-variables.md rename to docs/guides/user-guide/environment-variables.md index fdf61dc8..6b1ddf9a 100644 --- a/docs/codeflow/environment-variables.md +++ b/docs/guides/user-guide/environment-variables.md @@ -1,6 +1,6 @@ --- title: Environment Variables -description: 'How to work with sensitive data using Codeflow' +description: 'How to work with sensitive data using StackBlitz' og_image: environment-variables.png --- diff --git a/docs/guides/user-guide/general-faqs.md b/docs/guides/user-guide/general-faqs.md index f761fbb1..0834c630 100644 --- a/docs/guides/user-guide/general-faqs.md +++ b/docs/guides/user-guide/general-faqs.md @@ -1,213 +1,237 @@ --- -title: General FAQs (Frequently Asked Questions) +title: FAQs (Frequently Asked Questions) description: This page outlines commonly asked questions and answers about StackBlitz. og_image: general-faqs.png --- -This page outlines commonly asked questions and answers about StackBlitz. +# Frequently asked questions -# General FAQs +This page outlines commonly asked questions and answers about StackBlitz. If you have questions that aren't addressed on this page, contact us at [hello@stackblitz.com](mailto:hello@stackblitz.com). -### Why do I have to Re-Authorize to access GitHub repositories? -As of September 27th, 2023 we started migrating from GitHub's OAuth app to their GitHub App. We received a lot of feedback from users saying that they didn't like the "*all* or nothing" approach that GitHub's OAuth app takes so we've started switching over to the GitHub app itself which allows granularity on a per-repository basis. +[[toc]] -To ensure a smooth migration, we converted our "Codeflow bot" app into a "StackBlitz" app. Additionally, we made necessary adjustments to the permissions to enable us to: -- Create repositories and manage -- Import teams to StackBlitz -- Login to StackBlitz +## General FAQs -If you have any questions about this process feel free to reach out to [support@stackblitz.com](mailto:support@stackblitz.com) +### What is the difference between the legacy and next-generation editors? -### Can I make code snippets? +StackBlitz's classic editor is the original StackBlitz interface. The legacy editor includes a file tree, an npm package manager, and a light dev server and preview pane that allows you to see your app as you code. -Yes, you can! Here's a [handy video](https://twitter.com/sulco/status/1275039159611203585) featured on Twitter that shows you how to create and use code snippets in StackBlitz. +The legacy editor is compatible with both EngineBlock and WebContainers compute environments. -### Can I use Postman or something similar for testing? +StackBlitz's next-generation, WebContainers-backed editor enables you to use your VS Code extensions, keybindings, and customizations in a familiar interface. WebContainers also enables a full terminal and Node 18 development environment. -[Postman](https://www.postman.com/automated-testing/) and similar tools will not work since the server is unreachable outside of the browser. As an alternative, you could run a node program that makes requests for testing. +### How do I change the editor my project opens in? -### What are the deploy options available on StackBlitz? -We support four pathways: +### How do I select my default editor? -1. If you are in any non-Codeflow StackBlitz project, you can download the project to your local machine by clicking the button right underneath the "Share" dialogue and deploy manually. -2. If you are using an EngineBlock project, you can deploy directly via our [Firebase integration](https://developer.stackblitz.com/guides/user-guide/ide-whats-on-your-screen#firebase-sidebar). +### Why can't I see my terminal? -3. If you are using the Classic Editor, you can click the Connnect Repository button on the top left to easily connect with your desired repository. +Please note that the terminal is only available for WebContainer-based projects. You can use the keyboard binding `^` `` ` `` (the caret and the back quote keys) to toggle the terminal. -![Connect repository button on StackBlitz editor](./assets/stackblitz_connecttorepobutton.png) +If you are unsure which envronment you are using, review our documentation on the [environments available in StackBlitz](https://developer.stackblitz.com/guides/user-guide/available-environments). -4. If you are using Codeflow, you can push code directly into GitHub and then use the [Netlify](https://github.com/apps/netlify) or [Vercel](https://vercel.com/docs/concepts/git/vercel-for-github) GitHub bots to deploy your site. +### What is the difference between EngineBlock and WebContainers? -### Are MongoDB, Mongoose, Postgres or MySQL supported? +[EngineBlock](https://developer.stackblitz.com/guides/user-guide/available-environments#engineblock) is StackBlitz's legacy compute environment, first introduced in 2017. It operates as a lightweight custom runtime built on top of SystemJS and is focused solely on supporting popular front-end frameworks and libraries. -Currently, direct TCP database connections are not supported. However, an API based database provider like [Neon](https://neon.tech/) (a serverless Postgres DB, accessible via API calls) may provide an alternative approach. +Projects using EngineBlock can be embedded in blogs, documentation, and other web-based mediums, making it an excellent tool for tutorials, demos, and code samples. -### How do I view my invoice? +EngineBlock is only available in StackBlitz's legacy editor. -You can go directly to https://stackblitz.com/settings/membership and click the 'View Invoices' button to view your invoice history. +[WebContainers](https://developer.stackblitz.com/guides/user-guide/available-environments#webcontainers) is our next-generation compute environment, launched in May 2021. -If you need your invoice for Enterprise Server, please contact your Customer Success Engineer for details. - +Unlike EngineBlock, WebContainers provides a full Node.js environment, capable of running full-stack web applications. WebContainers is the default runtime for all new StackBlitz projects. -# Product FAQs +For more information on the differences between each compute environment, including how to determine which environment your project is using, refer to the documentation on [available environments](https://developer.stackblitz.com/guides/user-guide/available-environments). -## Personal Plan +### Why do I have to re-authorize StackBlitz to access GitHub repositories? -### What is the Personal Plan? +As of September 27th, 2023, we started migrating from GitHub's OAuth app to their GitHub App. We received a lot of feedback from users saying that they didn't like the "*all* or nothing" approach that GitHub's OAuth app takes so we've started switching over to the GitHub app itself which allows granularity on a per-repository basis. -The Personal Plan is a free account that allows you to create unlimited public projects in both Classic and Codeflow editors. All you need to do is sign in with your GitHub account! +To ensure a smooth migration, we converted our "Codeflow bot" app into a "StackBlitz" app. Additionally, we made necessary adjustments to the permissions to enable us to: +- Create repositories and manage +- Import teams to StackBlitz +- Login to StackBlitz -## Personal+ Plan +If you have any questions about this process feel free to reach out to [hello@stackblitz.com](mailto:hello@stackblitz.com) -### What is the Personal+ Plan? +## Integrations and compatibility -The Personal+ Plan (formerly known as the Astronaut Plan) allows users to create unlimited private projects in both Classic and Codeflow editors, as well as unlimited file uploads. Personal+ users can also use Codeflow technology for private repositories. +### Which package managers do you support? -This plan is ideal for individual contributors, students, or developers working on singular projects, or engineering candidates. Users focusing on bug reproductions, fast prototyping, and sharing projects will find this plan sufficient. + -## Teams Plan +### Can I run Vim? -### What is the Teams plan? +Previously our most-requested features and [one of the oldest issues on our repository](https://github.com/stackblitz/core/issues/3), Vim is now supported in our next-generation editor by adding it using the "Extensions" menu. -The Teams plan (currently in Beta) is a paid membership offering that allows users to share features amongst members of their GitHub organization. Features and highlights of this plan include: +### Can I open private GitHub repositories in StackBlitz? -- Codeflow access for all users in the GitHub organization (in-browser VS Code) -- Instant integration with your GitHub organization’s repos for seamless in-browser editing - - Utilizing GitHub organization makes it super easy for all users in the organization to use the Codeflow editor and Codeflow bot to create and review pull requests. -- A unified security model for sharing StackBlitz projects and GitHub repos -- User management and billing linked to your GitHub organization - - Easy to use interface within the StackBlitz dashboard (easy to toggle users for access/no access, all-in-one monthly payment). +Yes. Private repositories can be opened in StackBlitz. -If you're interested in Teams Beta, come onboard with us for a private technology preview of this plan! You can sign up [here](https://stackblitz.com/beta-teams-signup). +You can open and edit private repositories owned by your GitHub user with any StackBlitz plan. However, to collaborate on private repositories you do not own or to access private repositories owned by your GitHub organization, you will need a [paid StackBlitz plan](https://stackblitz.com/pricing/). -## Enterprise Server +If you experience issues accessing a repository in StackBlitz, ensure your GitHub user has permission to access the repository in the repository's settings in GitHub. -### What is the Enterprise Server offering? +### Which git providers does StackBlitz support? -Enterprise Server is a membership offering that's best fit for organizations who want to use StackBlitz behind their firewall. Benefits include: +All StackBlitz users can use GitHub. StackBlitz Enterprise customers can integrate with GitHub, GitLab, and Bitbucket. -- Private NPM registry integration -- Custom SSO integration -- On-prem installation support -- Dedicated Customer Success Engineer +### What type of repositories can be opened in StackBlitz? -Check out the [Enterprise page](https://stackblitz.com/enterprise) for details and set up a call with our Enterprise team! +You can open any repository in StackBlitz. However, StackBlitz's WebContainers compute envronment can only *run* repositories compatible with Node.js. -### I want to purchase the enterprise edition for WebContainers. Where can I do that? +### Can I use tools like Postman for testing? -Bringing WebContainers to Enterprise Server is in the works, but not currently available. You can reach out to enterprise@stackblitz.com for details. +[Postman](https://www.postman.com/automated-testing/) and similar tools will not work since the server is unreachable outside of the browser. As an alternative, you could run a node program that makes requests for testing. -We do offer [WebContainer API](https://webcontainers.io) licenses for organizations wanting to use WebContainer technology for production usage in a for-profit setting. Check out [webcontainers.io](https://webcontainers.io/enterprise) for more information! +### What are the deploy options available on StackBlitz? -# Technology FAQs +There are multiple options for deploying projects in StackBlitz: -## Classic Editor (EngineBlock projects) +*Recommended:* -### What is the Classic Editor for EngineBlock projects? +If you are using StackBlitz's next-generation editor, you can sync code directly with GitHub and then use tools like [Netlify](https://github.com/apps/netlify) or [Vercel](https://vercel.com/docs/concepts/git/vercel-for-github) to deploy your site from GitHub. -Different projects that use the Classic Editor utilize EngineBlock technology to run. As the original StackBlitz interface, the Classic Editor has a file tree, an npm package manager, and a light dev server and preview pane that allows you to see your app as you code. +*For StackBlitz projects using the legacy editor:* -EngineBlock projects are distinguishable from WebContainer-based projects as they do not have a terminal. +1. Download the project to your local machine by clicking the button right underneath the "Share" dialogue. From there, you can deploy manually. +2. For projects using EngineBlock, you can deploy to Firebase using the [Firebase integration](https://developer.stackblitz.com/guides/user-guide/user-interface#firebase-sidebar). -### How do I create code snippets? +3. Create a GitHub repository witn the code from your StackBlitz project using the "Create a repository" button. +![Connect repository button on StackBlitz](./assets/stackblitz_connecttorepobutton.png) -Code snippets are available in our Classic Editor for both EngineBlock and WebContainer projects. Click on the Settings icon in the activity bar to the left of your screen. The Settings sidebar will pop open and you will see User snippets and Workspace snippets. User snippets are available for any of your projects. Workspace snippets are only available in the current project you create them in. +### Are MongoDB, Mongoose, Postgres, or MySQL supported? +Currently, direct TCP database connections are not supported. However, API-based database providers like [Neon](https://neon.tech/) can be used with StackBlitz. -### Can I change the TypeScript version in my project? +### Can I run unit tests in StackBlitz? -The current TypeScript starter uses EngineBlock technology, which has a fixed TypeScript version. EngineBlock is great for lightweight frontends, but does not run Node.js itself and will be limited to things like TypeScript versioning. +WebContainer-based projects can run any Node compatible testing tooling. -WebContainers, however, do run Node.js itself in the browser and do not have this limitation. You can simply `npm install` any TypeScript version as you would locally. +### Can I develop ElectronJS apps on StackBlitz? -## Classic Editor (WebContainers projects) +No, since Electron is a native app, it is not supported by StackBlitz's browser-based compute model. -### What is the Classic Editor for WebContainers projects? +## Security -Different projects that use the Classic Editor utilize WebContainers technology to run. As the original StackBlitz UI, the Classic Editor has a file tree, an npm package manager, and a light dev server and preview pane that allows you to see your app as you code. +### I would like to use StackBlitz but I'm not sure if it's secure. -Since WebContainers technology allows Node.js to run inside the browser, WebContainers projects will always have a terminal available. To learn about WebContainers, visit our docs [here](https://developer.stackblitz.com/platform/webcontainers/browser-support). +StackBlitz is regarded as more secure than local development as all code is executed entirely within the browser. If you have specific questions about StackBlitz's security design and practices, [contact us directly](mailto:hello@stackblitz.com). -### How do I know if my project is WebContainers-based? -All WebContainers projects will have a terminal in the project. You can find what environments are available for EngineBlock and WebContainers projects in our [docs](https://developer.stackblitz.com/guides/user-guide/available-environments). +## Plans and billing -Any projects in `https://stackblitz.com/?starters=fullstack`, `..?starters=backend`, `..?starters=vite` will be WebContainer/Node projects with a terminal. +### How do I view my invoice? -### Can I change the Node version in my project? +You can view your past invoices and other billing information in your [Billing settings](https://stackblitz.com/settings/billing). -The current state of Codeflow does not support users being able to set their own Node version. +::: tip +**StackBlitz Enterprise customers:** Contact your account manager for billing inquiries. +::: -### Why can't I see my terminal? +### What is StackBlitz Personal? -Please note that the terminal is only available for WebContainer-based projects. You can use the keyboard binding `^` `` ` `` (the caret and the back quote keys) to toggle the terminal. +StackBlitz Personal is StackBlitz's free tier. With a Personal plan, you can create unlimited public projects. Additionally, you can create private projects for your personal use. Personal users can access public GitHub repositories. -### Can I run unit tests in StackBlitz? +When you log into StackBlitz for the first time using your GitHub account, you are automatically on a Personal plan. -You can use [Jasmine](https://jasmine.github.io/), a unit testing tool for JavaScript. +### What is StackBlitz Personal+? -It is also possible to run Angular unit tests inside WebContainer-based projects, but not EngineBlock-based projects. The easiest way to start is by navigating to node.new, which creates a WebContainer-based project automatically! +StackBlitz Personal+ (formerly known as the Astronaut Plan) includes all of the capabilities of the Personal plan and also includes: +- unlimited file uploads +- shareable private projects -### Can I develop ElectronJS apps on StackBlitz? +This plan is ideal for individual contributors, students, or developers working on singular projects, or engineering candidates. -Since Electron is a native app, this cannot be supported since StackBlitz runs entirely within the browser. +### What is StackBlitz Teams? -## Codeflow Editor +[StackBlitz Teams](/teams/what-is-stackblitz-teams) allows users to share features amongst members of their GitHub organization. -### What is the Codeflow Editor? +Features and highlights of this plan include: +- Collaborate on projects and collections +- Open and collaborate on your organization’s GitHub repositories +- Integrate with private NPM registries, Artifactory, and Nexus +- Sync user permissions from your GitHub organization +- Team management and billing console -The Codeflow Editor brings VSC code into the browser. This editor is capable of running full development workflows, including pushing commits and creating pull requests to GitHub. Other features of the Codeflow editor include a terminal, npm package manager, and the ability to add extensions. This bypasses the need to clone a repository or install dependencies on your local machine. If you haven't already, you can check out Codeflow [here](https://stackblitz.com/codeflow)! +To try StackBlitz Teams, [start a 14-day free trial](https://stackblitz.com/pricing). You will not be required to add a payment method until you are ready to upgrade. -### Can I use Vim bindings? +### What is StackBlitz Enterprise Server? -Our Codeflow editor is built on top of VS Code so you can enable the VIM extension: +Enterprise Server is a fully self-hosted build of StackBlitz, enabling organizations to run StackBlitz behind their firewall. -1. Open a GitHub repository in Codeflow (like this: pr.new/vitejs/vite) -2. Navigate to the "Extensions" pane -3. Search for "Vim" -4. Click on the VIM extension and then click the "enable" button. +StackBlitz Enteprise subscriptions include: +- Private NPM registry integration +- Custom SSO integration +- On-prem installation support +- Dedicated account manager -## Web Publisher +[Learn more about StackBlitz Enterprise](https://stackblitz.com/enterprise). For pricing information and details specific to your organization, set up a call with our team. -### What is Web Publisher? +### I want to purchase the enterprise edition for WebContainers. Where can I do that? -Web Publisher is a single file editor and publishing tool that can be used for smaller or text-based changes such as editing documentation or blogs. Web Publisher uses Codeflow technology that allows users to create, push, and publish changes all in their browser. The GitHub integration creates a seamless workflow that's fit for developers and non-coding folks alike! +Bringing WebContainers to Enterprise Server is in the works, but not currently available. You can reach out to enterprise@stackblitz.com for details. -This environment is ideal for: -- No-tech or low-tech users -- Text or formatting changes in documentation or blogs -- Quick fixes that don't require dependency or compilation changes +We do offer [WebContainer API](https://webcontainers.io) licenses for organizations wanting to use WebContainer technology for production usage in a for-profit setting. Check out [webcontainers.io](https://webcontainers.io/enterprise) for more information! + +## Technical FAQs + +### How do I create code snippets? + +Code snippets are available in our Classic Editor for both EngineBlock and WebContainer projects. Click on the Settings icon in the activity bar to the left of your screen. The Settings sidebar will pop open and you will see User snippets and Workspace snippets. User snippets are available for any of your projects. Workspace snippets are only available in the current project you create them in. + +### Can I change the Node version in my project? + +WebContainers currently runs Node 18. [In future, we plan to support multiple Node versions.](https://developer.stackblitz.com/platform/webcontainers/roadmap) -You can learn more about Web Publisher [here](https://developer.stackblitz.com/codeflow/content-updates-with-web-publisher). +### Can I change the TypeScript version in my project? + +The current TypeScript starter uses EngineBlock technology, which has a fixed TypeScript version. EngineBlock is great for lightweight frontends, but does not run Node.js itself and will be limited to things like TypeScript versioning. + +WebContainers, however, do run Node.js itself in the browser and do not have this limitation. You can simply `npm install` any TypeScript version as you would locally. -## Classic Editor SDK +### Does my code persist between sessions? -### What is the Classic Editor SDK? + -Our JavaScript SDK (software development kit) allows users to create Classic Editor projects to be opened in a new window or embedded in your docs, example pages, or blog posts. The SDK can be used to control the UI of an embedded StackBlitz project, change the currently open file(s), and read and write files from the project's virtual filesystem. +### What is the StackBlitz SDK? + +Our [JavaScript SDK (software development kit)](https://developer.stackblitz.com/platform/api/javascript-sdk) allows users to create Classic Editor projects to be opened in a new window or embedded in your docs, example pages, or blog posts. The SDK can be used to control the UI of an embedded StackBlitz project, change the currently open file(s), and read and write files from the project's virtual filesystem. Details on embed options can be found [here](https://developer.stackblitz.com/platform/api/javascript-sdk). -## WebContainer API +## WebContainers ### What is the WebContainer API? -The WebContainer API allows developers to create fullstack Node.js environments in the browser with WebContainer technology. WebContainer technology powers StackBlitz products like Codeflow and [Web Publisher](https://developer.stackblitz.com/codeflow/content-updates-with-web-publisher). +The [WebContainer API](https://webcontainers.io/api) allows developers to create fullstack Node.js environments in the browser. + +### Can I use the WebContainers API for commercial purposes? -Organizations wanting to use the API for production usage in a for-profit setting are required to purchase a WebContainer API License. With this license, organizations have access to: +Using the WebContainers API for commercial purposes requires a paid StackBlitz subscription. -- Higher API rate limits -- Direct access to the StackBlitz dev team to optimize performance, prioritize bug fixes, and influence the API roadmap. +All StackBlitz Teams and Enterprise plans include 10,000 WebContainers API calls per month. Use in excess of this limit requires a dedicated WebContainers API license. For more information, refer to our [terms of service](https://stackblitz.com/terms-of-service). -This product is ideal for organizations wanting to build completely custom user interfaces powered by Node.js without needing to use virtual machines, servers, or docker containers. +If you are considering using the WebContainers API, [please reach out to our team](https://docs.google.com/forms/d/e/1FAIpQLSertiZLl-za0ZHxsWbd2IrISVft2OpPglykEHpEllPSfnZIUg/viewform) to discuss your project. -WebContainer API docs can be found [here](https://webcontainers.io/). +## Web Publisher + +### What is Web Publisher? + +Web Publisher is a single file editor and publishing tool that can be used for smaller or text-based changes such as editing documentation or blogs. Web Publisher uses webcontainers and allows users to create, push, and publish changes all in their browser. The GitHub integration creates a seamless workflow that's fit for developers and non-coding folks alike! + +This environment is ideal for: +- No-tech or low-tech users +- Text or formatting changes in documentation or blogs +- Quick fixes that don't require dependency or compilation changes + +You can learn more about Web Publisher [here](https://developer.stackblitz.com/guides/user-guide/content-updates-with-web-publisher). -### I see that WebContainer API is free to use, but a license is required. Can I use the WebContainer API for commercial purposes? +### Which files can be opened in Web Publisher? -We are thrilled to offer free access for most users! For those with high levels of commercial usage, we do apply a nominal charge for API requests beyond 10,000 per month. If interested, [please reach out to sales](https://docs.google.com/forms/d/e/1FAIpQLSertiZLl-za0ZHxsWbd2IrISVft2OpPglykEHpEllPSfnZIUg/viewform) for more information! \ No newline at end of file +Any file type can be opened in Web Publisher. diff --git a/docs/guides/user-guide/getting-started.md b/docs/guides/user-guide/getting-started.md index 5118ac14..29552469 100644 --- a/docs/guides/user-guide/getting-started.md +++ b/docs/guides/user-guide/getting-started.md @@ -1,86 +1,31 @@ --- -title: Getting started -description: This page outlines how you can start using our StackBlitz editor. -og_image: getting-started.png +title: Quick start +description: Starter projects are online playgrounds, typically built by the core team of a given project and run on StackBlitz. +og_image: starter-projects.png --- -# {{ $frontmatter.title }} - -This page outlines how you can use StackBlitz to create quick demos or bug reproductions in StackBlitz classic editor or to open a GitHub repository in Codeflow IDE. - -If you wish to immediately embed your project on your page check a page on manual [embeds](/guides/integration/embedding) and [SDK embeds](/platform/api/javascript-sdk). If you wish to learn how to import your project from GitHub, check the page on [importing projects](/guides/user-guide/importing-projects). - -## Picking a starter project + -To start coding, navigate to the [StackBlitz homepage](https://stackblitz.com/). If you are not logged in, scroll down a bit to find a list of starter projects to choose from: +# {{ $frontmatter.title }} -![Available project starters](./assets/project-starters-public.png) + -If you _are_ logged in, you should see your dashboard: +
-![Dashboard](./assets/dashboard.png) +### Framework-specific starters +Open source projects that provide a custom URL as a convenient starting point for your next projects. -To see a list of available project starters, click on the "New Project" button: + -!["New Project" button is highlighted](./assets/dashboard-chosen-new-project.png) +## What are starter projects? -Next, you will see a modal with the available project starters: +Great question! Starter projects are online playgrounds, typically built by the core team of a given project and run on StackBlitz. They are used in project documentation or found under [a custom link](#framework-specific-starter). You can find some of them on our dashboard. Some open source projects provide a custom URL as a convenient starting point for their starter projects. ![Project Starter Dashboard](./assets/new-project.png) -You can explore the different categories (for instance, “Popular”, “Frontend”, “Fullstack”) to find a technology stack that you’d like to try out. - -Alternatively, you can also create a new project and see the full list of your projects (created by you or shared with you) in the "Projects" sidebar item: - -![Projects](./assets/projects-view.png) - -:::tip Tip -Some frameworks also provide short URLs that you can use to create new StackBlitz projects. Check out [the list of “.new domains” here](/guides/user-guide/starter-projects#new-domains). -::: - -## Importing code for quick demos - -Alternatively, you can also use StackBlitz classic editor to [open an existing GitHub repository](/guides/user-guide/importing-projects). This option is suitable for situations when there is no starter project for your favorite framework featured on the dashboard and you'd like to prepare a demo nevertheless. - -## Grouping your projects into Collections - -If you'd like to group projects, you could [create a Collection](/guides/user-guide/collections). This feature is helpful when you like to create a list of your demos or inspirational projects you've forked or can be used as your developer portfolio. - -## Managing projects on your Dashboard - -Selecting multiple projects allows you to add them all to an existing [Collection](/guides/user-guide/collections) or delete them. To do so, select a few projects by clicking on the project logo, which will trigger a pop-up menu: - -![A few selected projects with a pop-up menu with options "Add to collection" and "Delete projects"](./assets/batch-action.png) - - -## Opening a GitHub repository in Codeflow IDE - -If you'd like to do more work or use VS Code extensions (or Vim), you can use [StackBlitz Codeflow IDE](https://developer.stackblitz.com/codeflow/what-is-codeflow), which spins up a whole dev environment with one click. To do so, click on the "Open GitHub repository" button on your dashboard: - -!["Open GitHub repository" button is highlighted](./assets/dashboard-chosen-new-github-repository.png) - -Next, you will see a modal prompting you to provide a GitHub repository URL: - -![GitHub URL prompt](./assets/github-repository-prompt-modal.png) - -After you provide the URL, click on the "Open repository" button, which will redirect you to Codeflow IDE: - -![Codeflow](./assets/codeflow-view.png) - -Alternatively, you can also import a new repository and see the full list of your repositories in the "Repositories" sidebar item: - -![Repositories](./assets/repositories-view.png) - -## Using StackBlitz on your site - -If you’re writing a blog, maintaining a documentation site or an open source project, you can use StackBlitz to: - -1. [Embed examples and demos](/guides/integration/embedding) on your page or in your blog posts. -2. [Add “Open in StackBlitz” buttons](/guides/integration/open-from-github) to your READMEs and docs. -3. [Generate custom projects on the fly](/guides/integration/create-with-sdk) with our JavaScript SDK. -4. [Use StackBlitz reproductions in GitHub](/guides/integration/bug-reproductions) bug issue templates! -5. [Make PR reviews safer and faster](https://developer.stackblitz.com/codeflow/integrating-codeflowapp-bot) with CodeflowApp bot. -6. [Help your users edit your docs with live preview](https://developer.stackblitz.com/codeflow/content-updates-with-web-publisher) using Web Publisher. -7. [Provide a one-click environment with Codeflow IDE](https://developer.stackblitz.com/codeflow/using-pr-new) so other developers can submit bug fixes without setting up the local environment. +## Adding a new starter project -Happy coding! +If you'd like to see a new starter, please follow the directions on [this page in the integration guide](/guides/integration/open-from-github#set-up-the-main-starter-url). \ No newline at end of file diff --git a/docs/guides/user-guide/importing-projects.md b/docs/guides/user-guide/importing-projects.md index 9926ff7d..b3d37085 100644 --- a/docs/guides/user-guide/importing-projects.md +++ b/docs/guides/user-guide/importing-projects.md @@ -6,15 +6,6 @@ og_image: importing-projects.png # {{ $frontmatter.title }} -## Upload from your computer - -With your desired StackBlitz project open, drag and drop any files or a folder you want to import: - -Animation of dragging files from a local folder onto the StackBlitz editor sidebar - ## Import from GitHub You can run any public GitHub repository on StackBlitz by adding the username and repository name to the URL like so: @@ -71,29 +62,14 @@ You can chain the URL query parameters by adding the `&` sign between them, for [stackblitz.com/github/antfu/vitesse?title=Hello](https://stackblitz.com/github/antfu/vitesse?title=Hello&startScript=dev) ::: -## Importing private projects - -:::info Note -Importing private GitHub repos is a feature available with our memberships. If you're interested in becoming a member, check details on our [StackBlitz Membership](https://stackblitz.com/membership) page. -::: - -**1.** Go to your dashboard and open a new JavaScript blank project. - -![Dashboard for JavaScript Blank Project](./assets/private-repo-starter.png) - -**2.** Click on 'Connect repository' on the top left. - -**3.** Click on the 'importing from an existing repository' link. - -![Connect and import GitHub repository](./assets/connect-to-existing-repo.png) - -**4.** Paste your full GitHub repository URL. - -![Paste GitHub repository URL to import](./assets/import-existing-repo.png) +## Upload from your computer -The video below outlines a workaround to edit collaboratively in a private repository: +With your desired StackBlitz project open, drag and drop any files or a folder you want to import: - +Animation of dragging files from a local folder onto the StackBlitz sidebar ## Importing or creating projects with StackBlitz API diff --git a/docs/guides/user-guide/keyboard-shortcuts.md b/docs/guides/user-guide/keyboard-shortcuts.md index e619c8a1..e70e28e1 100644 --- a/docs/guides/user-guide/keyboard-shortcuts.md +++ b/docs/guides/user-guide/keyboard-shortcuts.md @@ -1,12 +1,12 @@ --- title: Keyboard shortcuts -description: A “keyboard shortcut” or “keybinding” is combination of keys on your keyboard which allows you to perform common actions such as saving a file, modifying the view, or copying a line of code. In the StackBlitz editor this set of shortcuts is predefined and, currently, non-customizable. +description: A “keyboard shortcut” or “keybinding” is combination of keys on your keyboard which allows you to perform common actions such as saving a file, modifying the view, or copying a line of code. In the StackBlitz this set of shortcuts is predefined and, currently, non-customizable. og_image: keyboard-shortcuts.png --- # {{ $frontmatter.title }} -A “keyboard shortcut” or “keybinding” is combination of keys on your keyboard which allows you to perform common actions such as saving a file, modifying the view, or copying a line of code. In the StackBlitz editor this set of shortcuts is predefined and, currently, non-customizable. +A “keyboard shortcut” or “keybinding” is combination of keys on your keyboard which allows you to perform common actions such as saving a file, modifying the view, or copying a line of code. In StackBlitz this set of shortcuts is predefined and, currently, non-customizable. Choose your platform to see the full list of available shortcuts: [Windows](#windows-keybindings) | [MacOS](#macos-keybindings) | [Linux](#linux-keybindings). diff --git a/docs/guides/user-guide/parts/codeflow-ide.md b/docs/guides/user-guide/parts/codeflow-ide.md new file mode 100644 index 00000000..1e460802 --- /dev/null +++ b/docs/guides/user-guide/parts/codeflow-ide.md @@ -0,0 +1 @@ +**StackBlitz** is a fully fledged desktop-grade dev environment capable of running your whole workflow - from production-level dev work to reviewing pull requests. \ No newline at end of file diff --git a/docs/codeflow/parts/codeflow.md b/docs/guides/user-guide/parts/codeflow.md similarity index 100% rename from docs/codeflow/parts/codeflow.md rename to docs/guides/user-guide/parts/codeflow.md diff --git a/docs/codeflow/parts/codeflowapp-bot.md b/docs/guides/user-guide/parts/codeflowapp-bot.md similarity index 100% rename from docs/codeflow/parts/codeflowapp-bot.md rename to docs/guides/user-guide/parts/codeflowapp-bot.md diff --git a/docs/guides/user-guide/parts/environments.md b/docs/guides/user-guide/parts/environments.md new file mode 100644 index 00000000..b8774eb1 --- /dev/null +++ b/docs/guides/user-guide/parts/environments.md @@ -0,0 +1,5 @@ +::: tip This page refers to StackBlitz's next-generation editor. +References to the legacy editing experience is referred to as the "legacy" or "classic" editor. + +For more information, refer to StackBlitz's [available environments](/guides/user-guide/available-environments). +::: diff --git a/docs/codeflow/parts/persistance.md b/docs/guides/user-guide/parts/persistance.md similarity index 100% rename from docs/codeflow/parts/persistance.md rename to docs/guides/user-guide/parts/persistance.md diff --git a/docs/codeflow/parts/pr-new.md b/docs/guides/user-guide/parts/pr-new.md similarity index 100% rename from docs/codeflow/parts/pr-new.md rename to docs/guides/user-guide/parts/pr-new.md diff --git a/docs/guides/user-guide/parts/stackblitz-description.md b/docs/guides/user-guide/parts/stackblitz-description.md new file mode 100644 index 00000000..7a7b680e --- /dev/null +++ b/docs/guides/user-guide/parts/stackblitz-description.md @@ -0,0 +1 @@ +StackBlitz is an **instant fullstack web IDE** for the JavaScript ecosystem. It's powered by [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/), the first WebAssembly-based operating system which **boots the Node.js environment in milliseconds**, securely within your browser tab. \ No newline at end of file diff --git a/docs/guides/user-guide/parts/supported-packages.md b/docs/guides/user-guide/parts/supported-packages.md new file mode 100644 index 00000000..58e8c917 --- /dev/null +++ b/docs/guides/user-guide/parts/supported-packages.md @@ -0,0 +1 @@ +StackBlitz supports multiple package managers including pnpm, npm, and yarn. Legacy projects using the EngineBlock runtime include an npm package manager. \ No newline at end of file diff --git a/docs/codeflow/parts/web-publisher.md b/docs/guides/user-guide/parts/web-publisher.md similarity index 100% rename from docs/codeflow/parts/web-publisher.md rename to docs/guides/user-guide/parts/web-publisher.md diff --git a/docs/codeflow/parts/wp-compatibility-mode.md b/docs/guides/user-guide/parts/wp-compatibility-mode.md similarity index 100% rename from docs/codeflow/parts/wp-compatibility-mode.md rename to docs/guides/user-guide/parts/wp-compatibility-mode.md diff --git a/docs/guides/user-guide/starter-projects.md b/docs/guides/user-guide/starter-projects.md deleted file mode 100644 index 055f53cb..00000000 --- a/docs/guides/user-guide/starter-projects.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Starter projects -description: Starter projects are online playgrounds, typically built by the core team of a given project and run on StackBlitz. -og_image: starter-projects.png ---- - - - -# {{ $frontmatter.title }} - -This page covers what starter projects are, where to find them, and how to create a new one. - -## What are starter projects? - -Starter projects are online playgrounds, typically built by the core team of a given project and run on StackBlitz. They are used in project documentation or found under [a custom link](#new-domains). You can find some of them on our dashboard. - -![Project Starter Dashboard](./assets/project-starters.png) - -## .new domains - -Open Source projects can provide a custom URL as a convenient starting point for their online playground. Here is a list of some of these links: - - - -## Adding a new starter project - -If you'd like to see a new starter, please follow the directions on [this page in the integration guide](/guides/integration/open-from-github#set-up-the-main-starter-url). diff --git a/docs/guides/user-guide/starters/index.ts b/docs/guides/user-guide/starters/index.ts index abe07aa2..6b093c89 100644 --- a/docs/guides/user-guide/starters/index.ts +++ b/docs/guides/user-guide/starters/index.ts @@ -27,6 +27,16 @@ import vitestLogo from './vitest.svg'; import vueLogo from './vue.svg'; export const dotNewLinks = [ + { + title: 'Vite', + link: 'https://vite.new/', + icon: viteLogo, + }, + { + title: 'Node.js', + link: 'https://node.new/', + icon: nodeLogo, + }, { title: 'Analog.js', link: 'https://analogjs.org/new', @@ -122,11 +132,6 @@ export const dotNewLinks = [ icon: nextjsLogo, iconInvert: true, }, - { - title: 'Node.js', - link: 'https://node.new/', - icon: nodeLogo, - }, { title: 'Nodemon', link: 'https://node.new/nodemon', @@ -179,11 +184,6 @@ export const dotNewLinks = [ link: 'https://sveltekit.new', icon: svelteLogo, }, - { - title: 'Vite', - link: 'https://vite.new/', - icon: viteLogo, - }, { title: 'VitePress', link: 'https://vitepress.new/', diff --git a/docs/guides/user-guide/ide-whats-on-your-screen.md b/docs/guides/user-guide/user-interface.md similarity index 99% rename from docs/guides/user-guide/ide-whats-on-your-screen.md rename to docs/guides/user-guide/user-interface.md index 3f5b8c7c..c093c3e2 100644 --- a/docs/guides/user-guide/ide-whats-on-your-screen.md +++ b/docs/guides/user-guide/user-interface.md @@ -1,5 +1,5 @@ --- -title: "IDE: what’s on your screen" +title: "User Interface" description: This page provides an overview of the terms we use to describe each of the pieces of the UI available to you in StackBlitz projects. og_image: ide-whats-on-your-screen.png --- diff --git a/docs/guides/user-guide/what-is-stackblitz.md b/docs/guides/user-guide/what-is-stackblitz.md index 4f555fad..775b6686 100644 --- a/docs/guides/user-guide/what-is-stackblitz.md +++ b/docs/guides/user-guide/what-is-stackblitz.md @@ -4,29 +4,34 @@ description: StackBlitz is an instant fullstack web IDE for the JavaScript ecosy og_image: what-is-stackblitz.png --- + + # {{ $frontmatter.title }} -StackBlitz is an **instant fullstack web IDE** for the JavaScript ecosystem. It's powered by [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/), the first WebAssembly-based operating system which **boots the Node.js environment in milliseconds**, securely within your browser tab. + -Now you can use the web to build the web. +:::tip Just want to try it out? Skip to the [Quickstart](./getting-started). +::: ## Why should I use StackBlitz? StackBlitz is secure, shareable, and satisfying. -There is no greater buzzkill than having to fiddle with the deployment and build tools config before you can start coding. **StackBlitz takes care of all of the setup**: from forking and installing dependencies to configuring build tools and hot reloading. Working on StackBlitz feels exactly like working on your local dev environment - minus the frustrating parts. +There is no greater buzzkill than having to fiddle with the cloning and installing before you can start coding. **StackBlitz takes care of all of the setup**: from instantly cloning and installing dependencies to configuring build tools and hot reloading. The beauty of StackBlitz is that it just works. ### Key features: -- **unmatched security**: all development is happening in your browser tab, including running Node.js and git -- **surprisingly fast**: the entire dev environment spins up in milliseconds - even reinstalling `node_modules` is as simple as refreshing the page -- **works online and offline**: continue your work even when you lose the Internet connection midway -- **your apps are always online**: your apps never go to sleep and have no bandwidth limits - share the URL with as many friends, colleagues, and communities as you’d like! -- **seamless debugging** with Chrome Dev Tools for both front- and backend apps! +- ⚡️ **Shockingly fast**: The entire dev environment spins up in milliseconds - even reinstalling `node_modules` is as simple as refreshing the page, with pnpm running up to four times as fast as locally! +- 📍 **It's just in your browser**: All development is happening directly in your browser. We're running Node.js, git, package managers (npm, yarn, pnpm), and local extensions all right from your browser. It's like local, but better. +- 🔒 **Secured by browser sandboxing**: Backed by the most battle tested and trusted environment in the world. +- 💻 **Works online and offline**: Continue your work even when you lose the Internet connection midway. +- 🔥 **Your environment is always online**: Your apps never go to sleep and have no bandwidth limits - share the URL with as many friends andcolleagues as you’d like! +- 🐞 **Seamless debugging**: With Chrome Dev Tools for both front- and backend apps! +- 🆓 **Always free for Open Source**: You're the future of the web development and we love you. ![Preview & debug](./assets/what-is-sb-intro.gif) -## What is StackBlitz used for? +## How can you use StackBlitz? ### Delightful docs @@ -40,10 +45,6 @@ Create a [project starter](/guides/user-guide/starter-projects) or boilerplate c Working on a blog post or a conference talk? [Create a StackBlitz project that you can quickly share](/guides/integration/embedding). You can change the project title and the slug to make it effortless for others to reach it. And yes, it works with Medium or DEV. -### Entire programming workflow - -One click and our Codeflow IDE spins up a whole code editor with git integration and hot-reloading preview. Now all you need for your dev work is just a browser. - ### Straightforward docs editing Every project deserves collaborative documentation. Typo fixes have never been easier - click, see what you edit as you edit, and submit a PR when you’re satisfied. All in the browser, thanks to Web Publisher. @@ -52,20 +53,26 @@ Every project deserves collaborative documentation. Typo fixes have never been e Plain bug descriptions are so 2010s. Welcome to the new era of bug hunting where every report comes with its [own StackBlitz reproduction](/guides/integration/bug-reproductions) so you can instantly filter out true issues from everything else. Never spin up heavy local installations for a simple bug report ever again. -### Build whole educational experiences - -You like the idea of running Node.js in the browser and feel inspired to build your own editor? No worries. Our [WebContainers API](/platform/api/webcontainer-api) allows you to use our technology to power your own playgrounds. - ### Rapid prototyping Speed up your entire development process with **realtime hot-reloading in the fastest dev environment ever made**. Collaborate remotely on different devices, send and receive instant feedback, and **get to market faster**. +### Entire programming workflow + +One click and our next-generation editor auto clones your repository, installs your dependencies and starts your dev server. It's an unparalelled workflow. + +### Build whole educational experiences + +You like the idea of running Node.js in the browser and feel inspired to build your own editor? No worries. Our [WebContainers API](/platform/api/webcontainer-api) allows you to use our technology to power your own playgrounds. + ## What about other online IDEs? -Unlike StackBlitz, legacy online IDEs run on remote servers and stream the results back to your browser. This approach yields **few security benefits** and **provides a worse experience** than your local machine in nearly every way. +Unlike StackBlitz, legacy online IDEs run on remote servers (or virtual machines) and stream the results back to your browser. This approach yields **few security benefits** and **provides a worse experience** than your local machine in nearly every way. **StackBlitz solves these problems by doing all computing inside your browser**. This leverages decades of speed and security innovations and also **unlocks key development and debugging benefits**. +StackBlitz runs Node.js in the browser so you can use the web to build the web. + ## Get involved We love our community! Please do stay in touch and: @@ -74,3 +81,6 @@ We love our community! Please do stay in touch and: - Read our [blog](https://blog.stackblitz.com/) and see what we have been up to in our [monthly update posts](https://blog.stackblitz.com/categories/monthly-updates/)! - Share your StackBlitz projects on [Twitter](https://twitter.com/stackblitz)! - Reach out to our DevRel team via [email](mailto:devrel@stackblitz.com) with your StackBlitz ideas, dreams, and wishes! +- **Ask questions** on [GitHub Discussions](https://github.com/stackblitz/docs/discussions/new?category=Q-A). +- **Request a new docs page** or a more thorough explanation using our [GitHub Discussions](https://github.com/stackblitz/docs/discussions/new?category=ideas)! + diff --git a/docs/codeflow/working-in-codeflow-ide.md b/docs/guides/user-guide/working-in-stackblitz-editor.md similarity index 64% rename from docs/codeflow/working-in-codeflow-ide.md rename to docs/guides/user-guide/working-in-stackblitz-editor.md index fe1ca044..c4622643 100644 --- a/docs/codeflow/working-in-codeflow-ide.md +++ b/docs/guides/user-guide/working-in-stackblitz-editor.md @@ -1,41 +1,27 @@ --- -title: Working in Codeflow IDE -description: Are you ready to make Codeflow your workflow? This page covers what to expect when using Codeflow IDE. +title: Using the editor +description: This page covers what to expect when using StackBlitz editor. og_image: working-in-codeflow-ide.png --- # {{ $frontmatter.title }} -Are you ready to **make Codeflow your workflow?** 🔥 +This page covers what to expect when using StackBlitz. -This page covers what to expect when using Codeflow IDE. +
-## What is Codeflow IDE? +## Opening GitHub repositories in StackBlitz - - -It is designed for enabling you to quickly spin up the entire environment without the hassle of cloning and installing dependencies. - -:::tip Fun fact - -At StackBlitz, we have been using Codeflow IDE in our daily internal development, including PR reviews. This docs site was also built on Codeflow IDE and Web Publisher! - -::: - -## Opening GitHub repositories in Codeflow IDE - -To open a GitHub repository in Codeflow IDE, swap "github.com" with "pr.new" in the repository URL. +To open a GitHub repository in StackBlitz, swap "github.com" with "pr.new" in the repository URL. :::info Intrigued by "pr.new"? 👀 -If you're curious about this short URL, learn about the [full potential of "pr.new"](./using-pr-new). +If you're curious about this short URL, learn about the [full potential of "pr.new"](/guides/integration/using-pr-new). ::: -If you are not logged into StackBlitz, while this product is in beta, you will be prompted to log in or create a new account. - -## Migrating your local VSCode settings to Codeflow IDE +## Migrating your local VSCode settings to StackBlitz -To migrate the settings from your local VSCode to Codeflow IDE, follow these steps: +To migrate the settings from your local VSCode to StackBlitz, follow these steps: 1. In VSCode open the Settings tab (`cmd` + `,` on MacOS or `alt` + `,` on Windows and Linux). 2. Click on the "Open Settings (JSON)" button, located on the top right side of the view: @@ -46,7 +32,7 @@ To migrate the settings from your local VSCode to Codeflow IDE, follow these ste ![Settings view in JSON](./assets/settings-json.png) -4. Repeat these actions in [Codeflow](https://pr.new): open the settings tab (you can use `cmd` + `,` key binding on MacOS or `alt` + `,` on Windows or Linux), open the JSON view, and paste the copied settings - if you want, you can replace the default settings with the ones you copied from your local environment. +4. Repeat these actions in [pr.new](https://pr.new): open the settings tab (you can use `cmd` + `,` key binding on MacOS or `alt` + `,` on Windows or Linux), open the JSON view, and paste the copied settings - if you want, you can replace the default settings with the ones you copied from your local environment. The gif below demonstrates these steps: @@ -61,14 +47,8 @@ Whenever a file is changed, you will see a white dot next to its tab in the edit Moreover, you will also see that dot on the tab in your browser to remind you that you have unsaved changes. -:::warning - - - -::: - -## Making a PR with Codeflow IDE +## Making a PR with StackBlitz Let's add a file to [ilovecodeflow.com](https://github.com/stackblitz/ilovecodeflow.com). @@ -84,33 +64,33 @@ Follow these steps: 6. Click on "Commit & Push" to send the changes to GitHub. 6. Finally, you can submit your pull request by clicking on the "Open New PR" button 🥳 -## Reviewing a PR with Codeflow IDE +## Reviewing a PR with StackBlitz Let's look at [this suspicious PR](https://github.com/stackblitz/docs/pull/40). Follow these steps: 1. [Open the link](https://github.com/stackblitz/docs/pull/40) in a new tab. In the GitHub URL of the repository, replace "github.com" with "pr.new". -2. Codeflow IDE will spin up in the "PR Review mode". Open the Preview by clicking on the popup notification in the bottom right corner. +2. StackBlitz will spin up in the "PR Review mode". Open the Preview by clicking on the popup notification in the bottom right corner. 3. Compare suggested changes with the original file. You can also see the edits rendered in the Preview panel if you navigate to the edited page - in this case, the "What is StackBlitz" page. 4. You can add comments by clicking on the "+" icons, read other comments, or start a review. 5. If you no longer want to see the changes in the "PR Review mode", close the relevant files. -## Using the CodeflowApp bot +## Using the StackBlitz bot CodeflowApp bot in action -To integrate the bot, please follow the instructions on [Integrating CodeflowApp bot](./integrating-codeflowapp-bot.md). +To integrate the bot, please follow the instructions on [Integrating CodeflowApp bot](/guides/integration/integrating-codeflowapp-bot). ## Troubleshooting ### Out of memory error -It may happen that having a few Codeflow IDE or StackBlitz projects open at the same time may cause your browser to run out of memory. In this case, you will see the following popup: +It may happen that having a few StackBlitz or StackBlitz projects open at the same time may cause your browser to run out of memory. In this case, you will see the following popup: -It seems that your browser is running our of memory. Have Codeflow IDE, Web Publisher or StackBlitz editor open in other tabs or windows? Close a few and refresh the page. +It seems that your browser is running our of memory. Have StackBlitz, Web Publisher or StackBlitz open in other tabs or windows? Close a few and refresh the page. diff --git a/docs/links.ts b/docs/links.ts index 584f0a91..71fdc6f0 100644 --- a/docs/links.ts +++ b/docs/links.ts @@ -5,36 +5,38 @@ import type { CardLink, FooterSection, MenuLinkGroup, MenuLinkItem } from '@them const groupLinks: Record = { userGuide: [ - { text: 'What is StackBlitz', link: '/guides/user-guide/what-is-stackblitz' }, - { text: 'Getting started', link: '/guides/user-guide/getting-started' }, - { text: 'Starter projects', link: '/guides/user-guide/starter-projects' }, - { text: 'Available environments', link: '/guides/user-guide/available-environments' }, - { text: 'Importing projects', link: '/guides/user-guide/importing-projects' }, - { text: 'IDE: what’s on your screen', link: '/guides/user-guide/ide-whats-on-your-screen' }, + { + text: 'Getting started', + link: '/guides/user-guide/what-is-stackblitz', + items: [ + { text: 'What is StackBlitz', link: '/guides/user-guide/what-is-stackblitz' }, + { text: 'Quick start', link: '/guides/user-guide/getting-started' }, + { text: 'Create a new project', link: '/guides/user-guide/create-a-new-project' }, + { text: 'Importing projects', link: '/guides/user-guide/importing-projects' }, + ] + }, + { text: 'Using the editor', link: '/guides/user-guide/working-in-stackblitz-editor' }, + { text: 'User interface', link: '/guides/user-guide/user-interface' }, + { + text: 'Content updates with Web Publisher', + link: '/guides/user-guide/content-updates-with-web-publisher', + }, { text: 'Collections', link: '/guides/user-guide/collections' }, { text: 'Keyboard shortcuts', link: '/guides/user-guide/keyboard-shortcuts' }, - { text: 'General FAQs', link: '/guides/user-guide/general-faqs' }, + { text: 'General FAQs', link: '/guides/user-guide/general-faqs' }, + { text: 'Available environments', link: '/guides/user-guide/available-environments' }, + { text: 'Environment Variables', link: '/guides/user-guide/environment-variables' }, ], integrationGuide: [ - { text: 'Embedding projects', link: '/guides/integration/embedding' }, + { text: 'Manually embedding projects', link: '/guides/integration/embedding' }, { text: 'Launching projects from GitHub', link: '/guides/integration/open-from-github' }, { text: 'Creating projects with the SDK', link: '/guides/integration/create-with-sdk' }, { text: 'Bug reproductions', link: '/guides/integration/bug-reproductions' }, { text: 'Integrating with Storybook', link: '/guides/integration/storybook-addon' }, { text: 'Integrating with Figma', link: '/guides/integration/figma-plugin' }, - ], - codeflow: [ - { text: 'What is Codeflow?', link: '/codeflow/what-is-codeflow' }, - { text: 'Using pr.new', link: '/codeflow/using-pr-new' }, - { text: 'Working in Codeflow IDE', link: '/codeflow/working-in-codeflow-ide' }, - { text: 'Integrating CodeflowApp bot', link: '/codeflow/integrating-codeflowapp-bot' }, - { text: 'Environment Variables', link: '/codeflow/environment-variables' }, - { - text: 'Content updates with Web Publisher', - link: '/codeflow/content-updates-with-web-publisher', - }, - { text: 'Integrating Web Publisher', link: '/codeflow/integrating-web-publisher' }, - { text: 'Codeflow FAQ', link: '/codeflow/codeflow-faq' }, + { text: 'Integrating CodeflowApp bot', link: '/guides/integration/integrating-codeflowapp-bot' }, + { text: 'Integrating Web Publisher', link: '/guides/integration/integrating-web-publisher' }, + { text: 'Using pr.new', link: '/guides/integration/using-pr-new' }, ], teams: [ { text: 'What is StackBlitz Teams', link: '/teams/what-is-stackblitz-teams.md' }, @@ -47,16 +49,15 @@ const groupLinks: Record = { api: [ { text: 'JavaScript SDK', - link: '/platform/api/javascript-sdk', + link: '/platform/api/quick-start', items: [ - { text: 'SDK overview', link: '/platform/api/javascript-sdk' }, - { text: 'Options reference', link: '/platform/api/javascript-sdk-options' }, - { text: 'Controlling embeds', link: '/platform/api/javascript-sdk-vm' }, + { text: 'Quick start', link: '/platform/api/quick-start' }, + { text: 'Controlling your SDK embeds', link: '/platform/api/javascript-sdk-vm' }, { text: 'Managing dependencies', link: '/platform/api/javascript-sdk-dependencies' }, + { text: 'Options reference', link: '/platform/api/javascript-sdk-options' }, ], }, - { text: 'POST API', link: '/platform/api/post-api' }, - { text: 'WebContainer API', link: '/platform/api/webcontainer-api' }, + { text: 'HTTP POST', link: '/platform/api/http-post' }, ], webcontainers: [ { text: 'Roadmap', link: '/platform/webcontainers/roadmap' }, @@ -65,6 +66,7 @@ const groupLinks: Record = { { text: 'Project configuration', link: '/platform/webcontainers/project-config' }, { text: 'Turbo package manager', link: '/platform/webcontainers/turbo-package-manager' }, { text: 'Troubleshooting', link: '/platform/webcontainers/troubleshooting-webcontainers' }, + { text: 'WebContainer API', link: '/platform/webcontainers/webcontainer-api' }, ], enterprise: [ { text: 'Overview', link: '/enterprise/overview' }, @@ -101,13 +103,9 @@ const linkGroups: Record items: groupLinks.userGuide, }, integrationGuide: { - text: 'Integration Guide', + text: 'Integrations', items: groupLinks.integrationGuide, }, - codeflow: { - text: 'Codeflow', - items: groupLinks.codeflow, - }, teams: { text: 'Teams', items: groupLinks.teams, @@ -149,18 +147,18 @@ export const sidebarLinks = ( export const homeTopLinks: CardLink[] = [ { - icon: 'fa-file-import', - title: 'Get Started', + icon: 'fa-browser', + title: 'Getting started', description: - 'Explore the full potential of StackBlitz: from writing code or spinning quick demos to making your docs delightful.', - url: '/guides/user-guide/what-is-stackblitz', + 'Explore the full potential of StackBlitz: from writing code or spinning quick demos to making your docs delightful.', + url: '/guides/user-guide/getting-started', }, { - icon: 'fa-browser', - title: 'Codeflow', + icon: 'fa-bolt', + title: 'What is StackBlitz?', description: - 'One click opens a full in-browser IDE for your repos, issues, and PRs. No more cloning, installing, stashing!', - url: '/codeflow/what-is-codeflow', + 'Learn how StackBlitz works and how you can use it for everything from rapid prototyping to full stack development.', + url: '/guides/user-guide/what-is-stackblitz', }, { icon: 'fa-brackets-curly', diff --git a/docs/parts/error-out-of-memory.md b/docs/parts/error-out-of-memory.md index af23b7ef..5bb21e72 100644 --- a/docs/parts/error-out-of-memory.md +++ b/docs/parts/error-out-of-memory.md @@ -2,7 +2,7 @@ In your browser's console, you may see the following error: > RangeError: WebAssembly.instantiate(): Out of memory: wasm memory -When too much memory is allocated to browser processes, browsers will run out of memory. This can happen if you open too many StackBlitz projects at the same time. This includes our editor, Codeflow IDE, and Web Publisher - or if a page features too many StackBlitz embeds running at the same time. +When too much memory is allocated to browser processes, browsers will run out of memory. This can happen if you open too many StackBlitz projects at the same time. **To free up memory, close other StackBlitz projects in other tabs or windows, and refresh the page.** diff --git a/docs/platform/api/post-api.md b/docs/platform/api/http-post.md similarity index 87% rename from docs/platform/api/post-api.md rename to docs/platform/api/http-post.md index 61bab8ae..1a9dd5c9 100644 --- a/docs/platform/api/post-api.md +++ b/docs/platform/api/http-post.md @@ -1,12 +1,14 @@ --- -title: POST API +title: HTTP POST description: Create new projects by POSTing the desired project data from a form. This method is useful when you don't or can't use our JavaScript SDK. og_image: post-api.png --- -# Creating a project with a POST request + -Create new projects by POSTing the desired project data from a form. This method is useful when you don't or can't use our JavaScript SDK. +# Creating a project with a HTTP POST request + +Create new projects by sending a HTTP POST request with the desired project data. This method is useful when you want a simple way to generate StackBlitz projects without using our official JavaScript SDK. This page will guide you through the setup. You can also take a look at [the demo project](#demo) at the end. diff --git a/docs/platform/api/javascript-sdk-dependencies.md b/docs/platform/api/javascript-sdk-dependencies.md index 56cc6eb5..da0e1325 100644 --- a/docs/platform/api/javascript-sdk-dependencies.md +++ b/docs/platform/api/javascript-sdk-dependencies.md @@ -4,6 +4,8 @@ description: When creating new projects with the `sdk.openProject` and `sdk.embe og_image: sdk-managing-dependencies.png --- + + # {{ $frontmatter.title }} When creating new projects with the [`sdk.openProject`](/platform/api/javascript-sdk#openproject) and [`sdk.embedProject`](/platform/api/javascript-sdk#embedproject) methods, you can specify which npm dependencies should be installed on startup. diff --git a/docs/platform/api/javascript-sdk-options.md b/docs/platform/api/javascript-sdk-options.md index a3a3548b..966272ed 100644 --- a/docs/platform/api/javascript-sdk-options.md +++ b/docs/platform/api/javascript-sdk-options.md @@ -4,6 +4,8 @@ description: Modify your StackBlitz project with SDK options. og_image: sdk-options-reference.png --- + + # {{ $frontmatter.title }} ## Project {#project} @@ -209,7 +211,7 @@ This only declares an _intent_, and the available values may behave differently | `'editor'` | Shows the Editor only (embed and standard layouts) | [available_env_docs]: /guides/user-guide/available-environments -[ui_docs]: /guides/user-guide/ide-whats-on-your-screen +[ui_docs]: /guides/user-guide/user-interface [embedoptions]: #embedoptions [openfileoption]: #openfileoption diff --git a/docs/platform/api/javascript-sdk-vm.md b/docs/platform/api/javascript-sdk-vm.md index 96e435ba..13d80701 100644 --- a/docs/platform/api/javascript-sdk-vm.md +++ b/docs/platform/api/javascript-sdk-vm.md @@ -1,8 +1,9 @@ --- -title: Controlling embeds with the SDK’s VM interface +title: Controlling your SDK embeds description: All of the embed methods of the StackBlitz JS SDK automatically connect to the embedded StackBlitz VM, giving you programmatic access to the embedded project. og_image: sdk-controlling-embeds.png --- + # {{ $frontmatter.title }} @@ -10,7 +11,7 @@ og_image: sdk-controlling-embeds.png These methods only apply to projects embedded on a page. ::: -All of the embed methods of the [StackBlitz JS SDK][sdk_docs] automatically connect to the embedded StackBlitz VM, giving you programmatic access to the embedded project. +All of the embed methods of the [StackBlitz JS SDK](/platform/api/quick-start) automatically connect to the embedded StackBlitz VM, giving you programmatic access to the embedded project. Use the VM to: diff --git a/docs/platform/api/parts/environments.md b/docs/platform/api/parts/environments.md new file mode 100644 index 00000000..fe8d2681 --- /dev/null +++ b/docs/platform/api/parts/environments.md @@ -0,0 +1,5 @@ +:::warning This page refers to StackBlitz's classic editor +StackBlitz's classic editor is primarily used for embedding in docs and design systems. + +For more information, refer to StackBlitz's [available environments](/guides/user-guide/available-environments). +::: diff --git a/docs/platform/api/javascript-sdk.md b/docs/platform/api/quick-start.md similarity index 98% rename from docs/platform/api/javascript-sdk.md rename to docs/platform/api/quick-start.md index 30ed982f..b9d3148c 100644 --- a/docs/platform/api/javascript-sdk.md +++ b/docs/platform/api/quick-start.md @@ -1,9 +1,11 @@ --- -title: JavaScript SDK +title: Quick Start description: The StackBlitz JavaScript SDK lets you programmatically create StackBlitz projects to be opened in a new window or embedded in your docs, example pages, or blog posts. og_image: javascript-sdk.png --- + + # {{ $frontmatter.title }} The StackBlitz JavaScript SDK lets you programmatically create StackBlitz projects to be opened in a new window or embedded in your docs, example pages, or blog posts. Once embedded, the projects can be controlled by using [the SDK’s VM interface][sdk_vm_docs]. @@ -59,7 +61,7 @@ Opens an existing StackBlitz project in a new tab (or in the current window). | Argument | Required | Type | Description | | --- | --- | --- | --- | | `projectId` | Yes | String | The ID of the project to open. | -| `openOptions` | No | [OpenOptions][] (Object) | Display options for the StackBlitz editor. | +| `openOptions` | No | [OpenOptions][] (Object) | Display options for StackBlitz. | Example: @@ -111,7 +113,7 @@ Opens a project from GitHub in StackBlitz (in a new tab or in the current window | Argument | Required | Type | Description | | --- | --- | --- | --- | | `repoPath` | Yes | String | The repository path (with optional branch/tag/commit/folder). | -| `openOptions` | No | [OpenOptions][] (Object) | Display options for the StackBlitz editor. | +| `openOptions` | No | [OpenOptions][] (Object) | Display options for StackBlitz. | Example: @@ -171,7 +173,7 @@ Creates a new project and opens it in a new tab (or in the current window). | Argument | Required | Type | Description | | --- | --- | --- | --- | | `project` | Yes | [Project][] (Object) | Project data and settings. | -| `openOptions` | No | [OpenOptions][] (Object) | Display options for the StackBlitz editor. | +| `openOptions` | No | [OpenOptions][] (Object) | Display options for the StackBlitz. | Example: diff --git a/docs/platform/webcontainers/browser-config.md b/docs/platform/webcontainers/browser-config.md index 5e4e5b4b..888948b1 100644 --- a/docs/platform/webcontainers/browser-config.md +++ b/docs/platform/webcontainers/browser-config.md @@ -84,7 +84,7 @@ For instance, in Chrome, go to `chrome://settings/cookies` and add those excepti If you don’t want to allow Service Workers and third-party cookies for all StackBlitz projects, you can add exceptions for individual projects instead. -Note that this may not be very practical, because the exact domain for a project can change between sessions, especially in [Codeflow IDE](/codeflow/working-in-codeflow-ide). +Note that this may not be very practical, because the exact domain for a project can change between sessions, especially in [StackBlitz Editor](/guides/user-guide/working-in-stackblitz-editor). In Chrome, click the lock icon in the navigation bar: diff --git a/docs/platform/webcontainers/browser-support.md b/docs/platform/webcontainers/browser-support.md index d20b7ceb..6c4a0919 100644 --- a/docs/platform/webcontainers/browser-support.md +++ b/docs/platform/webcontainers/browser-support.md @@ -62,7 +62,7 @@ Learn [how to configure Brave to run WebContainers](/platform/webcontainers/brow We have beta support for Firefox. Please try it and [share feedback with us](https://github.com/stackblitz/webcontainer-core/issues/new/choose)! -Firefox does not fully support the required mode for cross-origin isolation, so you might encounter limitations when **running a server in a preview frame** within the StackBlitz editor. Third-party assets might get blocked due to the limitations of cross-origin isolation policies. However, you can work around this by opening your server preview in a separate window. +Firefox does not fully support the required mode for cross-origin isolation, so you might encounter limitations when **running a server in a preview frame** within StackBlitz. Third-party assets might get blocked due to the limitations of cross-origin isolation policies. However, you can work around this by opening your server preview in a separate window. If you are using Firefox Private Browsing, it's not possible to run a web server. The reason is that we need to be able to use a Service Worker, which Firefox does not allow in Private Browsing windows. @@ -72,7 +72,7 @@ Because Firefox and Node.js use different JavaScript engines (SpiderMonkey and V We have beta support for Safari on macOS, starting with Safari 16.4. Please try it and [report issues here](https://github.com/stackblitz/webcontainer-core/issues/new/choose). -Safari does not fully support the required mode for cross-origin isolation, so you might encounter limitations when **running a server in a preview frame** within the StackBlitz editor. Third-party assets might get blocked due to the limitations of cross-origin isolation policies. However, you can work around this by opening your server preview in a separate window. +Safari does not fully support the required mode for cross-origin isolation, so you might encounter limitations when **running a server in a preview frame** within StackBlitz. Third-party assets might get blocked due to the limitations of cross-origin isolation policies. However, you can work around this by opening your server preview in a separate window. Because Safari and Node.js use different JavaScript engines (JavaScriptCore and V8, respectively), there is a small risk of running into [JS engine differences](#js-engine-differences). diff --git a/docs/platform/api/webcontainer-api.md b/docs/platform/webcontainers/webcontainer-api.md similarity index 100% rename from docs/platform/api/webcontainer-api.md rename to docs/platform/webcontainers/webcontainer-api.md diff --git a/docs/public/_redirects b/docs/public/_redirects index ad084867..ccf47cca 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -43,6 +43,7 @@ /docs/platform/embedding/ /guides/integration/embedding /docs/platform/getting-started/ /guides/user-guide/getting-started /docs/platform/ide-whats-on-your-screen/ /guides/user-guide/ide-whats-on-your-screen +/guides/user-guide/ide-whats-on-your-screen /guides/user-guide/user-interface /docs/platform/importing-projects/ /guides/user-guide/importing-projects /docs/platform/javascript-sdk-dependencies/ /platform/api/javascript-sdk-dependencies /docs/platform/javascript-sdk-vm/ /platform/api/javascript-sdk-vm diff --git a/docs/teams/pull-request-review-integration.md b/docs/teams/pull-request-review-integration.md index e9b44252..a8963738 100644 --- a/docs/teams/pull-request-review-integration.md +++ b/docs/teams/pull-request-review-integration.md @@ -4,9 +4,9 @@ title: Pull Request Review Integration # {{ $frontmatter.title }} -To add one-click pull request reviews to your team, you will need to install the CodeflowApp bot into your Github organization and select which repos you want it to integrate with. Navigate to [the installation page here](https://stackblitz.com/install-github-app) to initiate the installation process. +To add one-click pull request reviews to your team, you will need to install the StackBlitz GitHub app into your Github organization and select which repos you want it to integrate with. Navigate to [the installation page here](https://stackblitz.com/install-github-app) to initiate the installation process. Once installed, it will comment on every PR with a link to instantly run and review it: ![Trial banner](./assets/codeflowapp.jpg) -For more information & troubleshooting you can checkout the [CodeflowApp documentation here](https://developer.stackblitz.com/codeflow/integrating-codeflowapp-bot). +For more information & troubleshooting you can checkout the [CodeflowApp documentation here](https://developer.stackblitz.com/guides/integration/integrating-codeflowapp-bot). diff --git a/docs/teams/what-is-stackblitz-teams.md b/docs/teams/what-is-stackblitz-teams.md index 7daa8bd6..358e5718 100644 --- a/docs/teams/what-is-stackblitz-teams.md +++ b/docs/teams/what-is-stackblitz-teams.md @@ -30,7 +30,7 @@ StackBlitz Teams is not just limited to public npm packages. With our integratio ### Environment Secrets StackBlitz Teams allows you to add environment variables to your workspace, offering a secure way to connect to external services without exposing sensitive information. -### Codeflow Editor (Beta) +### Next Gen Editor Experience a fully-featured, VS Code based editing environment complete with an in-browser Node.js environment, terminal, and support for package management and VS Code extensions. Currently in beta, this feature provides a production grade editing environment already familiar to your dev team. ## Getting Started