Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ameerthehacker/blazepack

⚡ Blazing fast dev server powered by sandpack
https://github.com/ameerthehacker/blazepack

Last synced: 29 days ago
JSON representation

⚡ Blazing fast dev server powered by sandpack

Host: GitHub
URL: https://github.com/ameerthehacker/blazepack
Owner: ameerthehacker
License: lgpl-3.0
Created: 2021-02-15T20:40:02.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2021-10-20T15:41:48.000Z (about 3 years ago)
Last Synced: 2024-10-30T22:12:19.557Z (about 1 month ago)
Language: JavaScript
Homepage:
Size: 777 KB
Stars: 234
Watchers: 5
Forks: 17
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-list - blazepack
awesome-blazingly-fast - blazepack - ⚡ Blazing fast dev server powered by sandpack (JavaScript)

README

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](https://marketplace.visualstudio.com/items?itemName=ameerthehacker.blazepack-vscode)

## 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](https://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`

```ini
@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.

```javascript
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 # Executes our local blazepack project in playground folder
```

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

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Ameer Jhan}
💻 📖 🐛 🤔

_{Yash Joshi}
💻 📖 🐛 🤔

_{Philip Murphy}
💻 🐛

_{Sahil Rajput}
📖 🤔

_{dhruw lalan}
💻 🐛

_{Sai Deepesh}
🤔 💻 📖 🐛

_{Khushal Sharma}
🐛

_{Shivam Bhanushali}
🤔 💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

Show your support by ⭐ the repo

## License