This repository is not meant as some kind of replacement of the original SAFE Stack! It is just a simple example and reference point for me on how to use SAFE stack with an alternative javascript bundler. It is not meant for production purposes and there is no support provided for it.
I want to thank and give credit to all the creators of the original SAFE Template.
And now to the more interesting stuff :)
The migration to use Parcel instead of Webpack was quite straight forward and can be seen as a diff between the two first commits in this repository.
git diff 01599fd 2fc1be9
There were few "problems"
- I didn't find out how to use index.html the way it is used in the original SAFE stack so I had to make it as an entry point for Parcel. That means there is a
<scrip>
element added to it with reference to theApp.fs.js
file. - Images like favicon.png has to be loaded using the
require
function and I've created a helper functionClient.HtmlHelpers.importImage
that takes a path to the file. - I had to create one config file
.proxyrc.js
for the configuration of the dev proxy server with redirect to the backend service and also to reset some CORS settings because Parcel in its default configuration didn't allow usage of custombackground-image
s from a third party service as unsplash.it - I did not try to make client unit tests work and because of that I deleted that part from the build. This is just because of the lack of time and interest.
All these issues are probably solvable some other way using some plugins or something but for me this solution is now good enough.
This template can be used to generate a full-stack web application using the SAFE Stack. It was created using the dotnet SAFE Template. If you want to learn more about the template why not start with the quick start guide?
You'll need to install the following pre-requisites in order to build SAFE applications
- .NET Core SDK 5.0 or higher
- Node LTS
Before you run the project for the first time only you must install dotnet "local tools" with this command:
dotnet tool restore
To concurrently run the server and the client components in watch mode use the following command:
dotnet run
Then open http://localhost:8080
in your browser.
The build project in root directory contains a couple of different build targets. You can specify them after --
(target name is case-insensitive).
To run concurrently server and client tests in watch mode (you can run this command in parallel to the previous one in new terminal):
dotnet run -- RunTests
Client tests are available under http://localhost:8081
in your browser and server tests are running in watch mode in console.
Finally, there are Bundle
and Azure
targets that you can use to package your app and deploy to Azure, respectively:
dotnet run -- Bundle
dotnet run -- Azure
If you want to know more about the full Azure Stack and all of it's components (including Azure) visit the official SAFE documentation.
You will find more documentation about the used F# components at the following places: