Install Packages and Feathers Client
Install required packages, including the (optional) Feathers Dove Client.
Install Packages
You'll need these packages installed to use the Feathers Client, even if you're going to use the typed client from your Feathers v5 Dove API.
Pinia and Feathers-Pinia
Install these packages using your preferred package manager. Until version 2.0, it's recommended that you add a ~
in front of the version number for Feathers-Pinia to only get patch releases.
npm i pinia feathers-pinia@pre
Feathers Packages
If your app will use socket.io, install these packages:
npm i @feathersjs/feathers @feathersjs/authentication-client @feathersjs/socketio-client socket.io-client
If your app will use feathers-rest (no realtime connection), install these packages:
npm i @feathersjs/feathers @feathersjs/authentication-client @feathersjs/rest-client
Install Typed Client
The FeathersJS v5 Dove CLI creates a typed client application for you. Use these steps to install the client from a Dove-based API:
Prepare
Check the package.json
file in your Dove API's codebase to make sure it's ready to bundle. We won't be publishing to npm, but instead will bundle the client into the public
directory of the Feathers app. The most important part is to make sure you have the correct name
and version
configured:
{
"name": "feathers-pinia-api",
"version": "0.0.3",
"scripts": {
"bundle:client": "npm run compile && npm pack --pack-destination ./public"
}
}
Bundle
After preparing the correct information in the package.json
, you're ready to run the bundle script:
npm run bundle:client
After the script runs, you should see a corresponding versioned client .tgz
file in the public
directory. These files are the same format as any npm package. If you're running Node.js version 16+, you can install this package directly into your client application.
feathers-pinia-api/
├─ node_modules/
├─ public/
│ ├─ feathers-pinia-api-0.0.0.tgz
│ ├─ feathers-pinia-api-0.0.1.tgz
│ ├─ feathers-pinia-api-0.0.2.tgz
│ ├─ feathers-pinia-api-0.0.3.tgz
├─ src/
├─ package.json
Install
Follow these instructions to install the bundled client into your application:
Start the API server. The API server must be running in order to serve the file from
public
. The default Feathers API configuration starts the application onhttp://localhost:3030
.Open your client application and run the following command, specifying the correct hostname for your API server and the correct filename to match your API server's
package.json
name.bashnpm i http://localhost:3030/feathers-pinia-api-0.0.3.tgz
Note
Unless you're running the `feathers-pinia-api` example repo, the above command will fail unless you customize the URL for the running host and filename.
To check that the package installed correctly, look at the dependencies
in your package.json
. The package will be named the same as your API's name
attribute in the api repo's package.json
.
{
"dependencies": {
"feathers-pinia-api": "http://localhost:3030/feathers-pinia-api-0.0.3.tgz"
}
}
Ship to Production
You'll use a variation of the above process when shipping to production. Ship your Feathers API, first, including the client .tgz
builds. Then you can update your CI build to install from the production API instead of from localhost:3030
.
File-based Alternative
As an alternative to updating a CI process, you can consider copying the client file into your client repo and installing it from the file you copied into your client application. If you check this file into your client's git repo, you won't have to customize the CI process.
npm i ./clients/feathers-pinia-api-0.0.3.tgz
Update the Client
Sometimes you may run into an issue when trying to update the client package. Even though you've specified the new version number in the package.json
, the old version will be installed. To work around this, sometimes you have to wipe out the node_modules
folder and reinstall packages with the new version number in place.
Important Notes
SSG Compatibility
See the Common Patterns page to see an example of SSG-friendly localStorage.
Errors with Fetch Setup
If you're upgrading from Feathers v4 Crow and you receive an error like this one:
"Error: Failed to execute 'fetch' on 'Window': Illegal invocation"
You can fix this by binding window
to fetch
, as is also shown in the above examples.
window.fetch.bind(window)