diff --git a/docs/v4-recipes/client-server/fable-remoting.md b/docs/v4-recipes/client-server/fable-remoting.md index eb104338..688438a3 100644 --- a/docs/v4-recipes/client-server/fable-remoting.md +++ b/docs/v4-recipes/client-server/fable-remoting.md @@ -6,8 +6,8 @@ #### 1. Install NuGet Packages Add [Fable.Remoting.Giraffe](https://www.nuget.org/packages/Fable.Remoting.Giraffe/) to the Server and [Fable.Remoting.Client](https://www.nuget.org/packages/Fable.Remoting.Client/) to the Client. -> See [How Do I Add a NuGet Package to the Server](../../v4-recipes/package-management/add-nuget-package-to-server.md) -> and [How Do I Add a NuGet Package to the Client](../../recipes/package-management/add-nuget-package-to-client.md). +> See [How Do I Add a NuGet Package to the Server](../package-management/add-nuget-package-to-server.md) +> and [How Do I Add a NuGet Package to the Client](../package-management/add-nuget-package-to-client.md). #### 2. Create the API protocol You now need to create the protocol, or contract, of the API we’ll be creating. Insert the following below the `Route` module in `Shared.fs`: diff --git a/docs/v4-recipes/javascript/third-party-react-package.md b/docs/v4-recipes/javascript/third-party-react-package.md index c8510334..cfbb2d90 100644 --- a/docs/v4-recipes/javascript/third-party-react-package.md +++ b/docs/v4-recipes/javascript/third-party-react-package.md @@ -1,7 +1,7 @@ To use a third-party React library in a SAFE application, you need to write an F# wrapper around it. There are two ways for doing this - using [Fable.React](https://www.nuget.org/packages/Fable.React/) or using [Feliz](https://zaid-ajaj.github.io/Feliz/). ## Prerequisites -This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../../recipes/package-management/add-npm-package-to-client.md) before continuing. +This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../package-management/add-npm-package-to-client.md) before continuing. ## Fable.React - Setup diff --git a/docs/v4-recipes/package-management/add-npm-package-to-client.md b/docs/v4-recipes/package-management/add-npm-package-to-client.md new file mode 100644 index 00000000..27647c50 --- /dev/null +++ b/docs/v4-recipes/package-management/add-npm-package-to-client.md @@ -0,0 +1,18 @@ +# How do I add an NPM package to the Client? + +When you want to call a JavaScript library from your Client, it is easy to import and reference it using [NPM](https://docs.npmjs.com/cli/npm). + +Run the following command: +```bash +npm install name-of-package +``` + +This will download the package into the solution's **node_modules** folder. + +You will also see a reference to the package in the Client's **package.json** file: +```json +"dependencies": { + "name-of-package": "^1.0.0" +} +``` + diff --git a/docs/v4-recipes/package-management/add-nuget-package-to-client.md b/docs/v4-recipes/package-management/add-nuget-package-to-client.md new file mode 100644 index 00000000..bde37044 --- /dev/null +++ b/docs/v4-recipes/package-management/add-nuget-package-to-client.md @@ -0,0 +1,11 @@ +# How do I add a NuGet package to the Client? +Adding packages to the Client project is a very [similar process to the Server](add-nuget-package-to-server.md), with a few key differences: + +- Any references to the `Server` directory should be `Client` + +- Client code written in F# is converted into JavaScript using [Fable](https://fable.io/docs/index.html). Because of this, we must be careful to only reference libraries which are [Fable compatible](https://fable.io/docs/your-fable-project/use-a-fable-library.html). + +- If the NuGet package uses any JS libraries you must install them. + For simplicity, [use Femto to sync](./sync-nuget-and-npm-packages.md) - if the NuGet package is compatible - or [install via NPM](./add-npm-package-to-client.md) manually, if not. + +There are [lots of great libraries](../../awesome-safe-components.md) available to choose from. \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-bulma.md b/docs/v4-recipes/ui/add-bulma.md index fd5b1375..2267c863 100644 --- a/docs/v4-recipes/ui/add-bulma.md +++ b/docs/v4-recipes/ui/add-bulma.md @@ -8,7 +8,7 @@ By adding either of these to your SAFE project alongside the [Bulma stylesheet or the Bulma NPM package](https://bulma.io/documentation/overview/start/), you can take full advantage of Bulma. ### Using Feliz.Bulma -1. [Add the Feliz.Bulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md). +1. [Add the Feliz.Bulma NuGet package to the solution](../package-management/add-nuget-package-to-client.md). 1. Start using Feliz.Bulma components in your F# files. ```fsharp open Feliz.Bulma @@ -19,7 +19,7 @@ Bulma.button.button [ ``` ### Using Fulma -1. [Add the Fulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md). +1. [Add the Fulma NuGet package to the solution](../package-management/add-nuget-package-to-client.md). 1. Start using Fulma components in your F# files. ```fsharp open Fulma @@ -27,4 +27,4 @@ open Fulma Button.button [] [ str "Click me!" ] -``` +``` \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-fontawesome.md b/docs/v4-recipes/ui/add-fontawesome.md index d4e0b6ef..0fc784d2 100644 --- a/docs/v4-recipes/ui/add-fontawesome.md +++ b/docs/v4-recipes/ui/add-fontawesome.md @@ -13,7 +13,7 @@ If you’re using the minimal template, there are a couple of things to do befor #### 1. The NuGet Package Add [Fable.FontAwesome.Free NuGet Package](https://www.nuget.org/packages/Fable.FontAwesome.Free/) to the Client project. -> See [How do I add a NuGet package to the Client?](../../recipes/package-management/add-nuget-package-to-client.md). +> See [How do I add a NuGet package to the Client?](../package-management/add-nuget-package-to-client.md). #### 2. The CDN Link Open the `index.html` file and add the following line to the `head` element: diff --git a/docs/v4-recipes/ui/cdn-to-npm.md b/docs/v4-recipes/ui/cdn-to-npm.md index d472560d..2246b201 100644 --- a/docs/v4-recipes/ui/cdn-to-npm.md +++ b/docs/v4-recipes/ui/cdn-to-npm.md @@ -11,7 +11,7 @@ Find the following line in `src/Client/index.html` and delete it before moving o #### 2. Add the NPM Package Go ahead and add the [Bulma NPM package](https://www.npmjs.com/package/bulma) to your project. -> See: [How do I add an NPM package to the client?](../../recipes/package-management/add-npm-package-to-client.md) +> See: [How do I add an NPM package to the client?](../package-management/add-npm-package-to-client.md) #### 3. Load the Stylesheets There are two ways for loading the stylesheets: diff --git a/mkdocs.yml b/mkdocs.yml index d6d6774b..c12a1d86 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -163,7 +163,9 @@ nav: - Import a JavaScript module: "v4-recipes/javascript/import-js-module.md" - Add Support for a Third Party React Library: "v4-recipes/javascript/third-party-react-package.md" - Package Management: + - Add an NPM package to the Client: "v4-recipes/package-management/add-npm-package-to-client.md" - Add a NuGet package to the Server: "v4-recipes/package-management/add-nuget-package-to-server.md" + - Add a NuGet package to the Client: "v4-recipes/package-management/add-nuget-package-to-client.md" - Migrate to Paket from NuGet: "v4-recipes/package-management/migrate-to-paket.md" - Migrate to NuGet from Paket: "v4-recipes/package-management/migrate-to-nuget.md" - Sync NuGet and NPM Packages: "v4-recipes/package-management/sync-nuget-and-npm-packages.md" \ No newline at end of file