Scripts by stevebarakat

React Sandbox

Install sandbox

// Menu: React Sandbox
// Description: A simple version of create-react-app.
// Author: S.Barakat
// Prevent Scriptkit fron closing until script finishes
// The replace fn
let replaceInFile = async (filePath, regex, string) => {
let content = await readFile(filePath, "utf-8")
let updatedContent = content.replace(
new RegExp(regex),
await writeFile(filePath, updatedContent)
// $`` is using the "zx" tool which wraps around "exec"
// "sed" is a very powerful search/replace tool. We can use it for removing lines:
let removeLine = async (search, file) =>
await $`sed -i '' /${search}/d ${file}`;
// Prompt for the project name
// "arg" is Script Kit specific so that it works in both the terminal and in
let projectName = await arg("Project name");
let packageManager = await arg("Choose package manager:", ["npm", "yarn"])
// Update PATH if using yarn
if (packageManager === "yarn") process.env.PATH = `/Users/sb/.yarn/bin/:${process.env.PATH}`;
// All the shelljs methods are global, e.g., "cd".
// Whether you use `$` or the shelljs helpers will be a personal preference
// "home" is a helper to create paths in your home dir
await $`npx create-react-app ${projectName}`;
cd(path.resolve(projectName, "src"));
// Note: "rm" is actually mapped to "trash" so files get moved to your trash bin instead of permenantly deleted
await removeLine("WebVitals", "index.js");
await removeLine("logo", "App.js");
// Download to current dir
await download("", ".");
await $`npm remove web-vitals @testing-library/jest-dom @testing-library/react @testing-library/user-event`;
let filePath = path.resolve();
await replaceInFile(
filePath + "/App.js",
`<header className="App-header">
Edit <code>src/App.js</code> and save to reload.
rel="noopener noreferrer"
Learn React
await replaceInFile(
filePath + "/index.js",
`import './index.css'`,
`import './reset.css'`
await replaceInFile(
filePath + "/App.css",
*::after {
box-sizing: border-box;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
Discuss Post

Computer Info

Install computer-info

// Menu: Computer Info
// Description: Gets Computer info
// Author: S.Barakat
import os from "os";
const homeDirectory = os.homedir();
const osPlatform = os.platform();
const cpu = os.cpus();
const coreCount = cpu.length;
const cpuModel = cpu[0].model;
const cpuSpeed = cpu[0].speed;
let info = `
* OS: ${osPlatform}
* Home: ${homeDirectory}
* CPU: ${cpuModel}
* Speed: ${cpuSpeed} MHz
* Cores: ${coreCount}
await say(
Your home directory is: ${homeDirectory}.
The OS platform is: ${osPlatform}.
The processor speed is ${cpuSpeed} megahertz.
Your ${cpuModel} has ${coreCount} cores.
await div(md(info), `p-4`)
Discuss Post