diff --git a/Sources/JavaScriptKit/Documentation.docc/Articles/Deploying-Pages.md b/Sources/JavaScriptKit/Documentation.docc/Articles/Deploying-Pages.md new file mode 100644 index 000000000..96789f206 --- /dev/null +++ b/Sources/JavaScriptKit/Documentation.docc/Articles/Deploying-Pages.md @@ -0,0 +1,97 @@ +# Deploying Pages + +Deploy your applications built with JavaScriptKit to the web. + +## Overview + +Once you've built your application with JavaScriptKit, you'll need to deploy it to make it accessible on the web. This guide covers the deployment process, including building your application and deploying it to various hosting platforms. + +## Building Your Application with Vite + +Build your application using [Vite](https://vite.dev/) build tool: + +```bash +# Build the Swift package for WebAssembly +$ swift package --swift-sdk wasm32-unknown-wasi js -c release + +# Create a minimal HTML file (if you don't have one) +$ cat < index.html + + + + + + +EOS + +# Install Vite and add the WebAssembly output as a dependency +$ npm install -D vite .build/plugins/PackageToJS/outputs/Package + +# Build optimized assets +$ npx vite build +``` + +This will generate optimized static assets in the `dist` directory, ready for deployment. + +## Deployment Options + +### GitHub Pages + +1. Set up your repository for GitHub Pages in your repository settings and select "GitHub Actions" as source. +2. Create a GitHub Actions workflow to build and deploy your application: + +```yaml +name: Deploy to GitHub Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: [main] + +# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + container: swift:6.0.3 + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + - uses: actions/configure-pages@v4 + id: pages + # Install Swift SDK for WebAssembly + - uses: swiftwasm/setup-swiftwasm@v2 + - name: Build + run: | + swift package --swift-sdk wasm32-unknown-wasi js -c release + npm install + npx vite build --base "${{ steps.pages.outputs.base_path }}" + - uses: actions/upload-pages-artifact@v3 + with: + path: './dist' + - uses: actions/deploy-pages@v4 + id: deployment +``` + +## Cross-Origin Isolation Requirements + +When using `wasm32-unknown-wasip1-threads` target, you must enable [Cross-Origin Isolation](https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated) by setting the following HTTP headers: + +``` +Cross-Origin-Embedder-Policy: require-corp +Cross-Origin-Opener-Policy: same-origin +``` + +These headers are required for SharedArrayBuffer support, which is used by the threading implementation. diff --git a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Hello-World.tutorial b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Hello-World.tutorial index f5ede8f19..c054e3a48 100644 --- a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Hello-World.tutorial +++ b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Hello-World.tutorial @@ -84,7 +84,7 @@ @Step { Start a local web server to serve your application: This starts a simple HTTP server that serves files from your current directory. - + > Note: If you are building your app with `wasm32-unknown-wasip1-threads` target, you need to enable [Cross-Origin Isolation](https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated) for `SharedArrayBuffer`. See "Cross-Origin Isolation Requirements" in @Code(name: "Console", file: "hello-world-3-2-server.txt") } diff --git a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-2-server.txt b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-2-server.txt index 569396481..ad560a635 100644 --- a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-2-server.txt +++ b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-2-server.txt @@ -4,5 +4,4 @@ Build of product 'Hello' complete! (5.16s) Packaging... ... Packaging finished -$ python3 -m http.server -Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... +$ npx serve diff --git a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-3-open.txt b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-3-open.txt index f4df8ec2f..8abe30b7c 100644 --- a/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-3-open.txt +++ b/Sources/JavaScriptKit/Documentation.docc/Tutorials/Hello-World/Resources/hello-world-3-3-open.txt @@ -4,6 +4,5 @@ Build of product 'Hello' complete! (5.16s) Packaging... ... Packaging finished -$ python3 -m http.server -Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... -$ open http://localhost:8000 +$ npx serve +$ open http://localhost:3000