Inside that directory, it will generate the initial project structure and install the transitive dependencies: ``` my-app ├── README.md ├── .gitignore ├── Cargo.toml ├── index.html ├── LICENSE-APACHE ├── LICENSE-MIT ├── tailwind.config.js ├── tailwind.css ├── Trunk.toml ├── public │ ├── favicon.ico │ ├── logo.svg └── src ├── lib.rs ├── main.rs ├── app │ ├── about.rs │ ├── home.rs │ └── mod.rs └── components ├── nav.rs └── mod.rs ``` No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder: ```sh cd my-app ``` Inside the newly created project, you can run some built-in commands: ### `trunk serve` Runs the app in development mode.
Open [http://localhost:8080](http://localhost:8080) to view it in the browser. The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console. ### `trunk build` Builds the app for production to the `dist` folder.
It correctly bundles Yew in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
Your app is ready to be deployed. ### `wasm-pack test --headless --chrome` Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit. # Contributing Feel free to take a look at the current issues in this repo for anything that currently needs to be worked on. You are also welcome to open a PR or a new issue if you see something is missing or could be improved upon. # License Apache License (Version 2.0) See [LICENSE](./LICENSE) for details. ================================================ FILE: crates/yew-app/.gitignore ================================================ # Generated by Cargo # will have compiled files and executables /target/ # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html Cargo.lock # These are backup files generated by rustfmt **/*.rs.bk # JS node_modules /dist /pkg /wasm-pack.log .cache ================================================ FILE: crates/yew-app/Cargo.toml ================================================ [package] authors = ["You
{ "Create Yew App" } { ", Set up a modern yew web app by running one command." }
{ if state.loading { html! { "Loading, wait a sec..." } } else { html! {} } }
{ if let Some(repo) = &state.data { html! { <>{ "Repo name: " }{ &repo.name }
{ "Repo full name: " }{ &repo.full_name }
{ "Repo description: " }{ &repo.description }
} } else { html! {} } }{ if let Some(error) = &state.error { match error { Error::DeserializeError => html! { "DeserializeError" }, Error::RequestError => html! { "RequestError" }, } } else { html! {} } }
{ "Edit " } { "src/app/about.rs" } { " and save to reload." }
{ *counter }
{ "Edit " } { "src/app/home.rs" } { " and save to reload." }
Please refer to its documentation: - [Quick Overview](https://github.com/jetli/create-yew-app#quick-overview) – How to create a new app. - [Creating an App](https://github.com/jetli/create-yew-app#creating-an-app) – How to develop apps bootstrapped with Create Yew App. ## Getting Started ### Install Rust wasm target ```sh rustup target add wasm32-unknown-unknown ``` ### Install [Trunk](https://trunkrs.dev) ### Creating an App ```sh npx create-yew-app my-app cd my-app trunk serve ``` Then open [http://localhost:8080/](http://localhost:8080/) to see your app.
When you’re ready to deploy to production, create a minified bundle with `trunk build`. ================================================ FILE: packages/create-yew-app/createYewApp.js ================================================ #!/usr/bin/env node 'use strict'; const { execSync } = require("child_process"); const spawn = require('cross-spawn'); const chalk = require('chalk'); const fs = require("fs"); const path = require("path"); const cpr = require("cpr"); const rimraf = require("rimraf"); // Check if a tool is present. function isPresent(dep) { try { execSync(dep, {stdio: 'ignore'}); return true; } catch (err) { return false; } } // Run a tool function run(cmd, args, opts) { const output = spawn.sync(cmd, args, opts); if (output.error != null) { throw output.error; } if (output.status !== 0) { throw new Error("Bad error code when running `" + cmd + " " + args.join(" ") + "`: " + output.status); } } // Check required tools if (!isPresent("git --version")) { console.log('\n git is required, see: https://git-scm.com/downloads'); process.exit(1); } if (!isPresent("cargo --version")) { console.log('\n Rust/Cargo is required, see: https://www.rust-lang.org/tools/install'); process.exit(1); } if (!isPresent("trunk --version")) { console.log('\n Trunk is required, see: https://trunkrs.dev'); process.exit(1); } const args = process.argv.slice(2); let folderName = '.'; // Make a dir for the app if (args.length >= 1) { folderName = args[0]; if (!fs.existsSync(folderName)) { fs.mkdirSync(folderName); } } let rootFolder = path.resolve(folderName); let gitFolder = path.join(folderName, ".git-clone"); console.log(); console.log(` Creating a new Yew app in ${chalk.green(rootFolder)}. `); console.log(); // This uses --no-tags and --depth 1 in order to make the cloning faster run("git", ["clone", "--no-tags", "--depth", "1", "https://github.com/jetli/create-yew-app.git", gitFolder]); // Copies the yew-app folder cpr(path.join(gitFolder, "crates/yew-app"), folderName, {}, function (err, files) { // Removes the git folder regardless of whether cpr succeeded or not rimraf.sync(gitFolder); if (err) { throw err; } else { console.log(" 🦀 Rust + 🕸 WebAssembly + Yew = ❤️ "); console.log(); console.log(" Installing dependencies... "); // Install wasm-pack if (!isPresent("wasm-pack --version")) { run("cargo", ["install", "wasm-pack"]); } console.log(" Installed dependencies ✅ "); console.log(); // Git init run("git", ["init"], { cwd: folderName, stdio: 'ignore' }); console.log(" Initialized a git repository ✅ "); console.log(); console.log(` Success! 🎉 Created ${folderName} at ${chalk.green(rootFolder)}`); console.log(' Inside that directory, you can run several commands:'); console.log(); console.log(chalk.cyan(' trunk serve')); console.log(' Starts the development server.'); console.log(); console.log(chalk.cyan(' trunk build')); console.log(' Bundles the app into static files for production.'); console.log(); console.log(chalk.cyan(' wasm-pack test --headless --chrome')); console.log(' Starts the test runner.'); console.log(); console.log(' We suggest that you begin by typing:'); console.log(); console.log(chalk.cyan(' cd'), folderName); console.log(chalk.cyan(' trunk serve')); console.log(); console.log(' Happy hacking! 😎 '); console.log(); } }); ================================================ FILE: packages/create-yew-app/index.js ================================================ #!/usr/bin/env node 'use strict'; var currentNodeVersion = process.versions.node; var semver = currentNodeVersion.split('.'); var major = semver[0]; if (major < 8) { console.error( 'You are running Node ' + currentNodeVersion + '.\n' + 'Create React App requires Node 8 or higher. \n' + 'Please update your version of Node.' ); process.exit(1); } require('./createYewApp'); ================================================ FILE: packages/create-yew-app/package.json ================================================ { "name": "create-yew-app", "version": "0.2.0", "description": "Set up a modern Yew web app by running one command. ", "bin": { "create-yew-app": "./index.js" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/jetli/create-yew-app.git", "directory": "packages/create-yew-app" }, "files": [ "index.js", "createYewApp.js" ], "keywords": [ "yew", "create-yew-app", "wasm", "webassembly", "wasm-bindgen", "wasm-pack", "rust" ], "author": "Jet Li