🚀 Rocket Scripts are development scripts for React web apps and React electron apps.
These scripts are not support CLI for easy usage.
But, you can easy combine the many other environments (e.g. Back-End API Server, Puppeteer...) in API usage.
For example, you can available like below.
// 1. Start Back-End API Server// 2. Start Front-End Development Server// 3. Start Chromium Browser with Puppeteerimport{serverStart}from'@myorg/api-server';import{start}from'@rocket-scripts/web';importpuppeteerfrom'puppeteer';(async()=>{constremoteDebuggingPort: number=+(process.env.INSPECT_CHROME??9222);constserverPort: number=+(process.env.API_SERVER_PORT??9455);// start back-end serverawaitserverStart({port: serverPort});// start front-end dev serverconst{ port }=awaitstart({app: 'client',webpackDevServerConfig: {// bind proxy `<back-end>/*` -> `<front-end>/api/*`proxy: {'/api': {target: `http://localhost:${serverPort}`,changeOrigin: true,logLevel: 'debug',pathRewrite: {'^/api': '',},},},},});// start puppeteerconstbrowser=awaitpuppeteer.launch({//userDataDir: process.env.CHROMIUM_USER_DATA_DEBUG,headless: false,args: ['--start-fullscreen',`--remote-debugging-port=${remoteDebuggingPort}`,],devtools: true,});const[page]=awaitbrowser.pages();awaitpage.goto(`http://localhost:${port}`);awaitpage.waitForFunction(`document.querySelector('#app h1').innerHTML === 'Hello World!'`,{timeout: 1000*60,polling: 1000*3,},);})();// 1. Start Front-End development server// 2. Start Chromium Broser with Puppeteer// 3. Start performance profiling with shortcut on Interactive CLIimport{start}from'@rocket-scripts/web';import{Divider}from'@ssen/dev-server-components';importchokidarfrom'chokidar';import{format}from'date-fns';import{FSWatcher}from'fs';importfsfrom'fs-extra';import{Text,useInput}from'ink';importpathfrom'path';importpuppeteer,{Browser}from'puppeteer';importReact,{useCallback,useEffect,useState}from'react';constprofileStore: string=path.join(process.cwd(),'profiles');functionProfileRepeater({
browser,
pageUrl,
shortcuts,}: {browser: Browser;pageUrl: string;shortcuts: {record: string;clean: string;};}){const[profiles,setProfiles]=useState<string[]>([]);construn=useCallback(async()=>{constpage=awaitbrowser.newPage();constprofile: string=path.join(profileStore,`animate-${format(newDate(),'yyyy-MM-dd-hhmmss')}.json`,);awaitpage.tracing.start({path: profile,screenshots: true,// @see ~/tracing.categories.json// const cdp: CDPSession = await page._client;// const categories = await cdp.send('Tracing.getCategories');categories: ['devtools.timeline','disabled-by-default-devtools.timeline','disabled-by-default-devtools.timeline.frame','disabled-by-default-devtools.timeline.stack','disabled-by-default-v8.cpu_profiler','disabled-by-default-v8.cpu_profiler.hires','memory',],});awaitpage.goto(pageUrl);awaitpage.waitFor(4000);awaitpage.tracing.stop();awaitpage.close();},[browser,pageUrl]);useEffect(()=>{functionupdate(){setProfiles(fs.readdirSync(profileStore).filter((file)=>/^animate-/.test(file)),);}constwatcher: FSWatcher=chokidar.watch([`${profileStore}/*.json`]).on('add',update).on('unlink',update);return()=>{watcher.close();};},[]);useInput((input)=>{switch(input){caseshortcuts.record:
run();break;caseshortcuts.clean:
for(constfileoffs.readdirSync(profileStore)){if(/[0-9]{4}-[0-9]{2}-[0-9]{2}-[0-9]{6}\.json$/.test(file)){fs.removeSync(path.join(profileStore,file));}}break;}});return(<><Dividerbold>{`Profiles (${shortcuts.record}) Create a new profile (${shortcuts.clean}) Clean temp profiles`}</Divider>{profiles.map((file)=>(<Textkey={file}>{file}</Text>))}</>);}(async()=>{constremoteDebuggingPort: number=+(process.env.INSPECT_CHROME??9222);constwebPort: number=+(process.env.DEV_SERVER_PORT??9633);awaitfs.mkdirp(profileStore);constbrowser=awaitpuppeteer.launch({userDataDir: process.env.CHROMIUM_USER_DATA_DEBUG,headless: false,args: ['--start-fullscreen',`--remote-debugging-port=${remoteDebuggingPort}`,],devtools: true,});awaitstart({app: 'app',port: webPort,children: (<ProfileRepeaterbrowser={browser}pageUrl={`http://localhost:${webPort}`}shortcuts={{record: 'x',clean: 'c'}}/>),});})();https://github.com/rocket-hangar/rocket-scripts-templates/blob/master/templates/web/README.md
# create a workspace directory
npx generate-github-directory https://github.com/rocket-hangar/workspace-template my-project
cd my-project
# create an app
npx generate-github-directory https://github.com/rocket-hangar/rocket-scripts-templates/tree/master/templates/web my-app
# add "my-app" to workspaces of package.json# install
yarn
# startcd my-app
# start
yarn run startFish shell function
# add ~/.config/fish/config.fishfunction generate-web-project
set project $argv[1]
set app $argv[2]
if [ -z$project ] || [ -z$app ]
echo"Undefined arguments $project$app : generate-web-project project app"else# create a workspace directory
generate-github-directory https://github.com/rocket-hangar/workspace-template $projectcd$project# create an app
generate-github-directory https://github.com/rocket-hangar/rocket-scripts-templates/tree/master/templates/web $appcd$appcd ..
echo"👍 Generated! follow next steps"echo"Add $app to workspaces of package.json"echo"And, yarn install"# open project in your IDE# webstorm .# code .endendhttps://github.com/rocket-hangar/rocket-scripts-templates/tree/master/templates/electron
# create a workspace directory
npx generate-github-directory https://github.com/rocket-hangar/workspace-template my-project
cd my-project
# create an app
npx generate-github-directory https://github.com/rocket-hangar/rocket-scripts-templates/tree/master/templates/electron my-app
# add "my-app" to workspaces of package.json# install
yarn
# directorycd my-app
# start
yarn run start