{"id":65,"date":"2019-02-05T11:00:03","date_gmt":"2019-02-05T10:00:03","guid":{"rendered":"https:\/\/informedica.nl\/?p=65"},"modified":"2019-02-05T12:17:18","modified_gmt":"2019-02-05T11:17:18","slug":"app-setup-using-safe","status":"publish","type":"post","link":"https:\/\/informedica.nl\/?p=65","title":{"rendered":"App Setup using SAFE"},"content":{"rendered":"\n<p>I am using the <a href=\"https:\/\/safe-stack.github.io\/\">SAFE template<\/a> to setup my apps. This will install a full stack framework with F# as the back-end and front-end language.<\/p>\n\n\n\n<p>To see the setup instructions go to the <a href=\"https:\/\/safe-stack.github.io\/docs\/quickstart\/\">SAFE website<\/a>. Typically, I use the install with the following directives: <\/p>\n\n\n<p><!--more--><\/p>\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-shell\">\n      Shell    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1578595521\" \n    id=\"codemirror-1578595521\"\n  ># --deploy docker: use docker for deployment\n# --layout: don&#039;t use the standard Fulma layout\n# Note use two hyphens (code here shows only hyphen)\ndotnet new SAFE --deploy docker --layout none <\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1578595521'), {\n      mode: 'shell',\n      readOnly: true,\n      theme: 'material', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>Because the default <a href=\"https:\/\/fulma.github.io\/Fulma\/\">Fulma UI library<\/a> is not selected as the default choice, an UI library has to be added. I am using the <a href=\"https:\/\/mvsmal.github.io\/fable-material-ui\/#\/home\">Fable.MaterialUI<\/a> (for now).  This can be added by:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-shell\">\n      Shell    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1458107930\" \n    id=\"codemirror-1458107930\"\n  ># Adds the Fable.MaterialUI library to the client project\n.\/paket\/paket.exe add --group Client --project src\/Client\/Client.fsproj Fable.MaterialUI\n\n# Add the required node modules\nyarn add @material-ui\/core\n<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1458107930'), {\n      mode: 'shell',\n      readOnly: true,\n      theme: 'material', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>Next I update the index.html file with the following additions to the header section:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-177662307\" \n    id=\"codemirror-177662307\"\n  >&lt;meta http-equiv=&#039;Content-Type&#039; content=&#039;text\/html; charset=utf-8&#039;&gt;\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n&lt;meta name=&quot;theme-color&quot; content=&quot;#2196f3&quot;&gt;\n&lt;meta property=&quot;og:title&quot; content=&quot;My SAFE APP&quot; \/&gt;\n&lt;meta property=&quot;og:description&quot; content=&quot;A SAFE app&quot; \/&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.6.3\/css\/font-awesome.min.css&quot; \/&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,500&quot;&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&quot;&gt;\n\n&lt;link rel=&quot;shortcut icon&quot; type=&quot;image\/png&quot; href=&quot;public\/favicon.png&quot; \/&gt;\n\n&lt;script src=&quot;https:\/\/cdn.polyfill.io\/v2\/polyfill.js?features=es6&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/polyfill.app\/api\/polyfill?features=fetch&quot;&gt;&lt;\/script&gt;\n<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-177662307'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'material', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>This adds all necessary css files. It also loads a polyfill for the fetch function (for use with IE 11). As described in <a href=\"https:\/\/github.com\/fable-compiler\/Fable\/issues\/1719\">this GitHub issue<\/a>. The next step is to configure the docker deploy. Therefore the build.fsx file has to be edited, changing the &#8220;Docker Target&#8221; with:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-mllike\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1242317656\" \n    id=\"codemirror-1242317656\"\n  >let dockerUser = &quot;halcwb&quot;\n\/\/ Note that the docker image name has to be all lower caps\nlet dockerImageName = &quot;myapp&quot;\n\/\/ The resulting docker image will be called: halcwb\/myapp\n<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1242317656'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'material', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>You can now power up the application with a simple command:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-shell\">\n      Shell    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-829460566\" \n    id=\"codemirror-829460566\"\n  ># Builds the application using the run target\n# This will also starup the default browser\n# with the running client front-end\nfake build -t run<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-829460566'), {\n      mode: 'shell',\n      readOnly: true,\n      theme: 'material', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>The result is an enormous powerful setup featuring:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A full stack application with a running web server and a web based client.<\/li><li>All code written in (IMHO the best language) F#.<\/li><li>Hot module reloading, i.e. every time you save a code change, the browser will reload you and show the changes directly.<\/li><li>A time travelling debugger. You can literally <a href=\"https:\/\/elmish.github.io\/debugger\/\">replay <\/a>your app use history in the browser. <\/li><\/ul>\n\n\n\n<p>How impressive is that! <\/p>\n\n\n\n<p>Next setup server side and browser side! testing.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am using the SAFE template to setup my apps. This will install a full stack framework with F# as the back-end and front-end language. To see the setup instructions go to the SAFE website. Typically, I use the install with the following directives:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65"}],"version-history":[{"count":12,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/informedica.nl\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informedica.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}