BrowserFileDownloadTester

Installation

• Requires node 22
• To save time, I recommend globally aliasing the nx command to npx nx or global installed npm i -g nx.

Features

1. Determine if a browser download of an asset works on your platform. Meant for native mobile, desktop, server download testing.
2. Determine if a browser asset can render if given base64 or a blob file.

Covers the following cases

• Assets can be downloaded via previews
• Base64 assets
• Blob assets (from local browser that need to be downloaded on the client)
• anchor tags with download attribute and a url asset

UI

The WebUI allows the user to click a specific file type. Currently only .png and .webp have actual assets that will load actual data.

Other file types can be generated via the command npm run generate-assets which will add more assets, all at 1 MegaByte in size.

This can be configured if you want within the make-files.sh script example if you want to test downloading a 500MB files. You could swap the file size to FILE_SIZE="500mb" which would make files take a long time to download and likely would not work well with base64 from the server since it sends the entire string.

Example UI

The second image shows a preview of the downloaded file. This could be any file you place within assets if you need to test a specific file.

Quick Start

Quick start to launch all projects both web and server.

You will need to enable corepack corepack use [email protected]

yarn
yarn run generate-assets
nx run-many -t serve

• Web: http://localhost:4200
• Server http://localhost:3333

For android make sure to rebind ports.

adb reverse tcp:4200 tcp:4200
adb reverse tcp:3333 tcp:3333

Extensive rebind script for android (for multi-device runs too) see modular-platform-config

Run tasks

To run tasks with Nx use:

npx nx <target> <project-name>

For example:

npx nx build file-api

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the docs »

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

To install a new plugin you can use the nx add command. Here's an example of adding the React plugin:

npx nx add @nx/react

Use the plugin's generator to create new projects. For example, to create a new React app or library:

# Genenerate an app
npx nx g @nx/react:app demo

# Generate a library
npx nx g @nx/react:lib some-lib

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Learn more about Nx on CI

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Useful links

Learn more:

• Learn more about this workspace setup
• Learn about Nx on CI
• Releasing Packages with Nx release
• What are Nx plugins?

And join the Nx community:

• Discord
• Follow us on X or LinkedIn
• Our Youtube channel
• Our blog

Attributions

• roadsign image by Gerd Altmann from Pixabay