Fable.Template.Elmish.React
0.8.0
dotnet new install Fable.Template.Elmish.React::0.8.0
Fable.Elmish.React Template
This template can be used to generate a simple web app with Fable and Elmish.
You can find more templates by searching Fable.Template
packages in Nuget.
Requirements
Although is not a Fable requirement, on macOS and Linux you'll need Mono for other F# tooling like Paket or editor support.
Installing the template
In a terminal, run dotnet new -i Fable.Template.Elmish.React::*
to install or update the template to latest version.
In some shells you many need quotations:
dotnet new -i "Fable.Template.Elmish.React::*"
. If you use the dotnet core SDK version 2 or higher, you should only need to typedotnet new -i Fable.Template.Elmish.React
.
Creating a new project with the template
In a terminal, run dotnet new fable-elmish-react
to create a project in the current directory. Type dotnet new fable-elmish-react -n awesome
instead to create a subfolder named awesome
and put the new project there.
The project will have the name of the directory. You may get some issues if the directory name contains some special characters like hyphens
Building and running the app
Run dotnet fsi build.fsx --watch
to start the development server. Whenever you modify a file, the server will be updated automatically.
You can then access the app at http://localhost:3000. If the port is already used another port will be chosen automatically (look at your console to know which one).
If you are using VS Code + Ionide, you can also use VSCode task runner. This also has the advantage that Fable-specific errors will be highlighted in the editor along with other F# errors.
- Press
Ctrl+Shift+P
(Cmd+Shift+P on macOS) and typeRun task
to build the project. - Select
Tasks: Run Task
and press Enter. - Select
Start
and press Enter.
Any modification you do to the F# code will be reflected in the web page after saving.
When you want to build you application, run dotnet fsi build.fsx
. You will find the result in the src/dist/
folder.
Project structure
Paket
Paket is the package manager used for F# dependencies. It doesn't need a global installation, the binary is included in the .paket
folder. Other Paket related files are:
- paket.dependencies: contains all the dependencies in the repository.
- paket.references: there should be one such a file next to each
.fsproj
file. - paket.lock: automatically generated, but should committed to source control, see why.
- Nuget.Config: prevents conflicts with Paket in machines with some Nuget configuration.
Paket dependencies will be installed in the
packages
directory. See Paket website for more info.
npm
- package.json: contains the JS dependencies together with other info, like development scripts.
- package-lock.json: is the lock file created by npm5.
JS dependencies will be installed in
node_modules
. See npm website for more info.
Vite
Vite is a bundler, which links different JS sources into a single file making deployment much easier. It also offers other features, like a static dev server that can automatically refresh the browser upon changes in your code or a minifier for production release. Fable interacts with Vite like any JavaScript code.
- vite.config.ts: is the configuration file for Vite. It allows you to set many things: like the path of the bundle, the port for the development server, etc. See Vite website for more info.
build.fsx
build.fsx
is a script which is responsible for controlling the build process. It use Fun.Build.
-
.NETStandard 2.0
- No dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
0.8.0 | 1,036 | 5/17/2023 |
0.7.0 | 159 | 5/17/2023 |
0.6.0 | 1,008 | 9/8/2022 |
0.5.0 | 3,701 | 2/24/2020 |
0.4.0 | 1,697 | 1/28/2019 |
0.3.5 | 2,250 | 2/27/2018 |
0.3.4 | 1,195 | 11/28/2017 |
0.3.3 | 1,422 | 9/29/2017 |
0.3.2 | 1,204 | 9/26/2017 |
0.3.1 | 1,226 | 9/12/2017 |
0.3.0 | 1,165 | 9/12/2017 |
0.2.6 | 1,171 | 7/24/2017 |
0.2.5 | 1,098 | 7/7/2017 |
0.2.4 | 1,027 | 6/30/2017 |
0.2.3 | 1,110 | 6/12/2017 |
0.2.2 | 1,101 | 6/8/2017 |
0.2.1 | 1,057 | 5/17/2017 |
0.2.0 | 984 | 5/16/2017 |
0.1.8 | 1,048 | 4/18/2017 |
0.1.7 | 945 | 4/17/2017 |
0.1.6 | 991 | 4/13/2017 |
0.1.5 | 1,560 | 4/12/2017 |
0.1.4 | 1,003 | 4/11/2017 |
0.1.2 | 989 | 4/5/2017 |
0.1.1 | 938 | 4/5/2017 |
0.1.0 | 959 | 4/5/2017 |