Navigation Bar With Feliz

This example application demonstrates how to build a modern navigation bar in Feliz without any React or CSS frameworks. Instead, we are using the type-safe styling API in Feliz. The implementation is based on Animated Responsive Navbar with CSS - Plus Other Useful Tricks which uses CSS-only to build a similar navigation bar.

Requirements

• dotnet SDK 2.0.0 or higher
• node.js 10.0.0 or higher

Editor

To write and edit your code, you can use either VS Code + Ionide, Emacs with fsharp-mode, Rider or Visual Studio.

Development

Before doing anything, start with installing npm dependencies using npm install.

Then to start development mode with hot module reloading, run:

npm start

This will start the development server after compiling the project, once it is finished, navigate to http://localhost:8080 to view the application .

To build the application and make ready for production:

npm run build

This command builds the application and puts the generated files into the deploy directory (can be overwritten in webpack.config.js).

Tests

The template includes a test project that ready to go which you can either run in the browser in watch mode or run in the console using node.js and mocha. To run the tests in watch mode:

npm run test:live

This command starts a development server for the test application and makes it available at http://localhost:8085.

To run the tests using the command line and of course in your CI server, you have to use the mocha test runner which doesn't use the browser but instead runs the code using node.js:

npm test