Starter App.js template for a Modern desktop app made using Tauri & ReactJS. This template is defacto until https://sveltematerialui.com/ gets better.

App.js

import './App.css';
import { AppShell, Navbar, Header, Text, MediaQuery, Burger, ActionIcon, Group } from '@mantine/core';
import { MantineProvider } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';
import { useState, useEffect } from 'react';
import { createStyles, useMantineTheme } from '@mantine/styles';
import { MemoryRouter, NavLink, Route, Routes } from "react-router-dom";
import localforage from 'localforage';

import { invoke } from '@tauri-apps/api/tauri'

// import Home from './Home';
// import Settings from './Settings';
// import CIFInfo from './CIFInfo';
// import About from './About';

// call stateSetter with value in storage given by key
function getItem(key, stateSetter, defaultValue) {
  localforage.getItem(key).then(value => stateSetter(value)).catch(_ => {
    stateSetter(defaultValue);
    localforage.setItem(key, defaultValue);
  });
}

function App() {
  const defaultColorScheme = 'dark';

  // opened is for mobile nav
  const [mobileNavOpened, setMobileNavOpened] = useState(false);
  const [colorScheme, setColorScheme] = useState(defaultColorScheme);

  // load preferences using localForage
  useEffect(() => getItem('colorScheme', setColorScheme, defaultColorScheme), []);

  const views = [
//     { component: Home, path: '/', exact: true, name: 'Home' },
//     { component: Settings, name: 'Settings' },
//     { component: CIFInfo, name: 'CIF Info' },
//     { component: About, name: 'About' }
  ];

//   function demoNotification() {
//     new Notification('Title', {
//       body: "This is the notification body",
//     });
//   }
  
  function toggleColorScheme(value) {
    const newValue = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(newValue);
    localforage.setItem('colorScheme', newValue);
  }

  const useStyles = createStyles(theme => ({
    navLink: {
      display: 'block',
      width: '100%',
      padding: theme.spacing.xs,
      borderRadius: theme.radius.md,
      color: colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
      textDecoration: 'none',
      willChange: 'transform',

      '&:hover:active': {
        transform: 'translateY(2px)',
      },
    },
    navLinkActive: {
      backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
    },
    navLinkInactive: {
      '&:hover': {
        backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
      },
    },
    headerWrapper: {
      display: 'flex',
      alignItems: 'center',
      height: '100%'
    },
    actionIcon: {
      marginLeft: "auto"
    },
    appShell: {
      main: { backgroundColor: colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] }
    },
    mediaQuery: {
      display: 'none'
    }
  }));

  const onNavLinkClick = e => {
    setMobileNavOpened(false);
  }

  const { classes } = useStyles();

  return (
    <MantineProvider theme={{ colorScheme: colorScheme, fontFamily: 'Open Sans, sans serif' }} withGlobalStyles >
      <MemoryRouter>
        <AppShell padding="md" navbarOffsetBreakpoint="sm" fixed
          navbar={
            <Navbar width={{ sm: 200 }} p="xs" hidden={!mobileNavOpened} hiddenBreakpoint="sm">
              {
                // TODO: https://github.com/greena13/react-hotkeys#hotkeys-components
                views.map((view, index) => {
                  return (<NavLink align="left" to={view.path ? view.path : view.name} key={index} onClick={e => onNavLinkClick(e)}
                    className={({ isActive }) => classes.navLink + ' ' + (isActive ? classes.navLinkActive : classes.navLinkInactive)}>
                    {/* TODO: Icons */}
                    <Group><Text>{view.name ? view.name : view.name}</Text></Group>
                  </NavLink>)
                })
              }
            </Navbar>
          }
          header={
            <Header height={70} p="md">
              <div className={classes.headerWrapper}>
                <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
                  <Burger opened={mobileNavOpened} onClick={() => setMobileNavOpened(o => !o)}
                    size="sm" color={useMantineTheme().colors.gray[6]} mr="xl" />
                </MediaQuery>
                <Text>HEADER TITLE</Text>
                <ActionIcon className={classes.actionIcon} variant="default" onClick={() => toggleColorScheme()} size={30}>{colorScheme === 'dark' ? <SunIcon /> : <MoonIcon />}</ActionIcon>
              </div>
            </Header>
          }
          className={classes.appShell}>
          <Routes>
            {views.map((view, index) => <Route key={index} exact={view.exact} path={view.path ? view.path : view.name} element={<view.component />} />)}
          </Routes>
        </AppShell>
      </MemoryRouter>
    </MantineProvider>
  );
}

export default App;

Cargo.toml

[package]
name = "app"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
default-run = "app"
edition = "2018"
build = "src/build.rs"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[build-dependencies]
tauri-build = { version = "1.0.0-rc.4", features = [] }

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.0.0-rc.4", features = ["api-all"] }
toml = "0.5"

[features]
default = [ "custom-protocol" ]
custom-protocol = [ "tauri/custom-protocol" ]

package.json

{
  "name": "APP NAME",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mantine/core": "^4.0.4",
    "@mantine/hooks": "^4.0.4",
    "@mantine/notifications": "^4.0.4",
    "@modulz/radix-icons": "^4.0.0",
    "@tauri-apps/api": "^1.0.0-rc.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "localforage": "^1.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "tauri-settings": "^0.1.2",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "dev": "tauri dev",
    "rls": "tauri build",
    "start": "react-scripts start",
    "build": "cross-env INLINE_RUNTIME_CHUNK=false yarn react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "wails": "cross-env PORT=34115 BROWSER=none react-scripts start",
    "py": "concurrently \"yarn cross-env BROWSER=none yarn start\" \"python main.py --devpath http://127.0.0.1:3000\""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.0.0-rc.2",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
  },
  "resolutions": {},
}