Blazepack ⚡

Blazing fast dev server powered by sandpack

Motivation

I always wanted the super fast feedback that codesandbox provides in my local environment, so I have built a tiny wrapper around the codesandbox bundler sandpack and it runs locally 🎉

Why Blazepack?

It is blazing fast ⚡
Super tiny (24kb) 👌
Run projects without npm install 💃
Supports private npm packages 😉
React fast refresh ❤️
Supports React, Vue, Angular, Preact, Svelte and more 🔨
Save disk space 💾

Install

Install it globally

npm i -g blazepack

You can also use the blazepack vscode extension

Usage

Create project from Template

Create your first create react app

blazepack create my-cra --template=react

# create the app and also start the dev server

blazepack create my-angular-app --template=angular --open

Available Templates

static
react
react-ts
react-native-web
vanilla
preact
vue2
vue3
angular
svelte
reason
cxjs
dojo

Start project

To use it in your existing create react app, angular, preact, svelte, vue cli app just run

blazepack start

It will start the dev server at port 3000 and open it in browser, you can change the default port by using the port option

blazepack start --port 3001

You can also run it using the npx command and not install it globally

npx blazepack start

Install dependency

You can install a new package pretty fast using the below command. It does not create node_modules so you are gonna save a lot of space 😉

blazepack install redux [--dev|-save-dev|-D]

# or

blazepack i redux [--dev|-save-dev|-D]

# or

blazepack add redux [--dev|-save-dev|-D]

Remove dependency

You can quickly remove a unused dependency by running following command:

blazepack remove redux

# or

blazepack uninstall redux

Check version

To know the version of blazepack you are running use the --version option

blazepack --version

Clone Sandbox

You can clone an existing codesandox, by just running the below commands:

Clone from URL

blazepack clone https://codesandbox.io/s/use-undo-redo-yrts1

Cloning from embed url

blazepack clone https://codesandbox.io/embed/use-undo-redo-yrts1

Clone from Sandbox Id

blazepack clone use-undo-redo-yrts1

Export to codesandbox.io

You can export your current project to codesandbox for sharing with your friends in a jiffy

blazepack export

# use --open option to also open the newly created sandbox in a browser tab

blazepack export --open

Private npm packages

We honour the project level .npmrc file and if it is not found we fallback to user level .npmrc file and then finally the global .npmrc file. Currently we only support scoped private npm packages. To use the scoped private npm packages you need to fist login into the npm registry and add the scope config to .npmrc

@myorg:registry=https://registry.myorg.com
//registry.myorg.com/:_authToken=secrettoken

Aliases for blazepack

We create two more alias for blazepack to help you with lesser typing 😇

bpk create my-cra

# or

blaze create my-cra

Help

You can know more about the available commands and their options using the help command

blazepack --help

# get help on individual command

blazepack start --help

Node Interface

Blazepack exposes a Node.js API which can be directly used in Node.js runtime. Blazepack vscode extension is using the same API.

const bpk = require('blazepack');

// start the dev server
bpk.commands.startDevServer({
  directory: process.cwd(),      // directory of your project
  port: 3000,                   // port on which the dev server should start, by default it is 3000
  openInBrowser: true,         // open the project in browser once the dev server starts
  onSuccess: (server) => {},  // success callback with node http server instance when the server is ready
  onError = (err) => {},     // error callback when something goes wrong
});

// create a new project
bpk.commands.createProject({
  projectName: 'my-cra',                         // name of the project
  templateId: bpk.constants.TEMPLATES['react'], // template to use
  startServer: true,                           // start the dev server once the project is created
  portL 3000,                                 // port on which the dev server should start, by default it is 3000
  onSuccess: () => {},                       // success callback when the the project is created
  onError: (err) => {}                      // error callback when something goes wrong
});

// export a project to codesandbox.io
bpk.commands.exportSandbox({
  directory: process.cwd(),       // path to the project that has to be exported
  openInBrowser: true,           // open the sandbox in browser once exported
  onSuccess: (sandboxId) => {}, // success callback with sandboxId when the export was successful
  onError = (err) => {},       // error callback when something goes wrong
})

// detect the template being used in a particular project
try {
  const template = bpk.utils.detectTemplate(process.cwd());

  console.log(`${template} is being used at ${process.cwd()}`);
} catch {
  console.log('Unknown project template');
}

Facing issues?

Run blazepack in verbose mode and share the log by raising an issue

blazepack start --verbose > blazepack.log

Development Setup

Fork this repository to make your own copy

git clone https://github.com/yourusername/blazepack
cd blazepack
npm install
mkdir playground # playground directory is part of .gitignore
cd playground
node ../bin/blazepack.js <command> <name> <template> # Executes our local blazepack project in playground folder

Now we can make use of node relative-path-to-bin/blazepack.js <command> in playground folder to run and execute our local blazepack project

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Ameer Jhan} 💻 📖 🐛 🤔	_{Yash Joshi} 💻 📖 🐛 🤔	_{Philip Murphy} 💻 🐛	_{Sahil Rajput} 📖 🤔	_{dhruw lalan} 💻 🐛	_{Sai Deepesh} 🤔 💻 📖 🐛	_{Khushal Sharma} 🐛
_{Shivam Bhanushali} 🤔 💻