SAFE-Stack / SAFE-template

dotnet CLI template for SAFE project
MIT License
282 stars 88 forks source link

Send fable output to a specific folder? #459

Closed isaacabraham closed 3 years ago

isaacabraham commented 3 years ago

You can redirect fable to output to a specific folder e.g. fable watch -o output --run webpack-dev-server (note the use of -o here).

This redirects all outputs into a single folder - all compiled JS files, as well as the .fable folder. At least one of our customers has suggested that they prefer using that rather than putting the JS outputs directly into the source folder as .fs.js files.

I've tested this out locally and the change would be trivial:

  1. Change the build project as e.g. above in the "run" Target:
"client", dotnet "fable watch -o output --run webpack-dev-server" clientPath
  1. Update the entry points in webpack e.g.
fsharpEntry: './src/Client/output/App.js',

(Note the lack of .fs in the file extension and the extra output in the path).

@alfonsogarciacaro is there any reason you would recommend one way or the other with this? What are the pros and cons of both?

alfonsogarciacaro commented 3 years ago

There are no clear pros and cons, I used the .fs.js approach for Fable 3 inspired by Bucklescript which does something similar. At the beginning it was helpful it avoids many issues we had when replicating the folder structure and also made it easier to debug the JS code (we didn't have source maps at first). But outputting to another directory is working reasonably well now and if you don't need to look at the generated code (which I do less and less often) it should be ok to use an output path. It's true this avoids pollution of the repo and that's normally what I do in my recent projects.

Probably the main drawback is that we're only moving .fs files, so if you're importing a .js or .css file you need to copy it manually or make sure the import is related to the output directory with the ${outDir} macro as in let foo: Foo = importDefault "${outDir}/js/foo.js"

theprash commented 3 years ago

I do prefer a separate directory myself because of the repo pollution issue.

Note that the template currently does dotnet fable clean --yes each time you start the app because I was frequently finding that the cache got into a bad state and wanted to start from scratch at least when killing the build script and restarting. We need to check if this command works correctly when Fable outputs to a directory. And if not, then we could just delete the .fable directory instead.

inputusernamehere commented 3 years ago

I agree that using a separate directory is probably best. It's very rare that I am interested in looking at the output in .fs.js files. I was considering opening this issue myself to ask about the same thing.

isaacabraham commented 3 years ago

@theprash you probably wouldn't want to delete .fable because that contains the outputs of all the nugets as well?