-<span class=grvsc-line><span class=grvsc-source><span class=mtk1>fs.writeFileSync</span><span class=mtk14>(</span><span class=mtk10>"test.txt"</span><span class=mtk14>,</span><span class=mtk1> </span><span class=mtk10>"Hello World"</span><span class=mtk14>)</span></span></span></code></pre><li><p>Run Fable and TypeScript in watch mode.<p>The follwing command start Fable in watch mode, and after the first Fable compilation, it will start TypeScript in watch mode.<pre class="atom-one-light grvsc-container"data-index=8 data-language=bash><code class=grvsc-code><span class=grvsc-line><span class=grvsc-source><span class=mtk1>dotnet fable watch --lang typescript --run npx tsc Program.fs.ts --target es2022 --watch --preserveWatchOutput</span></span></span></code></pre><blockquote><p>You can use your favorite build system instead to launch the different commands in parallel.</blockquote><p>If you run your node script again, you should see a new file <code>test.txt</code> with the content <code>Hello World</code>.<p>Try changing the content of <code>Hello World</code> to something else and re-run your script.<p>You should see that Fable and TypeScript re-compile your code and the file content changed.</ul><h2 id=browser>Browser<a href=#browser aria-hidden=true tabindex=-1><span class=anchor>#</span></a></h2><article class="is-info message"><div class=message-body><div><p>Please make sure you followed the <a href=/docs/2-steps/your-first-fable-project>Fable setup guide</a> before continuing.</div></div></article><p>In this section, we are going to use <a href=https://vitejs.dev/>Vite</a> as a development server to run our code in the browser.<p>If you want to use another bundler, please refer to their respective documentation.<ul class=textual-steps><li><p>Generate a <code>package.json</code> file.<pre class="atom-one-light grvsc-container"data-index=9 data-language=bash><code class=grvsc-code><span class=grvsc-line><span class=grvsc-source><span class=mtk1>npm init -y</span></span></span></code></pre><li><p>Install Vite.<pre class="atom-one-light grvsc-container"data-index=10 data-language=bash><code class=grvsc-code><span class=grvsc-line><span class=grvsc-source><span class=mtk1>npm i -D vite</span></span></span></code></pre><li><p>Create <code>vite.config.ts</code> file, and add the following content:<pre class="atom-one-light grvsc-container"data-index=11 data-language=ts><code class=grvsc-code><span class=grvsc-line><span class=grvsc-source><span class=mtk14>import</span><span class=mtk1> { </span><span class=mtk5>defineConfig</span><span class=mtk1> } </span><span class=mtk14>from</span><span class=mtk1> </span><span class=mtk10>'vite'</span></span></span>
0 commit comments