Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dedSyn4ps3/tauri-mobile-test
An example app using the new Tauri Mobile alpha
https://github.com/dedSyn4ps3/tauri-mobile-test
Last synced: 3 months ago
JSON representation
An example app using the new Tauri Mobile alpha
- Host: GitHub
- URL: https://github.com/dedSyn4ps3/tauri-mobile-test
- Owner: dedSyn4ps3
- License: mit
- Created: 2023-04-08T02:03:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-08T16:57:55.000Z (over 1 year ago)
- Last Synced: 2024-04-27T14:34:02.709Z (7 months ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 31
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tauri - Tauri Mobile Test - Create and build cross-platform mobile applications. (Applications / Developer tools)
README
# Tauri Mobile Test 
An example application to demonstrate how to create and start building a cross-platform mobile application using the new Alpha Channel of the [Tauri Framework](https://www.tauri.app).
NOTE: The code contained here is meant to serve as an example for my article on **Medium** (Check it out!)
> [Getting Started Using Tauri Mobile](https://medium.com/@erutherford_nullreturn)
## **Setup** 📦
For detailed steps on how to completely set up a brand new development environment, be sure to check out the article linked above!
If you're familiar with Tauri and already have the typical setup in place, there's only a couple additional steps that need to be taken to be ready for building a mobile version of an app.
Since the article (and this repo) follow the process of building an example Android app on Arch Linux, those are the steps that will be outlined here...
### **Add Dependecies**
```bash
sudo pacman -Syu
sudo pacman -S --needed \
webkit2gtk-4.1 \
base-devel \
curl \
wget \
openssl \
appmenu-gtk-module \
gtk3 \
libappindicator-gtk3 \
librsvg \
libvips
```
### **Rust Installation (if needed)**
```bash
curl --proto '=https' --tlsv1.2 https://sh.rustup.s -sSf | sh
```
### **For Android**
```bash
rustup target add aarch64-linux-android rmv7-linux-androideabi i686-linux-android 86_64-linux-android
```
Another key application you need to install on your system is Android Studio. You can follow the installation instructions for your particular setup provided on their official [website](https://developer.android.com/studio):
```bash
# Using Yay for package management
yay -S android-tools android-studio
# Using Pacman
sudo pacman -S android-tools android-studio
```
**Open up Android Studio and navigate to the SDK Management window:**
Ensure the following components are checked, applied, and installed
- Android SDK Platform
- Android SDK Platform-Tools
- NDK (Side by side)
- Android SDK Build-Tools
- Android SDK Command-line Tools
With all of that out of the way, the only thing left to do is add a couple new environment variables to your corresponding `.bashrc`, `.zshrc`, or `config.fish`:
```shell
export JAVA_HOME=/opt/android-studio/jbr
export ANDROID_HOME="$HOME/Android/Sdk"
export NDK_HOME="$ANDROID_HOME/ndk/25.0.8775105"
```
> **
NOTE**
> The location of your `Android Studio` and `NDK` directories maybe different.
## **Project Creation** 🏗
There are a number of different ways to generate the initial project structure, but for this example we'll stick with using the `create-tauri-app` installed using `cargo`:
```shell
cargo install create-tauri-app
cargo create-tauri-app --alpha --mobile
```
>Follow each prompt and select how you plan to develop your new application
## Adding Component Libraries 📱
The `create-tauri-app` creates a basic application structure that's already good to run and test out, but since we're looking to create a mobile-focused app, let's go ahead and add some additional `React` libraries from two excellent frameworks to create some new components!
**This example takes advantage of the following React framworks:**
- [MDBootstrap React](https://mdbootstrap.com)
- [MUI Material React](https://mui.com)
```shell
npm i mdb-react-ui-kit @fortawesome/fontawesome-free
npm i @mui/material @emotion/react @emotion/styled
npm i @mui/icons-material
```
>See both frameworks' instructions for the remaining few steps to incorporate into your project
## License ™
- See **LICENSE**
## Recommended IDE Setup 🖥
- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)