Skip to content

Commit 47629c1

Browse files
author
Jonas Juselius
committed
Reorganize FableApp to more reusable structure
1 parent 90c3e1a commit 47629c1

14 files changed

+1457
-491
lines changed

‎src/FableApp/Nuget.Config ‎Nuget.Config

File renamed without changes.

‎package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"private": true,
3+
"dependencies": {
4+
"@babel/polyfill": "^7.0.0",
5+
"@babel/runtime": "^7.0.0",
6+
"react": "16.5.2",
7+
"react-bootstrap": "0.32.4",
8+
"react-dom": "16.5.2",
9+
"whatwg-fetch": "^3.0.0"
10+
},
11+
"devDependencies": {
12+
"@babel/core": "^7.0.0",
13+
"@babel/plugin-transform-runtime": "^7.0.0",
14+
"@babel/preset-env": "^7.0.0",
15+
"babel-loader": "^8.0.0",
16+
"concurrently": "4.0.1",
17+
"fable-loader": "^2.0.0",
18+
"terser-webpack-plugin": "^1.1.0",
19+
"remotedev": "0.2.7",
20+
"webpack": "^4.20.2",
21+
"webpack-cli": "^3.1.2",
22+
"webpack-dev-server": "^3.1.9"
23+
}
24+
}

‎paket.dependencies

+10-5
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@ group Fable
88
source https://api.nuget.org/v3/index.json
99
storage:none
1010

11-
clitool dotnet-fable
12-
nuget Fable.Core
13-
nuget Fable.Import.Browser
14-
nuget Fable.Elmish
15-
nuget Fable.Elmish.React
11+
nuget Fable.Core ~> 2
12+
nuget Fable.Elmish ~> 2
13+
nuget Fable.Elmish.Debugger ~> 2
14+
nuget Fable.Elmish.React ~> 2
15+
nuget Fable.Elmish.HMR ~> 2
16+
nuget Fable.React ~> 4
17+
nuget Fulma ~> 1
18+
19+
clitool dotnet-fable ~> 2
20+
1621

1722
group netcorebuild
1823
storage:none

‎paket.lock

+14
Original file line numberDiff line numberDiff line change
@@ -452,6 +452,15 @@ NUGET
452452
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
453453
Fable.PowerPack (>= 2.0.1) - restriction: >= netstandard2.0
454454
FSharp.Core (>= 4.5.2) - restriction: >= netstandard2.0
455+
Fable.Elmish.Debugger (2.0.1)
456+
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
457+
Fable.Elmish (>= 2.0) - restriction: >= netstandard2.0
458+
FSharp.Core (>= 4.5.2) - restriction: >= netstandard2.0
459+
Fable.Elmish.HMR (2.0)
460+
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
461+
Fable.Elmish (>= 2.0) - restriction: >= netstandard2.0
462+
Fable.Import.HMR (>= 0.1) - restriction: >= netstandard2.0
463+
FSharp.Core (>= 4.5.2) - restriction: >= netstandard2.0
455464
Fable.Elmish.React (2.0)
456465
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
457466
Fable.Elmish (>= 2.0) - restriction: >= netstandard2.0
@@ -460,6 +469,8 @@ NUGET
460469
FSharp.Core (>= 4.5.2) - restriction: >= netstandard2.0
461470
Fable.Import.Browser (1.3)
462471
Fable.Core (>= 1.3.17) - restriction: >= netstandard1.6
472+
Fable.Import.HMR (0.1) - restriction: >= netstandard2.0
473+
Fable.Core (>= 1.3.17) - restriction: >= netstandard1.6
463474
Fable.PowerPack (2.0.1) - restriction: >= netstandard2.0
464475
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
465476
Fable.Import.Browser (>= 1.3) - restriction: >= netstandard2.0
@@ -480,6 +491,9 @@ NUGET
480491
System.Runtime.Loader (>= 4.0) - restriction: && (< net45) (>= netstandard2.0)
481492
System.Security.Cryptography.Algorithms (>= 4.3) - restriction: && (< net45) (>= netstandard2.0)
482493
FSharp.Core (4.5.2) - restriction: >= netstandard2.0
494+
Fulma (1.0)
495+
Fable.Core (>= 2.0) - restriction: >= netstandard2.0
496+
Fable.React (>= 4.0.1) - restriction: >= netstandard2.0
483497
Microsoft.NETCore.App (2.1.5) - restriction: >= netcoreapp2.0
484498
Microsoft.NETCore.DotNetHostPolicy (>= 2.1.5) - restriction: >= netcoreapp2.1
485499
Microsoft.NETCore.Platforms (>= 2.1.1) - restriction: >= netcoreapp2.1

‎src/FableApp/.vscode/tasks.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"version": "2.0.0",
55
"tasks": [
66
{
7-
"command": "yarn",
8-
"args": ["start"],
7+
"command": "dotnet",
8+
"args": ["fable webpack-dev-server", "--", "--config src/FableApp/webpack.config.js"],
99
"type": "shell",
1010
"label": "Start",
1111
"group": "build",
@@ -34,4 +34,4 @@
3434
}
3535
}
3636
]
37-
}
37+
}

‎src/FableApp/src/App.fs ‎src/FableApp/App.fs

File renamed without changes.

‎src/FableApp/src/FableApp.fsproj ‎src/FableApp/FableApp.fsproj

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
<ItemGroup>
77
<Compile Include="App.fs" />
88
</ItemGroup>
9-
<Import Project="..\..\..\.paket\Paket.Restore.targets" />
10-
</Project>
9+
<Import Project="..\..\.paket\Paket.Restore.targets" />
10+
</Project>

‎src/FableApp/FableApp.sln

-34
This file was deleted.

‎src/FableApp/package.json

-28
This file was deleted.

‎src/FableApp/src/paket.references ‎src/FableApp/paket.references

File renamed without changes.

‎src/FableApp/public/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>FableApp</title>
5+
<meta charset="utf-8">
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
10+
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11+
12+
<link rel="shortcut icon" type="image/png" href="/Images/safe_favicon.png"/>
13+
</head>
14+
<body>
15+
<div id="elmish-app"></div>
16+
<script src="./js/vendors.js"></script>
17+
<script src="./js/app.js"></script>
18+
</body>
19+
</html>

‎src/FableApp/src/public/index.html

-13
This file was deleted.

‎src/FableApp/webpack.config.js

+72-43
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,104 @@
11
var path = require("path");
22
var webpack = require("webpack");
3+
var MinifyPlugin = require("terser-webpack-plugin");
34

45
function resolve(filePath) {
56
return path.join(__dirname, filePath)
67
}
78

8-
var babelOptions = {
9-
presets: [
10-
["@babel/preset-env", {
11-
"targets": {
12-
"browsers": ["last 2 versions"]
13-
},
14-
"modules": false
15-
}]
16-
],
17-
plugins: ["@babel/plugin-transform-runtime"]
18-
};
9+
var CONFIG = {
10+
fsharpEntry: {
11+
"app": [
12+
"whatwg-fetch",
13+
"@babel/polyfill",
14+
resolve("./FableApp.fsproj")
15+
]
16+
},
17+
devServerProxy: {
18+
'/api/*': {
19+
target: 'http://localhost:' + (process.env.SUAVE_FABLE_PORT || "8085"),
20+
changeOrigin: true
21+
}
22+
},
23+
historyApiFallback: {
24+
index: resolve("./index.html")
25+
},
26+
contentBase: resolve("./public"),
27+
// Use babel-preset-env to generate JS compatible with most-used browsers.
28+
// More info at https://github.com/babel/babel/blob/master/packages/babel-preset-env/README.md
29+
babel: {
30+
presets: [
31+
["@babel/preset-env", {
32+
"targets": {
33+
"browsers": ["last 2 versions"]
34+
},
35+
"modules": false,
36+
"useBuiltIns": "usage",
37+
}]
38+
],
39+
plugins: ["@babel/plugin-transform-runtime"]
40+
}
41+
}
1942

2043
var isProduction = process.argv.indexOf("-p") >= 0;
2144
console.log("Bundling for " + (isProduction ? "production" : "development") + "...");
22-
var port = process.env.SUAVE_FABLE_PORT || "8085";
2345

2446
module.exports = {
25-
devtool: "source-map",
26-
mode: "development",
27-
entry: "./src/FableApp.fsproj",
47+
entry : CONFIG.fsharpEntry,
2848
output: {
29-
path: path.join(__dirname, "./src/public/js"),
49+
path: resolve('./public/js'),
3050
publicPath: "/js",
31-
filename: "bundle.js",
51+
filename: "[name].js"
3252
},
33-
devServer: {
34-
proxy: {
35-
'/api/*': {
36-
target: 'http://localhost:' + port,
37-
changeOrigin: true
53+
mode: isProduction ? "production" : "development",
54+
devtool: isProduction ? undefined : "source-map",
55+
resolve: {
56+
symlinks: false
57+
},
58+
optimization: {
59+
// Split the code coming from npm packages into a different file.
60+
// 3rd party dependencies change less often, let the browser cache them.
61+
splitChunks: {
62+
cacheGroups: {
63+
commons: {
64+
test: /node_modules/,
65+
name: "vendors",
66+
chunks: "all"
67+
}
3868
}
3969
},
40-
contentBase: "./src/public",
41-
port: 8080,
42-
hot: true,
43-
inline: true
70+
minimizer: isProduction ? [new MinifyPlugin()] : []
4471
},
45-
resolve: {
46-
symlinks: false,
47-
modules: [resolve("node_modules/")]
72+
// DEVELOPMENT
73+
// - HotModuleReplacementPlugin: Enables hot reloading when code changes without refreshing
74+
plugins: isProduction ? [] : [
75+
new webpack.HotModuleReplacementPlugin(),
76+
new webpack.NamedModulesPlugin()
77+
],
78+
// Configuration for webpack-dev-server
79+
devServer: {
80+
proxy: CONFIG.devServerProxy,
81+
hot: true,
82+
inline: true,
83+
historyApiFallback: CONFIG.historyApiFallback,
84+
contentBase: CONFIG.contentBase
4885
},
86+
// - fable-loader: transforms F# into JS
87+
// - babel-loader: transforms JS to old syntax (compatible with old browsers)
4988
module: {
5089
rules: [
5190
{
5291
test: /\.fs(x|proj)?$/,
53-
use: {
54-
loader: "fable-loader",
55-
options: {
56-
babel: babelOptions,
57-
define: isProduction ? [] : ["DEBUG"]
58-
}
59-
}
92+
use: "fable-loader"
6093
},
6194
{
6295
test: /\.js$/,
6396
exclude: /node_modules/,
6497
use: {
6598
loader: 'babel-loader',
66-
options: babelOptions
99+
options: CONFIG.babel
67100
},
68101
}
69102
]
70-
},
71-
plugins: isProduction ? [] : [
72-
new webpack.HotModuleReplacementPlugin(),
73-
new webpack.NamedModulesPlugin()
74-
]
75-
}
103+
}
104+
};

0 commit comments

Comments
 (0)