$PATH
by running the following:tauri-bundler
crate. It’s best to quit your CLI, and run the command below in a new CLI window:localhost:8080
. Kill the running server, and let’s install the Vue.js CLI plugin for Tauri.nota
and press “Enter”.package.json
file. They are:tauri:serve
script should be used during development. So let’s run it:src-tauri
directory to the root of your app directory. Inside this directory are files and folders used by Tauri to configure your desktop app. Let’s check out the contents:src-tauri/Cargo.toml
. Cargo.toml
is like the package.json
file for Rust. Find the line below in Cargo.toml
:nota
for your current platform, simply run this:nota
for your current OS. For me, I have a .deb
binary created in the src-tauri/target/release/bundle/deb/
directory.*yarn tauri:build
command just generated a binary for your operating system. So, let’s generate the binaries for other operating systems. To achieve this, we will set up a workflow on GitHub. We are using GitHub here to serve as a distribution medium for our cross-platform app. So, your users could just download the binaries in the “Release” tab of the project.The workflow we would implement would automatically build our binaries for us via the power of GitHub actions. Let’s get to it..github
directory in the root of nota-web
. In this directory, create another directory named workflows
. We would then create a workflow file in .github/workflows/
, and name it release-tauri-app.yml
.release-tauri-app.yml
, we would add a workflow that builds the binaries for Linux, macOS, and Windows. This workflow would also upload the binaries as a draft release on GitHub. The workflow would be triggered whenever we push to the master.release-tauri-app.yml
, and add the snippet below:master
branch. After successfully pushing to GitHub, you can then click on the “Actions” tab in GitHub, then click on the “Check build” link to see the progress of the workflow.yarn tauri:build
, and we also used a GitHub action to create binaries for Linux, macOS, and Windows.create-react-app
generator for this tutorial. To use the generator as well as run the React application server, you'll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.node --version
and npm --version
in a terminal or command prompt.my-app
is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.create-react-app
globally via npm install -g create-react-app
, we recommend you uninstall the package using npm uninstall -g create-react-app
to ensure that npx always uses the latest version.npm start
to start the web server and open the application in a browser:my-app
folder and type code .
:README.md
Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Preview⇧⌘V (Windows, Linux Ctrl+Shift+V)) or in a new editor group to the side (Markdown: Open Preview to the Side⌘K V (Windows, Linux Ctrl+K V)). You'll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.src
folder and select the index.js
file. You'll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parenthesis, the matching bracket is also selected.index.js
, you'll see smart suggestions or completions..
, you see the types and methods on the object through IntelliSense.*.d.ts
) for the npm modules referenced in the package.json
.App
, right click and select Peek Definition. A Peek window will open showing the App
definition from App.js
.<App />
tag in ReactDOM.render
with element
.index.js
file, the running instance of the server will update the web page and you'll see 'Hello World!'.files.autoSave
user setting.index.js
, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.launch.json
file in a new .vscode
folder in your project which includes a configuration to launch the website.url
from 8080
to 3000
. Your launch.json
should look like this:npm start
). Then press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached, so we won't hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.element
, and see the call stack of the client side React application..eslintrc.js
. You can create one using the extension's ESLint: Create ESLint configuration command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P))..eslintrc.js
file in your project root that looks something like this:index.js
about 'App' being defined but never used..eslintrc.js
file.create-react-app
generator to create a simple React application. There are lots of great samples and starter kits available to help build your first React application.create-react-app
application. See the details at TypeScript-React-Starter on the TypeScript Quick Start site.launch.json
file for the Debugger for Chrome extension.create-react-app
project's App.js
file, you can see IntelliSense within the React JSX in the render()
method.