@storyblok/create-demo
Version:
A CLI tool for quickly starting a Storyblok project
226 lines (221 loc) • 11.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable complexity */
/* eslint-disable unicorn/import-style */
const core_1 = require("@oclif/core");
const inquirer = require("inquirer");
const chalk = require("chalk");
const path = require("node:path");
const fs = require("node:fs");
const node_fetch_1 = require("node-fetch");
const copy_1 = require("../lib/copy");
const prompts_1 = require("../lib/prompts");
const frameworks_1 = require("../lib/frameworks");
const clone_1 = require("../lib/clone");
const replace_1 = require("../lib/replace");
const regions_1 = require("../lib/regions");
const helper_replace_1 = require("../lib/helper-replace");
class CreateStoryblokAppCommand extends core_1.Command {
async run() {
var _a, _b, _c;
const log = this.log.bind(this);
const chalkSb = chalk.hex('#00b3b0').bold;
log('');
log(chalkSb('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'));
log(chalkSb('@@@@@......................................@@@@@'));
log(chalkSb('@@@@........................................@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@&.............@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@@@@@@.........@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@@@@@@@........@@@@'));
log(chalkSb('@@@@........@@@@@@...........@@@@@@@........@@@@'));
log(chalkSb('@@@@........@@@@@@..........@@@@@@@.........@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@@@@...........@@@@'));
log(chalkSb('@@@@........@@@@@@...........@@@@@@@........@@@@'));
log(chalkSb('@@@@........@@@@@@............@@@@@@@.......@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@@@@@@@@.......@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@@@@@@@........@@@@'));
log(chalkSb('@@@@........@@@@@@@@@@@@@@@@@@&.............@@@@'));
log(chalkSb('@@@@........................................@@@@'));
log(chalkSb('@@@@........................................@@@@'));
log(chalkSb('@@@@@......................................@@@@@'));
log(chalkSb('@@@@@@@@@@@.....@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'));
log(chalkSb('@@@@@@@@@@@...@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'));
log('');
log(chalkSb('Welcome 👋, please create a new space first: https://app.storyblok.com/#/me/spaces/new'));
log('');
let directoryTargetCreated = false;
let directoryTempCreated = false;
const { flags } = await this.parse(CreateStoryblokAppCommand);
const answers = await inquirer.prompt(prompts_1.default, flags);
const { framework, folder, packagemanager, key, region } = answers;
const frameworkDetails = frameworks_1.default.find(f => f.value === framework);
try {
if (!framework || !frameworkDetails) {
const frameworkList = frameworks_1.default.map(item => item.value).join(', ');
throw new Error('Please provide a framework to scaffold with via `-f <value>`, or `--framework=<value>`.\n Available values: ' + frameworkList);
}
const token = flags.key || key || frameworkDetails.token;
// region
const spaceRegion = (flags === null || flags === void 0 ? void 0 : flags.region) || region; // EU , US or CN
let selectedRegion = regions_1.default.EU;
const possibleRegionValues = Object.values(regions_1.default).map(r => r.value);
const isValidRegion = possibleRegionValues.includes(spaceRegion);
if (isValidRegion) {
selectedRegion = (_a = Object.values(regions_1.default).find(r => r.value === spaceRegion)) !== null && _a !== void 0 ? _a : regions_1.default.EU;
}
else {
throw new Error(`Please provide a valid region via '-r' parameter : ${possibleRegionValues.join(', ')}`);
}
let regionParam = '';
if (!token) {
log(chalk.red('Please provide your access key with the --key argument'));
}
if (spaceRegion && isValidRegion) {
regionParam = `?region=${selectedRegion.value}`;
}
log('');
log('');
log(chalkSb('Creating your demo ...'));
// app endpoint connection
const story = await (0, node_fetch_1.default)(`${selectedRegion.apiEndpoint}stories/home?version=draft&token=${token}`).then(res => res.json());
let storyId = 0;
if (story === null || story === void 0 ? void 0 : story.story) {
storyId = story.story.id;
}
else {
log(chalk.red("ⅹ Could not find the default story with the slug 'home'"));
log(chalk.red(`ⅹ Or the space is located in a region outside the ${spaceRegion}. In that case please provide the '--region' parameter`));
return;
}
// check if target directoy exists
if (fs.existsSync(folder)) {
log(chalk.red(`I can't create the demo because the directory '${folder}' already exists. Try to define another directory name with the option '-d'.`));
return;
}
// framework exmaple cloning
let repositoryUrl = 'https://github.com/storyblok/getting-started.git';
let submodules = (_b = frameworkDetails.submodules) !== null && _b !== void 0 ? _b : false;
let targetPath = 'temp-started';
if (frameworkDetails.repositoryUrl) {
repositoryUrl = frameworkDetails.repositoryUrl;
submodules = false;
targetPath = `temp-started/${framework}`;
}
await (0, clone_1.default)(repositoryUrl, targetPath, {
shallow: true,
checkout: (_c = frameworkDetails.branch) !== null && _c !== void 0 ? _c : 'master',
submodules: submodules,
});
directoryTempCreated = true;
try {
fs.rmSync(`./temp-started/${framework}/.git`, { recursive: true });
}
catch { }
const readmeContent = `
# Storyblok quick starter project
Welcome to this sample project for ${frameworkDetails.name}!
This project serves as a quick starter for integrating Storyblok, a headless CMS, into your web development projects.
For starting, you can access to the \`${folder}\` folder.
In the folder you have some files like:
- \`${frameworkDetails.config}\`: the configuration with Storyblok API;
- \`${frameworkDetails.bridge}\`: the initialization of the Storyblok Bridge.
`;
fs.rmSync(`./temp-started/${framework}/README.md`);
fs.writeFileSync(`./temp-started/${framework}/README.md`, readmeContent);
(0, copy_1.default)(`./temp-started/${framework}`, folder);
directoryTargetCreated = true;
fs.rmSync('./temp-started', { recursive: true });
directoryTempCreated = false;
const replacements = {
[frameworkDetails.token]: token,
};
if (['US', 'CN'].includes(spaceRegion)) {
const regiontoreplace = "region: ''";
replacements[regiontoreplace] =
"region: '" + spaceRegion.toLowerCase() + "'";
}
if (spaceRegion === 'CN') {
(0, helper_replace_1.addCustomParentFramework)({
folder,
framework,
frameworkDetails,
localhostPath: 'https://app.storyblokchina.cn',
});
}
(0, replace_1.default)(path.join(folder, frameworkDetails.config), replacements);
const pathEditing = `${selectedRegion.urlUi}/#/edit/${storyId}${regionParam}`;
const protocol = frameworkDetails.https ? 'https' : 'http';
const localhostPath = `${protocol}://localhost:${frameworkDetails.port}/`;
log('');
log(chalkSb('💪 Project created! Now just follow these steps 👇'));
log('');
// package manager
let mangerInstall = 'npm install';
let mangerRun = 'npm run';
switch (packagemanager) {
case 'yarn':
mangerInstall = 'yarn';
mangerRun = 'yarn run';
break;
case 'bun':
mangerInstall = 'bun install';
mangerRun = 'bun run';
break;
}
const executeMkcert = frameworkDetails.usingMkcert ? ' && mkcert localhost ' : '';
log(chalkSb('1. Start the server: '), chalk.yellow(`cd ./${folder} ${executeMkcert} && ${mangerInstall} && ${mangerRun} ${frameworkDetails.start}`));
log(chalkSb('2. Start editing:'), chalk.yellow(pathEditing));
log('');
log(chalkSb('You need to setup mkcert to use the Visual Editor in the app: '));
log('');
log(chalkSb('2.a MacOS: '), chalk.yellow('https://www.storyblok.com/faq/setup-dev-server-https-proxy'));
log(chalkSb('2.b Windows: '), chalk.yellow('https://www.storyblok.com/faq/setup-dev-server-https-windows'));
log(chalkSb('3. Setup your preview url: : '), chalk.yellow('https://www.storyblok.com/docs/guide/getting-started#setup-of-the-visual-editor-preview'), chalkSb(`to your localhost: ${localhostPath}`));
if (frameworkDetails.tutorialLink) {
log('');
log(chalkSb('📕 Read the tutorial:'), chalk.yellow(frameworkDetails.tutorialLink));
log('');
log('');
}
}
catch (error) {
if (error instanceof Error) {
log(chalk.red(error.message));
}
else {
log(chalk.red('Generic Error'));
}
if (directoryTempCreated && fs.existsSync('./temp-started')) {
fs.rmSync('./temp-started', { recursive: true });
directoryTempCreated = false;
}
if (directoryTargetCreated && fs.existsSync(`./${folder}`)) {
fs.rmSync(`./${folder}`, { recursive: true });
directoryTargetCreated = false;
}
}
}
}
exports.default = CreateStoryblokAppCommand;
CreateStoryblokAppCommand.description = 'The CLI tool for quickly starting a Storyblok project';
CreateStoryblokAppCommand.flags = {
help: core_1.Flags.help({ char: 'h' }),
version: core_1.Flags.version({ char: 'v' }),
key: core_1.Flags.string({ char: 'k', description: 'Storyblok Access Token' }),
region: core_1.Flags.string({
char: 'r',
description: 'Space region (eu-central-1, us-east-1, cn-north-1, ca-central-1, ap-southeast-2)',
}),
folder: core_1.Flags.string({
char: 'd',
description: 'Folder path for the demo (e.g. my-demo)',
}),
framework: core_1.Flags.string({
char: 'f',
description: 'Framework to use (vuejs, nuxtjs, nuxtjs-3, nextjs, reactjs, remix, astro, sveltekit, gatsbyjs)',
}),
packagemanager: core_1.Flags.string({
char: 'p',
description: 'Package manager to use (yarn or npm or bun)',
}),
};