unbuild icon indicating copy to clipboard operation
unbuild copied to clipboard

add a build preset for web containers

Open cpreston321 opened this issue 2 years ago • 4 comments

Describe the feature

This preset would target a folder that would create a json file of all the contents of each file within a JSON file to easily start a web container with it. I'm not for sure if this is the right spot for it but it would be cool to see that you can just change the preset and it will build a web-container file that you can ingest using the API: https://webcontainers.io/

Structure like so (Pulled straight from docs example:)

Start up index script:

import { WebContainer, FileSystemTree } from '@webcontainer/api';
import { projectFiles } from './project-files.ts';

async function main() {
  // First we boot a WebContainer
  const webcontainer = await WebContainer.boot();
  
  // After booting the container we copy all of our project files
  // into the container's file system
  await webcontainer.mount(projectFiles);
    
  // Once the files have been mounted, we install the project's
  // dependencies by spawning `npm install`
  const install = await webcontainer.spawn('npm', ['i']);
  
  await install.exit;
    
  // Once all dependencies have been installed, we can spawn `npm`
  // to run the `dev` script from the project's `package.json`
  await webcontainer.spawn('npm', ['run', 'dev']);
}

Content JSON structure.

export const projectFiles = {
  myProject: {
    directory: {
      'package.json': {
        file: {
          contents: '...',
        }
      },
      'index.js': {
        file: {
          contents: '...',
        }
      },
    }
  }
};

Maybe it's a separate package. I am just thinking out loud. Maybe we can just discuss it but it only sounds right since unbuild is a unified builder.

Additional information

  • [ ] Would you be willing to help implement this feature?

cpreston321 avatar Mar 28 '23 14:03 cpreston321