From 566795844180f99a9a9929535d6d54a614615c01 Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 12:51:03 +0000 Subject: [PATCH 1/5] partially revert 3a984f27e51a00339b8e7b6001fdd4204c590d5d --- .../client-server/fable-remoting.md | 2 +- .../javascript/third-party-react-package.md | 2 +- .../add-npm-package-to-client.md | 18 ++++++++ .../add-nuget-package-to-client.md | 11 +++++ docs/v4-recipes/ui/add-bulma.md | 4 +- docs/v4-recipes/ui/add-fontawesome.md | 2 +- docs/v4-recipes/ui/add-style.md | 45 +++++++++++++++++++ docs/v4-recipes/ui/add-tailwind.md | 2 +- docs/v4-recipes/ui/cdn-to-npm.md | 4 +- 9 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 docs/v4-recipes/package-management/add-npm-package-to-client.md create mode 100644 docs/v4-recipes/package-management/add-nuget-package-to-client.md create mode 100644 docs/v4-recipes/ui/add-style.md diff --git a/docs/v4-recipes/client-server/fable-remoting.md b/docs/v4-recipes/client-server/fable-remoting.md index eb104338..360d2df7 100644 --- a/docs/v4-recipes/client-server/fable-remoting.md +++ b/docs/v4-recipes/client-server/fable-remoting.md @@ -7,7 +7,7 @@ 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). +> and [How Do I Add a NuGet Package to the Client](../../v4-recipes/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..8e30de5a 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 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/add-style.md b/docs/v4-recipes/ui/add-style.md new file mode 100644 index 00000000..6a84ea21 --- /dev/null +++ b/docs/v4-recipes/ui/add-style.md @@ -0,0 +1,45 @@ +# How Do I Use stylesheets with SAFE? +If you wish to use your own CSS or SASS stylesheets with SAFE apps, you can embed either through webpack. The template already includes all required NPM packages you may need, so you will only need to configure webpack to reference your stylesheet and include in the outputs. + +## Adding the Stylesheet +First, create a CSS file in the `src/Client` folder of your solution e.g `style.css`. + +> The same approach can be taken for `.scss` files. + +## Configuring WebPack + +### I'm using the Standard Template +#### 1. Link to the stylesheet + +Inside the `webpack.config.js` file, add the following variable to the `CONFIG` object, which points to the style file you created previously. +```javascript +cssEntry: './src/Client/style.css', +``` + +#### 2. Embed CSS into outputs + Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following: +```javascript +entry: isProduction ? { + app: [resolve(CONFIG.fsharpEntry), resolve(CONFIG.cssEntry)] +} : { + app: resolve(CONFIG.fsharpEntry), + style: resolve(CONFIG.cssEntry) +}, +``` + +This combines the css and F# outputs into a single bundle for production, and separately for dev. + +### I'm using the Minimal Template +#### 1. Embed CSS into outputs +Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following: +```javascript +entry: { + app: [ + resolve('./src/Client/Client.fsproj'), + resolve('./src/Client/style.css') + ] +}, +``` + +## There you have it! +You can now style your app by writing to the `style.css` file. \ No newline at end of file diff --git a/docs/v4-recipes/ui/add-tailwind.md b/docs/v4-recipes/ui/add-tailwind.md index 255a614b..a66ba9fa 100644 --- a/docs/v4-recipes/ui/add-tailwind.md +++ b/docs/v4-recipes/ui/add-tailwind.md @@ -2,7 +2,7 @@ [Tailwind](https://tailwindcss.com/) is a utility-first CSS framework packed that can be composed to build any design, directly in your markup. -1. [Add a stylesheet](../../recipes/ui/add-style.md) to the project +1. [Add a stylesheet](add-style.md) to the project 2. Install the required npm packages ```shell diff --git a/docs/v4-recipes/ui/cdn-to-npm.md b/docs/v4-recipes/ui/cdn-to-npm.md index 5b5ac7fc..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: @@ -27,7 +27,7 @@ importAll "bulma/bulma.sass" > You can use this approach for any NPM package. ##### b. Using Sass -1. Add a Sass stylesheet to your project using [this recipe](../../recipes/ui/add-style.md). +1. Add a Sass stylesheet to your project using [this recipe](add-style.md). 2. Add the following line to your Sass file to bring in Bulma ```sass @import "~bulma/bulma.sass" From cd91709543f7a880eaf599f6bd88b80a60e2db79 Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 13:23:22 +0000 Subject: [PATCH 2/5] Fix file that was actually wrong to begin with --- docs/v4-recipes/ui/add-bulma.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/v4-recipes/ui/add-bulma.md b/docs/v4-recipes/ui/add-bulma.md index 8e30de5a..e38ef3be 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](./../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 @@ -27,4 +27,4 @@ open Fulma Button.button [] [ str "Click me!" ] -``` +``` \ No newline at end of file From e347de05b3df78024bcb280f2850f3dc6cbf618e Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 16:35:18 +0000 Subject: [PATCH 3/5] add recipes back in mkdocs.yml --- mkdocs.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/mkdocs.yml b/mkdocs.yml index 606dbb73..ee054e3f 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -146,6 +146,7 @@ nav: - Create a data module using SQLProvider SQL Server SSDT: "v4-recipes/storage/use-sqlprovider-ssdt.md" - UI: - Add FontAwesome support: "v4-recipes/ui/add-fontawesome.md" + - Add Stylesheet support: "v4-recipes/ui/add-style.md" - Add Bulma support: "v4-recipes/ui/add-bulma.md" - Use different Bulma Themes: "v4-recipes/ui/use-different-bulma-themes.md" - Remove Bulma: "v4-recipes/ui/remove-bulma.md" @@ -159,7 +160,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 From ee70d84cc280b8c752260290eacdf19d4ba932fa Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 16:43:07 +0000 Subject: [PATCH 4/5] Remove double add stylesheet v4 recipe --- mkdocs.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/mkdocs.yml b/mkdocs.yml index 09a61d64..c12a1d86 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -150,7 +150,6 @@ nav: - UI: - Add Stylesheet support: "v-4/recipes/ui/add-style.md" - Add FontAwesome support: "v4-recipes/ui/add-fontawesome.md" - - Add Stylesheet support: "v4-recipes/ui/add-style.md" - Add Bulma support: "v4-recipes/ui/add-bulma.md" - Use different Bulma Themes: "v4-recipes/ui/use-different-bulma-themes.md" - Remove Bulma: "v4-recipes/ui/remove-bulma.md" From cd862f5a0ba2856c3144929c0f2cd49640daf583 Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 16:59:36 +0000 Subject: [PATCH 5/5] fix weird relative links that .. too far --- docs/v4-recipes/client-server/fable-remoting.md | 4 ++-- docs/v4-recipes/ui/add-bulma.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/v4-recipes/client-server/fable-remoting.md b/docs/v4-recipes/client-server/fable-remoting.md index 360d2df7..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](../../v4-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/ui/add-bulma.md b/docs/v4-recipes/ui/add-bulma.md index e38ef3be..2267c863 100644 --- a/docs/v4-recipes/ui/add-bulma.md +++ b/docs/v4-recipes/ui/add-bulma.md @@ -19,7 +19,7 @@ Bulma.button.button [ ``` ### Using Fulma -1. [Add the Fulma NuGet package to the solution](./../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