Skip to content

Starter project for Vite + SvelteKit + TypeScript + Motoko + Internet Identity + PocketIC

Notifications You must be signed in to change notification settings

letmejustputthishere/vite-sveltekit-motoko-ii

 
 

Repository files navigation

Vite + SvelteKit + Motoko + PicJS + Internet Identity + Mops

Get started directly:

Warning

Due to current limitations, this template does not work in a Browser Editor when using gitpod or codespaces. Please use VS Code for desktop instead. Screenshot 2024-01-29 at 12 44 57

Open in Gitpod

Open in GitHub Codespaces

This template gives you everything you need to build a full-stack Web3 application on the Internet Computer.

For an example of a real-world dapp built using this starter project, check out the source code for the ICRC-7 launchpad.

📦 Create a New Project

Make sure that Node.js >= 20, mops >=1.0.0 and dfx >= 0.23.0 are installed on your system.

Run the following commands in a new, empty project directory:

npx degit letmejustputthishere/vite-sveltekit-motoko vite-sveltekit-motoko # Download this starter project
cd vite-sveltekit-motoko # Navigate to the project directory
dfx start --clean --background # Run dfx in the background
npm install # Install packages and deploy canisters

npm start # Start the development server

When ready, run dfx deploy --network ic to deploy your application to the Internet Computer.

🛠️ Technology Stack

  • Vite: high-performance tooling for front-end web development
  • SvelteKit: a component-based UI library
  • TypeScript: JavaScript extended with syntax for types
  • Sass: an extended syntax for CSS stylesheets
  • Prettier: code formatting for a wide range of supported languages
  • Motoko: a safe and simple programming language for the Internet Computer
  • Mops: an on-chain community package manager for Motoko
  • mo-dev: a live reload development server for Motoko
  • eslint: a static code analysis tool used in software development for identifying problematic patterns or code that doesn't adhere to certain style guidelines in JavaScript and TypeScript
  • Internet Identity: a decentralized identity provider for the Internet Computer
  • pic.js: an Internet Computer Protocol canister testing library for TypeScript and JavaScript

🧪 Testing

You can run npm run test to run unit tests using mops test and end-to-end tests using pic.js.

📚 Documentation

💡 Tips and Tricks

  • Customize your project's code style by editing the .prettierrc file and then running npm run format.
  • Reduce the latency of update calls by passing the --emulator flag to dfx start.
  • Install a Motoko package by running mops add <package-name>. Here is a list of available packages.
  • Split your frontend and backend console output by running npm run frontend and npm run backend in separate terminals.

About

Starter project for Vite + SvelteKit + TypeScript + Motoko + Internet Identity + PocketIC

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Svelte 40.3%
  • TypeScript 38.1%
  • JavaScript 8.4%
  • SCSS 7.7%
  • Motoko 2.4%
  • HTML 2.3%
  • Dockerfile 0.8%