Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@fastly/compute-js-static-publish
Advanced tools
@fastly/compute-js-static-publish - npm Package Compare versions
Comparing version 6.1.1 to 6.2.0
@@ -165,3 +165,3 @@ // This program builds static resources out of the files in the | ||
| console.error("❌ Fastly API Token not provided."); | ||
| console.error("Specify one on the command line, or use the FASTLY_API_TOKEN environment variable."); | ||
| console.error("Set the FASTLY_API_TOKEN environment variable to an API token that has write access to the KV Store."); | ||
| process.exitCode = 1; | ||
@@ -168,0 +168,0 @@ return; |
@@ -453,2 +453,3 @@ // This program creates a Fastly Compute JavaScript application | ||
| devDependencies: { | ||
| "@fastly/cli": "^10.14.0", | ||
| '@fastly/compute-js-static-publish': computeJsStaticPublisherVersion, | ||
@@ -465,3 +466,4 @@ }, | ||
| scripts: { | ||
| deploy: 'fastly compute deploy', | ||
| start: "fastly compute serve", | ||
| deploy: "fastly compute publish", | ||
| prebuild: 'npx @fastly/compute-js-static-publish --build-static', | ||
@@ -622,3 +624,3 @@ build: 'js-compute-runtime ./src/index.js ./bin/main.wasm' | ||
| console.log(' cd ' + COMPUTE_JS_DIR); | ||
| console.log(' fastly compute serve'); | ||
| console.log(' npm run start'); | ||
| console.log(''); | ||
@@ -628,4 +630,4 @@ console.log('To build and deploy to your Compute service:'); | ||
| console.log(' cd ' + COMPUTE_JS_DIR); | ||
| console.log(' fastly compute publish'); | ||
| console.log(' npm run deploy'); | ||
| console.log(''); | ||
| } |
| { | ||
| "name": "@fastly/compute-js-static-publish", | ||
| "type": "module", | ||
| "version": "6.1.1", | ||
| "version": "6.2.0", | ||
| "description": "Static Publisher for Fastly Compute JavaScript", | ||
@@ -6,0 +6,0 @@ "main": "./build/index.js", |
132
README.md
@@ -13,3 +13,3 @@ # Static Publisher for JavaScript on Fastly Compute | ||
| Assuming the root of your output directory is `./public`, | ||
| Assuming the root directory that contains your static files is `./public`, | ||
@@ -22,24 +22,39 @@ ### 1. Run `compute-js-static-publish` | ||
| This will generate a Compute application at `./compute-js`. It will add a default `./src/index.js` file that instantiates the [`PublisherServer`](#publisherserver) class and runs it to serve the static files from your project. | ||
| This will generate a Compute application at `./compute-js`. It will add a default `./compute-js/src/index.js` file that instantiates the [`PublisherServer`](#publisherserver) class and runs it to serve the static files from your project. | ||
| > This process creates a `./static-publish.rc.js` to hold your configuration. This, as well as the other files created in your new Compute program at `./compute-js`, can be committed to source control (except for the ones we specify in `.gitignore`!) | ||
| > [!TIP] | ||
| > This process creates a `./compute-js/static-publish.rc.js` to hold your configuration. This, as well as the other files created in your new Compute program at `./compute-js`, can be committed to source control (except for the ones we specify in `.gitignore`!) | ||
| Now, each time you build this Compute project, `compute-js-static-publish` will re-scan your `./public` directory and regenerate `/src/statics-metadata.js` and `/src/statics.js`. These files hold references to your project's public files. | ||
| > [!IMPORTANT] | ||
| > This step generates an application that includes your files and a program that serves them, and needs to be run only once. To make modifications to your application, simply make changes to your static files and rebuild it. Read the rest of this section for more details. | ||
| ### 2. Test your application using [Fastly's local development server](https://developer.fastly.com/learning/compute/testing/#running-a-local-testing-server) | ||
| ### 2. Test your application locally | ||
| The `start` script builds and runs your application using [Fastly's local development server](https://developer.fastly.com/learning/compute/testing/#running-a-local-testing-server). | ||
| ```shell | ||
| cd ./compute-js | ||
| npm install | ||
| fastly compute serve | ||
| npm run start | ||
| ``` | ||
| This will serve your application using the default `PublisherServer()`. | ||
| The build process scans your `./public` directory to generate files in the `./compute-js/static-publisher` directory. These files are packaged into your application's Wasm binary. | ||
| However, you can modify `/src/index.js` to add your own processing as you need. This file will not be overwritten after it is created. | ||
| Once your application is running, your files will be served under `http://127.0.0.1:7676/` at the corresponding paths relative to the `./public` directory. For example, making a request to `http://127.0.0.1:7676/foo/bar.html` will attempt to serve the file at `./public/foo/bar.html`. | ||
| ### 3. When you're ready to go live, [deploy your Compute service](https://developer.fastly.com/reference/cli/compute/publish/) | ||
| ### 3. Make changes to your application | ||
| Now, you're free to make changes to your static files. Add, modify, or remove files in the `./public` directory, and then re-build and re-run your application by typing `npm run start` again. | ||
| Each time you re-build the project, `compute-js-static-publish` will re-scan your `./public` directory and regenerate the files in the `./compute-js/static-publisher` directory. | ||
| > [!TIP] | ||
| > You can make further customizations to the behavior of your application, such as specifying directories of your static files, specifying whether to use GZIP compression on your files, specifying custom MIME types of your files, and more. You can also run custom code alongside the default server behavior, or even access the contents of the files directly from custom code. See [Advanced Usages](#advanced-usages) below for details. Rebuilding will not modify the files in your `./compute-js/src` directory, so feel safe making customizations to your code. | ||
| ### 4. When you're ready to go live, deploy your Compute service | ||
| The `deploy` script builds and [publishes your application to a Compute service in your Fastly account](https://developer.fastly.com/reference/cli/compute/publish/). | ||
| ```shell | ||
| fastly compute publish | ||
| npm run deploy | ||
| ``` | ||
@@ -83,3 +98,4 @@ | ||
| > Note: By default, pre-compressed content assets are not generated when the KV Store is not used. | ||
| > [!IMPORTANT] | ||
| > By default, pre-compressed content assets are not generated when the KV Store is not used. | ||
| This is done to prevent the inclusion multiple of copies of each asset from making the Wasm binary too large. | ||
@@ -108,3 +124,3 @@ If you want to pre-compress assets when not using KV Store, add a value for 'contentCompression' to your | ||
| On subsequent builds of your Compute application, `compute-js-static-publish` will run with a special flag, `build-static`, | ||
| reading from stored configuration, then scanning the `--public-dir` directory to recreate `./src/statics.js`. | ||
| reading from stored configuration, then scanning the `--public-dir` directory to recreate `./compute-js/static-publisher/statics.js`. | ||
@@ -115,8 +131,8 @@ Any relative file and directory paths passed at the command line are handled as relative to the current directory. | ||
| | Option | Default | Description | | ||
| |---------------------------|------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `preset` | (None) | Apply default options from a specified preset. See ["Frameworks and Static Site Generators"](#usage-with-frameworks-and-static-site-generators). | | ||
| | `output` | `./compute-js` | The directory in which to create the Compute application. | | ||
| | `static-content-root-dir` | (output directory) + `/static-publisher` | The directory under the Compute application where static asset and metadata are written. | | ||
| | `root-dir` | (None) | **Required**. The root of the directory that contains the files to include in the publishing. All files you wish to include must reside under this root. | | ||
| | Option | Default | Description | | ||
| |-----------------------------|------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `--preset` | (None) | Apply default options from a specified preset. See ["Frameworks and Static Site Generators"](#usage-with-frameworks-and-static-site-generators). | | ||
| | `--output` | `./compute-js` | The directory in which to create the Compute application. | | ||
| | `--static-content-root-dir` | (output directory) + `/static-publisher` | The directory under the Compute application where static asset and metadata are written. | | ||
| | `--root-dir` | (None) | **Required**. The root of the directory that contains the files to include in the publishing. All files you wish to include must reside under this root. | | ||
@@ -127,10 +143,10 @@ ### Server options: | ||
| | Option | Default | Description | | ||
| |------------------|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `public-dir` | <root-dir> | The directory that contains your website's public files. | | ||
| | `static-dir` | (None) | Any directories under `--public-dir` that contain the website's static assets that will be served with a very long TTL. You can specify as many such directories as you wish, by listing multiple items. | | ||
| | `auto-ext` | `.html,.htm` | Specify automatic file extensions. | | ||
| | `auto-index` | `index.html,index.htm` | Specify filenames for automatically serving an index file. | | ||
| | `spa` | (None) | Path to a fallback file for SPA applications. | | ||
| | `not-found-page` | `<public-dir>/404.html` | Path to a fallback file for 404 Not Found. | | ||
| | Option | Default | Description | | ||
| |--------------------|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `--public-dir` | <root-dir> | The directory that contains your website's public files. | | ||
| | `--static-dir` | (None) | Any directories under `--public-dir` that contain the website's static assets that will be served with a very long TTL. You can specify as many such directories as you wish, by listing multiple items. | | ||
| | `--auto-ext` | `.html,.htm` | Specify automatic file extensions. | | ||
| | `--auto-index` | `index.html,index.htm` | Specify filenames for automatically serving an index file. | | ||
| | `--spa` | (None) | Path to a fallback file for SPA applications. | | ||
| | `--not-found-page` | `<public-dir>/404.html` | Path to a fallback file for 404 Not Found. | | ||
@@ -147,9 +163,9 @@ See [PublisherServer](#publisherserver) for more information about these features. | ||
| | Option | Default | Description | | ||
| |-----------------|--------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `name` | `name` from `package.json`, or `compute-js-static-site` | The name of your Compute application. | | ||
| | `description` | `description` from `package.json`, or `Compute static site` | The description of your Compute application. | | ||
| | `author` | `author` from `package.json`, or `you@example.com` | The author of your Compute application. | | ||
| | `service-id` | (None) | The ID of an existing Fastly WASM service for your Compute application. | | ||
| | `kv-store-name` | (None) | The name of an existing [Fastly KV Store](https://developer.fastly.com/learning/concepts/data-stores/#kv-stores) to hold the content assets. In addition to already existing, it must be linked to the service specified by `--service-id`. | | ||
| | Option | Default | Description | | ||
| |-------------------|--------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | `--name` | `name` from `package.json`, or `compute-js-static-site` | The name of your Compute application. | | ||
| | `--description` | `description` from `package.json`, or `Compute static site` | The description of your Compute application. | | ||
| | `--author` | `author` from `package.json`, or `you@example.com` | The author of your Compute application. | | ||
| | `--service-id` | (None) | The ID of an existing Fastly WASM service for your Compute application. | | ||
| | `--kv-store-name` | (None) | The name of an existing [Fastly KV Store](https://developer.fastly.com/learning/concepts/data-stores/#kv-stores) to hold the content assets. In addition to already existing, it must be linked to the service specified by `--service-id`. | | ||
@@ -228,4 +244,4 @@ ## Usage with frameworks and static site generators | ||
| In this case, `fastly.toml` has no value for `service_id` at the time you deploy, so `fastly compute publish` will prompt | ||
| you to create a Fastly service in your account for you (afterwards saving the new service's ID to your `fastly.toml` file). | ||
| In this case, `fastly.toml` has no value for `service_id` at the time you deploy, so the Fastly CLI will prompt | ||
| you to create a Fastly service in your account, after which it will save the new service's ID to your `fastly.toml` file. | ||
@@ -237,3 +253,3 @@ Alternatively, you may deploy to a service that already exists. You can create this service using the | ||
| Before deploying your application, specify the service by setting the `service_id` value in the `fastly.toml` file to the | ||
| ID of the service. The `fastly compute publish` will deploy to the service identified by this value. | ||
| ID of the service. The Fastly CLI will deploy to the service identified by this value. | ||
@@ -243,6 +259,12 @@ To specify the service at the time you are scaffolding the project (for example, if you are running this tool and deploying | ||
| ## Using the KV Store (BETA) <a name="kv-store"></a> | ||
| ## Using the KV Store (BETA) | ||
| <div id="kv-store"></div> | ||
| Starting with v4, it's now possible to upload assets to and serve them from a [Fastly KV Store](https://developer.fastly.com/learning/concepts/data-stores/#kv-stores). | ||
| When this mode is enabled, you build your application as normal, and as a step during the build, your files | ||
| are uploaded to the Fastly KV Store, and metadata in the application is marked to source them from there instead | ||
| of from bytes in the Wasm binary. | ||
| You can enable the use of KV Store with `@fastly/compute-js-static-publish` as you scaffold your application, or | ||
@@ -258,22 +280,30 @@ at any later time. | ||
| or the Fastly [KV Store API](https://developer.fastly.com/reference/api/services/resources/kv-store/#create-store). | ||
| Once the KV Store is created, you must be link it to your Fastly service using the [Resource API](https://developer.fastly.com/reference/api/services/resource/#create-resource). | ||
| Once the KV Store is created, you must link it to your Fastly service using the [Resource API](https://developer.fastly.com/reference/api/services/resource/#create-resource). | ||
| ```shell | ||
| # Create a KV Store | ||
| $ curl -i -X POST "https://api.fastly.com/resources/stores/kv" -H "Fastly-Key: YOUR_FASTLY_TOKEN" -H "Content-Type: application/json" -H "Accept: application/json" -d '{"name":"example-store"}' | ||
| ```shell | ||
| # Create a KV Store | ||
| $ curl -i -X POST "https://api.fastly.com/resources/stores/kv" -H "Fastly-Key: YOUR_FASTLY_TOKEN" -H "Content-Type: application/json" -H "Accept: application/json" -d '{"name":"example-store"}' | ||
| # Link the KV Store to a service | ||
| $ curl -i -X POST "https://api.fastly.com/service/YOUR_FASTLY_SERVICE_ID/version/YOUR_FASTLY_SERVICE_VERSION/resource" -H "Fastly-Key: YOUR_FASTLY_TOKEN" -H "Content-Type: application/x-www-form-urlencoded" -H "Accept: application/json" -d "name=example-store-service-a&resource_id=YOUR_KV_STORE_ID" | ||
| ``` | ||
| # Link the KV Store to a service | ||
| $ curl -i -X POST "https://api.fastly.com/service/YOUR_FASTLY_SERVICE_ID/version/YOUR_FASTLY_SERVICE_VERSION/resource" -H "Fastly-Key: YOUR_FASTLY_TOKEN" -H "Content-Type: application/x-www-form-urlencoded" -H "Accept: application/json" -d "name=example-store-service-a&resource_id=YOUR_KV_STORE_ID" | ||
| ``` | ||
| Once the KV Store is created and linked to your service, add its name to your `static-publish.rc.js` | ||
| file under the `kvStoreName` key. | ||
| Once the KV Store is created and linked to your service, add its name to your `static-publish.rc.js` | ||
| file under the `kvStoreName` key. | ||
| To specify the KV Store at the time you are scaffolding the project (for example, if you are running this tool and | ||
| deploying as part of a CI process), specify the `--service-id` and `--kv-store-name` command line arguments to populate | ||
| the respective files with these values. | ||
| To specify the KV Store at the time you are scaffolding the project (for example, if you are running this tool and | ||
| deploying as part of a CI process), specify the `--service-id` and `--kv-store-name` command line arguments to populate | ||
| the respective files with these values. | ||
| After you have performed the above steps, go ahead and build your application as normal. | ||
| As a new step during the build process, the tool will send these files to the KV Store. | ||
| After you have done the above steps, go ahead and build your application as normal. If you use `fastly compute build --verbose` | ||
| (or run `npm run build` directly), you should see output in your logs saying that files are being sent to the KV Store. | ||
| > [!IMPORTANT] | ||
| > This step writes to your KV Store. When building your application, you must set the environment variable `FASTLY_API_TOKEN` to a Fastly API token that has access to write to this KV Store. | ||
| > | ||
| > Alternatively, if this environment variable is not found, the tool will attempt to detect an API token by calling `fastly profile token`. | ||
| > [!TIP] | ||
| > By running `npx @fastly/cli compute build --verbose` (or `npm run build` directly), you should see output in your logs saying that files are being sent to the KV Store. | ||
| The `statics-metadata.js` file should now show `"type": "kv-store"` for content assets. | ||
@@ -280,0 +310,0 @@ Your Wasm binary should also be smaller, as the content of the files are no longer inlined in the build artifact. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by5.28%
598
Worsened metrics
- Total package byte prevSize
- decreased by-7.63%
212912
- Number of package files
- decreased by-8.82%
155
- Lines of code
- decreased by-9.78%
3569
No dependency changes