From 1df8068c5af723700edb2d19c4bc7aed61a8dd6c Mon Sep 17 00:00:00 2001 From: Damien Date: Sat, 22 Feb 2025 02:42:50 -0500 Subject: [PATCH] Update README.md --- README.md | 185 +----------------------------------------------------- 1 file changed, 1 insertion(+), 184 deletions(-) diff --git a/README.md b/README.md index 320fad4..6e2d0cc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

Nextauri

-

❤️ Next.js + Tauri = Nextauri ❤️

+

🌳 File Tree 🌳

@@ -24,186 +24,3 @@

- -## ❓ What is Nextauri ? - -Nextauri is your favorite template for create cross-platform application using `Tauri` with `Next.js`.
-It came with minimal best practice setup so you can add anything fit your need.
-You can it use to develop `Windows`, `Linux` and `Mac` desktop application.
-But Tauri plan to have a mobile compatibility in the futur ! - -## ✨ Key Features -Nextauri integrates community-endorsed best practices with powerful tooling out of the box: - -### Code Quality Assurance -- Community-recommended ESLint configuration for Next.js projects -- Rust best practices enforced through Clippy linter for Tauri - -### Automated CI/CD Pipeline -- GitHub Actions workflows that trigger when pushing and creating pull request: - - Next.js project linting with ESLint - - Tauri project analysis with Clippy - - Production builds for all platforms: - - • Linux - - • Windows - - • macOS - -### Maintenance Automation -- Automated weekly dependency updates keeping your stack fresh - -## 💪 Motivation - -Tauri is great to make secure cross platform application backed by `Rust` !
-It will load an `HTML` page inside a `Webview` and give the ability to do system call with `IPC`.
-If you are familliar with `electron` or `nextron` you can see it as a very good replacement with smaller bundle size, smaller memory usage and more secure. - -That make Next.js the perfect fit for bundle React application with Tauri since it comes with great Static-Site Generation `SSG` capability that will allow us to generates static files that will be included in the final binary. - -The `benefit` of using Next.js `SSG` mode is pre-rendered React code in static HTML/JavaScript.
This means your app will load faster.
-React doesn't have to render the `HTML` on the client-side but will hydrate it on the first load if needed. - -The `downside` is that we cannot use `getServerSideProps` or use any type of `data fetching` for rendering our page for a request.
-Instead we will use `getStaticProps` to generate our page at build time.
- -Note that if you still want the power of `Rust` for generate your page you may have a look at [Neon](https://neon-bindings.com).
-It will allow you to call `Rust` code from Node.js ! - -## 📦 Installation - -Be sure you have [NodeJS](https://nodejs.org/en/) and [Rust](https://www.rust-lang.org/) installed on your system - -1. See Tauri [prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites/) to prepare your system to build `Tauri` - -2. Clone or fork this repository - ```sh - git clone https://github.com/d4m13n-d3v/file_tree_rust - cd nextauri - ``` -3. Install node dependencies - ```sh - npm install - ``` - -## 🎨 Developing - -To get started you only need one command - -```sh -npm run dev -``` - -This will start both Tauri and Next.js in development mode. - -> Note that tauri is waiting for an http server to be alive on localhost:3000.
-> It's the default Next.js `port` while running in development - -You can modify the `port` by updating `src-tauri/tauri.conf.json`.
- -```json -"beforeDevCommand": "npm run next dev -- -p 8080", -"devPath": "http://localhost:8080", -``` - -### Source structure - -- `src-next/` are where Next.js files are located. -- `src-tauri/` contain Tauri source files. - -## 🧪 Testing - -To test your application we recommand you to use [Cypress](https://www.cypress.io) using Tauri [mocking technique](https://tauri.app/v1/guides/testing/mocking). - -If you want me to add `Cypress` as part of the template react to this [discussion](https://github.com/d4m13n-d3v/file_tree_rust/discussions/19). - -You may also want to take a look to pre-alpha [WebDriver Testing](https://tauri.app/v1/guides/testing/webdriver/introduction) from Tauri. - -## ⚡Production - -To build in production you can do it in a single command. -This will build and export Next.js and build Tauri for your current environnement. - -```sh -npm run tauri build -``` - -Look into `src-tauri/tauri.conf.json` to tweak the settings, -and refer to [Tauri](https://tauri.app/v1/guides/building) building documentation for more information. - - -## ⚠️ Warning - -If you are new to Next.js beware when working with it in development !
-It will start a `Nodejs` server in background in order to have `HMR` (Hot Module Replacement) capability but also `SSR` (Server Side Rendering). -That mean your React/Typescript code have two execution context : - -1. On the `Server` - - Code is executed by Node.js runtime. - - There is no notion of `window` or `navigator` it's part of `Browser API` - - You cannot call `Tauri API` in this context since Tauri injection happen in the `Browser` side - -2. On the `Browser` - - Code is executed by the Tauri `Webview` - - `Tauri API` will work fine and any other `Browser API` package `d3.js` for example - -Note that your production code will alway be running in a `Browser` side context.
-Since we use the `SSG` feature from Next.js no Node.js server will be packaged in production. - -``` -referenceError: navigator is not defined -``` - -This error can orcur when importing `@tauri-apps/api` for example.
-There is 2 workarounds that you can use : - -1. Dynamic component method - - - Create your component - ```tsx - import React from 'react' - - import { window } from '@tauri-apps/api'; - - const { appWindow } = window; - - export default function MyComponent() { -
- {appWindow.label} -
- } - ``` - - - Import your component - ```tsx - import dynamic from "next/dynamic"; - - const MyComponent = dynamic(() => import("./path/to/my/component"), { - ssr: false, - }); - - ``` - -1. Is browser method - - ```js - import { invoke } from '@tauri-apps/api/tauri' - - const isBrowser = typeof window !== 'undefined' - - if (isBrowser) { - /// Code will only execute on browser side - } - ``` - -In general to safely invoke `Tauri API` you should use it in `componentDidMount`, `useEffect` or on user based `events` that will be alway executed in client side. - -## 📚 Documentation - -To learn more about Tauri and Next.js, take a look at the following resources: - -- [Tauri Guides](https://tauri.app/v1/guides/) - guide about Tauri. -- [Tauri API](https://tauri.app/v1/api/js) - discover javascript Tauri api. -- [Next.js Documentation](https://nextjs.org/docs) - learn more about Next.js. -- [Next.js Tutorial](https://nextjs.org/learn) - interactive Next.js tutorial.