dzoukr / safer.template Goto Github PK

View Code? Open in Web Editor NEW

101.0 101.0 14.0 624 KB

Strongly opinionated modification of amazing SAFE Stack Template for full-stack development in F#.

License: MIT License

F# 93.47% HTML 2.23% JavaScript 3.90% CSS 0.40%

safer.template's People

Contributors

Stargazers

Watchers

Forkers

zaid-ajaj houstonhaynes richardjharding landy kstastny stjordanis bklop akoslukacs delneg chengh42 xanthus jasiozet francisco-montanez lukaszkrzywizna

safer.template's Issues

Vite is reloading but not refreshing the browser

I am currently ran into that problem that I run "yarn run start". The page is coming up and after I change something in the code and vite is supposed to refresh the browser page nothing happens.

my vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

/** @type {import('vite').UserConfig} */
export default defineConfig({
    plugins: [react()],
    root: "./src/client",
    server: {
        port: 8080,
        proxy: {
            '/api': 'http://localhost:5011',
        }
    },
    build: {
        outDir: "public"
    }
})

package.json

"devDependencies": {
        "@vitejs/plugin-react": "^4.0.0",
        "autoprefixer": "^10.4.13",
        "postcss": "^8.4.20",
        "vite": "^4.3.9"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "use-sync-external-store": "^1.2.0",
        "tailwindcss": "^3.3.2",
        "daisyui": "^3.1.5",
        "fontawesome": "^5.6.3"
    }

first time start

after a change in the page

page reload seems to happen but the browser is not reflecting that change.

Am I using unsupported versions?

Add JSX support

With Fable 4 we can mix plain React components with JSX component.
In order to use jsx we need to add Fable option -e .jsx --run vite.
However when I add this option the fable app loses to load App.js at all.
Maybe I'm missing something but it would be awesome if you can add JSX working support .
In the template it could be plain jsx mixed with other divs like:

React.fragment [

    toReact <| JSX.jsx $"""<div>Ooo Macarena!</div>"""
    Html.div state.Message

.....

Debug Client without the server

I am running a separate backend and have the need to only run and debug the client. How would be the settings for VS Code or JB Rider?

What are the steps needed to deploy to Azure static web apps and function apps?

For --serverless, I did run the github flow successfully, where it builds the artifacts at /publish/app-fe and /publish/app.
I don't really know what to do from there.
How do I deploy the SAFEr template app to Azure?

The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement'

Thanks for making this template available Roman! It looks really interesting, and the changes you've made appeal to some of my inclinations 🙂 Unfortunately, I seem to be having an issue with 3.0.0-pre-005 😐️

The template runs fine via dotnet run, but there is a compilation error that breaks intellisense in Rider, resulting in a less-than-ideal development experience.

This is from an unmodified SAFEr template. The sln build fails with the same error:

matt@matt-framework:~/dev$ dotnet new SAFEr -o SAFEr                                                                   
The template "SAFEr Web App v3.0.0-pre-005" was created successfully.

matt@matt-framework:~/dev$ cd SAFEr/
matt@matt-framework:~/dev/SAFEr$ dotnet tool restore
Tool 'paket' (version '7.1.5') was restored. Available commands: paket
Tool 'femto' (version '0.12.0') was restored. Available commands: femto
Tool 'fable' (version '4.0.0-theta-018') was restored. Available commands: fable

Restore was successful.
matt@matt-framework:~/dev/SAFEr$ dotnet build SAFEr.sln 
MSBuild version 17.4.1+9a89d02ff for .NET
  Determining projects to restore...
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  Starting full restore process.
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Total time taken: 0 milliseconds
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  The last restore was successful. Nothing left to do.
  Restoring /home/matt/dev/SAFEr/Build.fsproj
  Total time taken: 0 milliseconds
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj
  The last restore was successful. Nothing left to do.
  Total time taken: 0 milliseconds
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  Restored /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj (in 141 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj (in 141 ms).
  Restored /home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj (in 141 ms).
  Paket version 7.1.5+e2fe7c693356a5e70a74cc01501f7dc5f8996695
  Restoring /home/matt/dev/SAFEr/src/SAFEr.Shared/SAFEr.Shared.fsproj
  Starting restore process.
  Total time taken: 0 milliseconds
  SAFEr.Shared -> /home/matt/dev/SAFEr/src/SAFEr.Shared/bin/Debug/net7.0/SAFEr.Shared.dll
/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
FSC : error FS0193: The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement' [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
  SAFEr.Server -> /home/matt/dev/SAFEr/src/SAFEr.Server/bin/Debug/net7.0/SAFEr.Server.dll

Build FAILED.

/home/matt/dev/SAFEr/src/SAFEr.Server/Startup.fs(11,9): warning FS0044: This construct is deprecated. InstrumentationKey based global ingestion is being deprecated. Use the AddApplicationInsightsTelemetry() overload which accepts Action<ApplicationInsightsServiceOptions> and set ApplicationInsightsServiceOptions.ConnectionString. See https://github.com/microsoft/ApplicationInsights-dotnet/issues/2560 for more details. [/home/matt/dev/SAFEr/src/SAFEr.Server/SAFEr.Server.fsproj]
FSC : error FS0193: The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement' [/home/matt/dev/SAFEr/src/SAFEr.Client/SAFEr.Client.fsproj]
    1 Warning(s)
    1 Error(s)

Time Elapsed 00:00:06.29

Seems to relate to Zaid-Ajaj/Feliz#520. I've played around a bit with dependencies, but not found a solution yet. Any ideas?

How to deploy this on azure and test it?

Hi, I am not exactly sure what the steps are to deploy this onto azure and test it. I get a sync trigger error.
I would appreciate this greatly, as I am trying to deploy my app using Azure functions soon.

C:\SaferFnTest1\src\SaferFnTest1.Server>func azure functionapp publish SaferFnTest1
Microsoft (R) Build Engine version 17.2.0+41abc5629 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

Determining projects to restore...
Paket version 6.2.1+c82f25d6c324024cbd231df154a447a117c2546e
Starting restore process.
Total time taken: 0 milliseconds
All projects are up-to-date for restore.
Paket version 6.2.1+c82f25d6c324024cbd231df154a447a117c2546e
Starting restore process.
Total time taken: 0 milliseconds
SaferFnTest1.Shared -> C:\SaferFnTest1\src\SaferFnTest1.Server\bin\publish\SaferFnTest1.Shared.dll
SaferFnTest1.Server -> C:\SaferFnTest1\src\SaferFnTest1.Server\bin\publish\SaferFnTest1.Server.dll
Determining projects to restore...
Restored C:\Users\DoomPirate\AppData\Local\Temp\0xi30wcy.kpl\WorkerExtensions.csproj (in 326 ms).
WorkerExtensions -> C:\Users\DoomPirate\AppData\Local\Temp\0xi30wcy.kpl\buildout\Microsoft.Azure.Functions.Worker.Extensions.dll

Build succeeded.
0 Warning(s)
0 Error(s)

Time Elapsed 00:00:10.61

Getting site publishing info...
Creating archive for current directory...
Uploading 11.09 MB [##############################################################################]
Upload completed successfully.
Deployment completed successfully.
Syncing triggers...
Syncing triggers...
Syncing triggers...
Syncing triggers...
Syncing triggers...
Syncing triggers...
Error calling sync triggers (BadRequest). Request ID = '818823a6-aa49-40d9-b3e1-e5c1bc2dabd7'.

be wary of - being swapped for _ when solution is generated

First thanks for the template!

I think I got bit by this template issue dotnet/templating#1168

I was going to test the template so created a folder safer-test and ran the template but a lot of the paths got manged resulting in errors when running dotnet fake build - in that issue there is some advice on how to prevent this in the template

I'd be willing to take a look at applying if you want?

Problems with webpack

With version 2.2.0 I have following problem when running dotnet run

Bundling for development...
Failed to load ./.env.
<i> [webpack-dev-server] [HPM] Proxy created: /api/**  -> http://localhost:5000
<i> [webpack-dev-server] [HPM] Proxy created: /socket/**  -> http://localhost:5000
C:\GitHub\Startup\app\node_modules\webpack\lib\NormalModule.js:207
                        throw new TypeError(
                        ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (C:\GitHub\Startup\app\node_modules\webpack\lib\NormalModule.js:207:10)
    at C:\GitHub\Startup\app\node_modules\webpack\lib\HotModuleReplacementPlugin.js:767:18
    at Hook.eval [as call] (eval at create (C:\GitHub\Startup\App\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:102:1)
    at Hook.CALL_DELEGATE [as _call] (C:\GitHub\Startup\App\node_modules\tapable\lib\Hook.js:14:14)
    at C:\GitHub\Startup\App\node_modules\webpack\lib\Compiler.js:1153:29
    at Hook.eval [as callAsync] (eval at create (C:\GitHub\Startup\App\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\GitHub\Startup\App\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\GitHub\Startup\App\node_modules\webpack\lib\Compiler.js:1148:28)
    at C:\GitHub\Startup\App\node_modules\webpack\lib\Watching.js:214:19

Default implementation should include login example

Almost any app would want to use authentication. While the server side implementation in the template can be just a plug:

let login username password =
    if username = "jonh" && password = "123" then
        Ok username
     else
        Error "go away"

the whole plumbing of Fable/Feliz communicating with the server and updating global state (for logged in status, for example) is not very trivial for a beginner and would deserve a simple example. I could only make it work with Elmish, not with the provided sample of useDeferredCallback

Run project in Rider

Hi, do you maybe know how to run the project from JB Rider?

dzoukr / safer.template Goto Github PK

safer.template's People

Contributors

Stargazers

Watchers

Forkers

safer.template's Issues

Vite is reloading but not refreshing the browser

Add JSX support

Debug Client without the server

What are the steps needed to deploy to Azure static web apps and function apps?

The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement'

How to deploy this on azure and test it?

be wary of - being swapped for _ when solution is generated

Problems with webpack

Default implementation should include login example

Run project in Rider

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent