|
1 | 1 | # A full-stack F# SPA template with charts and forms
|
2 | 2 |
|
| 3 | +<a href="doc/Tables.png"> |
| 4 | + <img src="doc/Tables.png" width="300"/> |
| 5 | +</a> |
| 6 | +<a href="doc/Charting.png"> |
| 7 | + <img src="doc/Charting.png" width="300"/> |
| 8 | +</a> |
| 9 | +<a href="doc/Forms.png"> |
| 10 | + <img src="doc/Forms.png" width="300"/> |
| 11 | +</a> |
| 12 | + |
3 | 13 | ## Requirements
|
4 | 14 |
|
5 | 15 | * .NET SDK 6.0 or above
|
|
9 | 19 |
|
10 | 20 | ### Server
|
11 | 21 |
|
12 |
| -* WebSharper microservice |
13 |
| -* WebSharper record-based remoting |
| 22 | +* WebSharper sitelets for RPC |
14 | 23 |
|
15 | 24 | ### Client
|
16 | 25 |
|
17 |
| -* WebSharper for F# to JavaScript translation |
| 26 | +* [WebSharper](https://websharper.com) for F# to JavaScript translation |
| 27 | +* WebSharper remoting |
| 28 | +* [WebSharper.Charting](https://github.com/dotnet-websharper/charting) with a ChartJs-based renderer |
| 29 | +* [WebSharper.Forms](https://github.com/dotnet-websharper/forms) for reactive forms |
| 30 | +* [Femto](https://github.com/Zaid-Ajaj/Femto) for managing npm dependencies |
| 31 | +* [Vite](https://vitejs.dev/) for development server and bundling |
18 | 32 | * HTML template: [Windmill](https://github.com/estevanmaito/windmill-dashboard) - by [@estevanmaito](https://github.com/estevanmaito)
|
19 |
| -* WebSharper.Charting with ChartJs |
20 |
| -* WebSharper.Forms for reactive forms |
| 33 | + * [Tailwind CSS](https://tailwindcss.com/) |
| 34 | + * [Alpine JS](https://alpinejs.dev/) |
| 35 | + |
| 36 | +## Running it |
| 37 | + |
| 38 | +You can run the full app in watch mode using |
| 39 | + |
| 40 | +``` |
| 41 | +dotnet run |
| 42 | +``` |
| 43 | + |
| 44 | +This starts `vite` on port `5173` and the server on port `5001`, listens to file changes in the entire solution and recompiles changes on the fly (TEMP: this is not entirely true as of yet: if you make changes in the `shared` project, you need to stop and re-run `dotnet run` from the root). |
| 45 | + |
| 46 | +To view the app, navigate to |
| 47 | + |
| 48 | +``` |
| 49 | +https://localhost:5173 |
| 50 | +``` |
| 51 | + |
| 52 | +Alternatively, you can start the server and client separately: |
| 53 | + |
| 54 | +``` |
| 55 | +// Terminal #1 |
| 56 | +> cd src/server |
| 57 | +> dotnet run |
| 58 | +
|
| 59 | +// Terminal #2 |
| 60 | +> cd src/client |
| 61 | +> dotnet ws build // or "dotnet build" |
| 62 | +> dotnet serve |
| 63 | +``` |
| 64 | + |
| 65 | +## Release mode (not yet fully working) |
| 66 | + |
| 67 | +To build the solution in release mode, you can use: |
| 68 | + |
| 69 | +``` |
| 70 | +> cd src/client |
| 71 | +> npx vite build |
| 72 | +``` |
| 73 | + |
| 74 | +This will build the client bundle into the top-level `dist` folder. You will need to manually copy over the `assets` folder from `src/client/assets`. |
| 75 | + |
| 76 | +TODO: Document how to configure the server. |
0 commit comments