How I Cloned a Simple VSCode Using Tauri and ReactJS

Hi friends, it's Hudy! Recently, I wrote a tutorial about how to build a notebook - desktop application - using Tauri. But, maybe that doesn’t really demonstrate the power of Tauri. As such, I decided to build another app - a simple code editor (a very basic version like VScode) This app has some basic functions such as: reading files and folders that are contained in a project folder creating new files editing file content displaying opened files in tab showing folder structure file icons Prerequisite Tauri Reactjs Understanding how React Context works Final result: Source code (only for windows) Download link If you're using macOS, please clone the repo and run the build command as follows: // make sure that you installed Tauri already $ yarn tauri build Here is the youtube video tutorial version: https://www.youtube.com/embed/LUcUn-_KVXo?embedable=true Code structure src/ ├─ assets/ // file icons ├─ components/ // react components ├─ context/ // data management ├─ helpers/ // file system api & hook ├─ types/ // file object store ├─ stores/ // typesrcipt types src-tauri/ // tauri core Below are the main packages that we're gonna use in this tutorial - a code editor component for the web codemirror - a simply delightful icon system, but only use several ones 🤣 remixicon - a utility-first CSS framework tailwindcss - unique string ID generator nanoid - the basic dark theme cm6-theme-material-dark Code flow explanation Before jumping into the code, you should take a look at the overview of how the code editor works. See the image below. You'll see that our code editor has 4 main parts: Titlebar, Sidebar, Tab, and Editor Each part is equivalent to one specific reactjs component. For instance: Tab will be component, Titlebar will be component and so on Next, the image illustrates how our code runs after the user loads a project folder or clicks on a file/folder. Initially, users load a project folder on (1) Sidebar. All files/folders will be saved to (3) Stores - only metadata saved, not file content. Next, every time a user clicks on a file, the file's id will be passed to (2) SourceContext - our state management. When (2) get a new then automatically (4) will add a new tab with the file's name, and (5) display the selected file's content. End selected_file The core of our editor - the most important files In order to read the folder's content (Ex: files, folders), and get file content, then the following files are core: helpers/filesys.ts - contains functions that call tauri commands for reading the folder, getting file content, ... from main.rs src-tauri/src/main.rs - defines tauri commands, and calls functions from fc.rs src-tauri/src/fc.rs - contains main functions for reading the folder, getting file content, ... stores/file.ts - stores file metadata Ok, that's enough, let's get right into it Coding time Start development mode $ yarn tauri dev 1. Scaffolding code base The first step, initialize the project code base. Run the following commands and remember to select a package manager - mine is yarn $ npm create tauri-app huditor Install some packages $ yarn add remixicon nanoid codemirror cm6-theme-material-dark $ yarn add @codemirror/lang-css @codemirror/lang-html @codemirror/lang-javascript @codemirror/lang-json @codemirror/lang-markdown @codemirror/lang-rust In this tutorial, I'm gonna use tailwindcss for styling $ yarn add tailwindcss postcss autoprefixer After installing, head to this official for completing the installation guide To save time, I created a style file . here 2. Customize the Titlebar OK, The first thing we're gonna build is a Titlebar. It is the easiest part of the tutorial. This is because it just has 3 main features and we can use inside the package to create these features. appWindow @tauri-apps/api/window import { useState } from "react"; import { appWindow } from "@tauri-apps/api/window"; export default function Titlebar() { const [isScaleup, setScaleup] = useState(false); // .minimize() - to minimize the window const onMinimize = () => appWindow.minimize(); const onScaleup = () => { // .toggleMaximize() - to swap the window between maximize and minimum appWindow.toggleMaximize(); setScaleup(true); } const onScaledown = () => { appWindow.toggleMaximize(); setScaleup(false); } // .close() - to close the window const onClose = () => appWindow.close(); return huditor {isScaleup ? : } } 3. Create the SourceContext As I mentioned above, in order for components to communicate with each other, we need a state manager - . Just define the interface first IFile // src/types/file.ts export interface IFile { id: string; name: string; kind: 'file' | 'directory'; path: string; // d://path/to/file } Create a file called . It contains 2 main properties are: src/context/SourceContext.tsx - stores the file id the user clicks on selected - contains a list of file id. Ex: ['387skwje', 'ids234oijs', '92kjsdoi4', ...] opened // src/context/SourceContext.tsx import { createContext, useContext, useState, useCallback } from "react" interface ISourceContext { selected: string; setSelect: (id: string) => void; opened: string[]; addOpenedFile: (id: string) => void; delOpenedFile: (id: string) => void; } const SourceContext = createContext ({ selected: '', setSelect: (id) => { }, opened: [], addOpenedFile: (id) => { }, delOpenedFile: (id) => { } }); Create to passing our states to child components // src/context/SourceContext.tsx // .... export const SourceProvider = ({ children }: { children: JSX.Element | JSX.Element[] }) => { const [selected, setSelected] = useState(''); const [opened, updateOpenedFiles] = useState ([]); const setSelect = (id: string) => { setSelected(id) } const addOpenedFile = useCallback((id: string) => { if (opened.includes(id)) return; updateOpenedFiles(prevOpen => ([...prevOpen, id])) }, [opened]) const delOpenedFile = useCallback((id: string) => { updateOpenedFiles(prevOpen => prevOpen.filter(opened => opened !== id)) }, [opened]) return {children} } In addition, I also create a hook called that helps using these above states and function easier useSource export const useSource = () => { const { selected, setSelect, opened, addOpenedFile, delOpenedFile } = useContext(SourceContext) return { selected, setSelect, opened, addOpenedFile, delOpenedFile } } 4. Create the Sidebar Now, time to create the sidebar. I break the sidebar into 2 parts: one for a header - that contains a button and project name the other for - a list of files/folders that loaded by clicking the above button // src/components/Sidebar.tsx import { useState } from "react"; import { IFile } from "../types"; import { open } from "@tauri-apps/api/dialog"; // we're gonna create and `filesys.ts` belows import NavFiles from "./NavFiles"; import { readDirectory } from "../helpers/filesys"; export default function Sidebar() { const [projectName, setProjectName] = useState(""); const [files, setFiles] = useState ([]); const loadFile = async () => { const selected = await open({ directory: true }) if (!selected) return; setProjectName(selected as string) // .readDirectory accepts a folder path and return // a list of files / folders that insides it readDirectory(selected + '/').then(files => { console.log(files) setFiles(files) }) } return File explorer {projectName} } Prepare a to show file thumbnail. Checkout the GitHub project to get all assets // src/components/FileIcon.tsx // assets link: https://github.com/hudy9x/huditor/tree/main/src/assets import html from '../assets/html.png'; import css from '../assets/css.png'; import react from '../assets/react.png'; import typescript from '../assets/typescript.png'; import binary from '../assets/binary.png'; import content from '../assets/content.png'; import git from '../assets/git.png'; import image from '../assets/image.png'; import nodejs from '../assets/nodejs.png'; import rust from '../assets/rust.png'; import js from '../assets/js.png'; interface Icons { [key: string]: string } const icons: Icons = { tsx: react, css: css, svg: image, png: image, icns: image, ico: image, gif: image, jpeg: image, jpg: image, tiff: image, bmp: image, ts: typescript, js, json: nodejs, md: content, lock: content, gitignore: git, html: html, rs: rust, }; interface IFileIconProps { name: string; size?: 'sm' | 'base' } export default function FileIcon({ name, size = 'base' }: IFileIconProps) { const lastDotIndex = name.lastIndexOf('.') const ext = lastDotIndex !== -1 ? name.slice(lastDotIndex + 1).toLowerCase() : 'NONE' const cls = size === 'base' ? 'w-4' : 'w-3'; if (icons[ext]) { return } return } Alright! Now we just render all files that passed from . Create a file called . Inside the file, we should split the code into 2 parts: render file and render folder. src/components/NavFiles.tsx I'll explain the folder view ( ) later. About render file, we only need to list all files and provide an action for each file. When a user clicks on file, not folder, call add pass file id to state in context using function onShow opened addOpenedfile // src/components/NavFiles.tsx import { MouseEvent } from "react" import { useSource } from "../context/SourceContext" import { IFile } from "../types" import FileIcon from "./FileIcon" import NavFolderItem from "./NavFolderItem" // this will be defined later interface Props { files: IFile[] visible: boolean } export default function NavFiles({files, visible}: Props) { const {setSelect, selected, addOpenedFile} = useSource() const onShow = async (ev: React.MouseEvent , file: IFile) => { ev.stopPropagation(); if (file.kind === 'file') { setSelect(file.id) addOpenedFile(file.id) } } return {files.map(file => { const isSelected = file.id === selected; if (file.kind === 'directory') { return } return onShow(ev, file)} key={file.id} className={`soure-item ${isSelected ? 'source-item-active' : ''} flex items-center gap-2 px-2 py-0.5 text-gray-500 hover:text-gray-400 cursor-pointer`} > {file.name} })} } 5. Create helpers/filesys.ts OK, let's create - this is our bridge from frontend to the Tauri core. Let me clarify this, as you may know, javascript API does not support reading/writing files/folders for now (tried File System Access API, but can't create a folder, delete a file, or delete a folder). So we have to do this in rust src/helpers/filesys.ts And the only way to communicate with rust code is with Tauri commands. The below diagram illustrates how Tauri commands work. Tauri supports a function called . Let’s import that function from and call to , , and commands. invoke @tauri-apps/api/tauri get_file_content write_file open_folder // src/helpers/filesys.ts import { invoke } from "@tauri-apps/api/tauri" import { nanoid } from "nanoid" import { saveFileObject } from "../stores/file" // we'll defines this file below import { IFile } from "../types" export const readFile = (filePath: string): Promise => { return new Promise((resolve, reject) => { // get the file content invoke("get_file_content", {filePath}).then((message: unknown) => { resolve(message as string); }).catch(error => reject(error)) }) } export const writeFile = (filePath: string, content: string): Promise => { return new Promise((resolve, reject) => { // write content in file or create a new one invoke("write_file", { filePath, content }).then((message: unknown) => { if (message === 'OK') { resolve(message as string) } else { reject('ERROR') } }) }) } export const readDirectory = (folderPath: string): Promise => { return new Promise((resolve, reject) => { // get all files/folders inside `folderPath` invoke("open_folder", { folderPath }).then((message: unknown) => { const mess = message as string; const files = JSON.parse(mess.replaceAll('\\', '/').replaceAll('//', '/')); const entries: IFile[] = []; const folders: IFile[] = []; if (!files || !files.length) { resolve(entries); return; } for (let i = 0; i < files.length; i++) { const file = files[i]; const id = nanoid(); const entry: IFile = { id, kind: file.kind, name: file.name, path: file.path } if (file.kind === 'file') { entries.push(entry) } else { folders.push(entry) } // save file metadata to store, i mentioned this above // scroll up if any concerns saveFileObject(id, entry) } resolve([...folders, ...entries]); }) }) } 6. Create stores/files.ts Our store is very simple, it's an object as follows: // src/stores/files.ts import { IFile } from "../types" // Ex: { // "34sdjwyd3": { // "id": "34sdjwyd3", // "name": "App.tsx", // "kind": "file", // "path": "d://path/to/App.tsx", // }, // "872dwehud": { // "id": "872dwehud", // "name": "components", // "kind": "directory", // "path": "d://path/to/components", // } // } interface IEntries { [key: string]: IFile } const entries: IEntries = {} export const saveFileObject = (id: string, file: IFile): void => { entries[id] = file } export const getFileObject = (id: string): IFile => { return entries[id] } 7. Define Tauri commands The most important file is here, I've created that before, so you guys can find the full source here . Below are shortened versions, I won't explain it in detail, because I'm very new to rust and I’m still trying to workout the kinks. https://github.com/hudy9x/huditor/blob/main/src-tauri/src/fc.rs If anyone resolves all warnings in this file, please let me know, and I'll update it. Thanks! // src-tauri/src/fc.rs // ... pub fn read_directory(dir_path: &str) -> String { /**... */ } pub fn read_file(path: &str) -> String { /**... */ } pub fn write_file(path: &str, content: &str) -> String { /**... */ } // These are not used in this tutorial // i leave it to you guys 😁 pub fn create_directory(path: &str) -> Result {/**... */ } pub fn remove_file(path: &str) -> Result {/**... */ } pub fn remove_folder(path: &str) -> Result { /**... */ } // ... The only task you guys need to do is define commands. One important thing you have to keep in mind when defining commands and calling them is that: invoke("write_file", {filePath, content}) // frontend write_file(file_path: &str, content: &str) // tauri command "write_file"s: name must be the same params in must be an object with the name in camelCase invoke params in tauri command must be snake_case So, here are our commands // src-tauri/src/main.rs #![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] mod fc; // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command #[tauri::command] fn greet(name: &str) -> String { format!("Hello, {}! You've been greeted from Rust!", name) } #[tauri::command] fn open_folder(folder_path: &str) -> String { let files = fc::read_directory(folder_path); files } #[tauri::command] fn get_file_content(file_path: &str) -> String { let content = fc::read_file(file_path); content } #[tauri::command] fn write_file(file_path: &str, content: &str) -> String { fc::write_file(file_path, content); String::from("OK") } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet, open_folder, get_file_content, write_file]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } Cool ! the hardest part is done. Let's see whether it works or not 😂 8. Displays files/folders inside a subfolder The last one to complete our Sidebar is displaying files/folders inside subfolder. Create a new file . It does some tasks: src/components/NavFolderItem.tsx When the user clicks on the folder, reuse function and show all files/folders readDirectory Creating new files using function writeFile Reuse to display files/folders // src/components/NavFolderItem.tsx import { nanoid } from "nanoid"; import { useState } from "react"; import { readDirectory, writeFile } from "../helpers/filesys"; import { saveFileObject } from "../stores/file"; import { IFile } from "../types"; import NavFiles from "./NavFiles"; interface Props { file: IFile; active: boolean; } export default function NavFolderItem({ file, active }: Props) { const [files, setFiles] = useState ([]) const [unfold, setUnfold] = useState(false) const [loaded, setLoaded] = useState(false) const [newFile, setNewFile] = useState(false) const [filename, setFilename] = useState('') const onShow = async (ev: React.MouseEvent ) => { ev.stopPropagation() // if files/foldes are loaded, just show it if (loaded) { setUnfold(!unfold) return; } const entries = await readDirectory(file.path + '/') setLoaded(true) setFiles(entries) setUnfold(!unfold) } const onEnter = (key: string) => { if (key === 'Escape') { setNewFile(false) setFilename('') return; } if (key !== 'Enter') return; const filePath = `${file.path}/${filename}` // Create new file when Enter key pressed writeFile(filePath, '').then(() => { const id = nanoid(); const newFile: IFile = { id, name: filename, path: filePath, kind: 'file' } saveFileObject(id, newFile) setFiles(prevEntries => [newFile, ...prevEntries]) setNewFile(false) setFilename('') }) } return {file.name} setNewFile(true)} className="ri-add-line invisible group-hover:visible"> {newFile ? setFilename(ev.target.value)} onKeyUp={(ev) => onEnter(ev.key)} className="inp" /> : null} } Here is the result ! 😍 9. Displays file name on tab Time to show selected files on the tab. It's so simple, just call it contains anything we need. Now, create , it has 2 parts: a Tab and content inside. useSource src/components/CodeArea.tsx Notice that does not read image files, so we have to create another component to show it codemirror import { useRef } from "react" import { convertFileSrc } from "@tauri-apps/api/tauri" interface Props { path: string; active: boolean; } export default function PreviewImage({ path, active }: Props) { const imgRef = useRef (null) return } Then import into // src/components/CodeArea.tsx import { IFile } from "../types" import { useSource } from "../context/SourceContext" import { getFileObject } from "../stores/file" import FileIcon from "./FileIcon" import useHorizontalScroll from "../helpers/useHorizontalScroll" // will be define later import PreviewImage from "./PreviewImage" import CodeEditor from "./CodeEditor" // will be define later export default function CodeArea() { const { opened, selected, setSelect, delOpenedFile } = useSource() const scrollRef = useHorizontalScroll() const onSelectItem = (id: string) => { setSelect(id) } const isImage = (name: string) => { return ['.png', '.gif', '.jpeg', '.jpg', '.bmp'].some(ext => name.lastIndexOf(ext) !== -1) } const close = (ev: React.MouseEvent , id: string) => { ev.stopPropagation() delOpenedFile(id) } return {/** This area is for tab bar */} {opened.map(item => { const file = getFileObject(item) as IFile; const active = selected === item ? 'bg-darken text-gray-400' : '' return onSelectItem(file.id)} className={`tab-item shrink-0 px-3 py-1.5 text-gray-500 cursor-pointer hover:text-gray-400 flex items-center gap-2 ${active}`} key={item}> {file.name} close(ev, item)} className="ri-close-line hover:text-red-400"> })} {/** This area is for code content */} {opened.map(item => { const file = getFileObject(item) as IFile; if (isImage(file.name)) { return } return })} } For ease of scrolling, I wrote a hook to scroll the tab bar horizontally // src/helpers/useHorizontalScroll.ts import { useRef, useEffect } from "react" export default function useHorizontalScroll() { const ref = useRef (null) useEffect(() => { const elem = ref.current const onWheel = (ev: WheelEvent) => { if (!elem || ev.deltaY === 0) return; elem.scrollTo({ left: elem.scrollLeft + ev.deltaY, behavior: 'smooth' }) } elem && elem.addEventListener('wheel', onWheel) return () => { elem && elem.removeEventListener('wheel', onWheel) } }, []) return ref; } 10. Show up the file content Let's finish the work now // src/components/CodeEditor.tsx import { nanoid } from "nanoid"; import { useEffect, useMemo, useRef } from "react"; import { getFileObject } from "../stores/file"; import { readFile, writeFile } from "../helpers/filesys"; // these packages will be used for codemirror import { EditorView, basicSetup } from "codemirror"; // hightlight js, markdown, html, css, json, ... import { javascript } from "@codemirror/lang-javascript"; import { markdown } from "@codemirror/lang-markdown"; import { html } from "@codemirror/lang-html"; import { css } from "@codemirror/lang-css"; import { json } from "@codemirror/lang-json"; import { rust } from "@codemirror/lang-rust"; // codemirror theme in dark import { materialDark } from "cm6-theme-material-dark"; interface Props { id: string; active: boolean; } export default function CodeEditor({ id, active }: Props) { const isRendered = useRef(0) const editorId = useMemo(() => nanoid(), []) const visible = active ? '' : 'hidden' const editorRef = useRef (null) // get file metadata by id from /stores/file.ts const updateEditorContent = async (id: string) => { const file = getFileObject(id); const content = await readFile(file.path) fillContentInEditor(content) } // fill content into codemirror const fillContentInEditor = (content: string) => { const elem = document.getElementById(editorId) if (elem && isRendered.current === 0) { isRendered.current = 1; editorRef.current = new EditorView({ doc: content, extensions: [ basicSetup, javascript(), markdown(), html(), css(), json(), rust(), materialDark ], parent: elem }) } } // save the content when pressing Ctrl + S const onSave = async () => { if (!editorRef.current) return; // get codemirror's content // if any other way to get content, please let me know in the comment section const content = editorRef.current.state.doc.toString(); const file = getFileObject(id) writeFile(file.path, content) } useEffect(() => { updateEditorContent(id) }, [id]) return { if (ev.ctrlKey && ev.key === 's') { ev.preventDefault() ev.stopPropagation() onSave() } }}> } Finally, let's see our final masterpiece 🤣 Conclusion Phew, that's a long tutorial, right? However, I hope it is useful for you guys. I still leave some functions to you to complete such as: create folder and delete file. Feel free to build your own code editor. Lastly, thank you for taking the time to read the tutorial. If you have any questions, concerns, or suggestions please let me know in the comment section. Especially about , like I said, I'm new to this language rust