near-vite-starter

Near + Vite + TypeScript + Tanstack + Tailwind + Playwright

Table of Contents

• Getting Started
  • Installing dependencies
  • Running the app
  • Building for production
  • Running tests
• Learn more about NEAR
• Ethereum wallet login
• Preparing for production
• Deploy to web4
• Contributing

This project a Vite app bootstrapped with @near-js/client, @tanstack/react-router, and @tanstack/react-query. It uses tailwind for styling, shadcn components, and offers a playwright suite for testing.

To easily add more components, browse the shadcn catalog and follow its installation guide. You can also easily generate themes through tools like this one, and copy and paste your colors into the input.css.

Getting Started

Installing dependencies

pnpm install

Running the app

First, run the development server:

pnpm run dev

Building for production

pnpm run build

Running tests

pnpm run test

Load shadcn component

pnpm dlx shadcn@latest add <component-name>

See the full testing guide.

Learn more about NEAR

To learn more about NEAR, take a look at the following resources:

• NEAR Developer Portal - homebase for near developers.
• NEAR Documentation - learn about NEAR.
• Frontend Docs - learn about this example.

You can check out the NEAR repository - your feedback and contributions are welcome!

Ethereum wallet login

If developing in testnet and logging in with an Ethereum wallet, you will need to top up the created EVM wallet on NEAR Testnet. Go to Aurora's NEAR wallet playground, switch to the chain, connect to Metamask and load accounts, then Add funds.

Note that you should also modify the Project IDs in ethereum-wallet for the REOWN_PROJECT_ID.

Preparing for production

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

Deploy to web4

1. Build the project

pnpm run build

2. Create a web4 subaccount of your master account (this will be your domain).

near account create-account fund-myself web4.MASTER_ACCOUNT.testnet '1 NEAR' autogenerate-new-keypair save-to-keychain sign-as MASTER_ACCOUNT.testnet network-config testnet sign-with-keychain send

Be sure to "Store the access key in legacy keychain"!

3. Run web4-deploy to upload production bundle to nearfs and deploy it to a minimum-web4 contract to your account.

npx github:vgrichina/web4-deploy dist web4.MASTER_ACCOUNT.testnet --deploy-contract --nearfs

Deploy should be accessible and your website accessible at

testnet: MASTER_ACCOUNT.testnet.page

mainnet: MASTER_ACCOUNT.near.page

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you're interested in contributing to this project, please read the contribution guide.