Merge pull request #337 from Larocceau/restore-incorrect-changes-from-main

Fix incorrectly changed v4 recipes

Author: martinbryant

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`:

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
 

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"
+}
+``` 
+

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.

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,12 +19,12 @@ 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
 
 Button.button [] [
    str "Click me!"
 ]
-```
+```

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:

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:

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"