Profile Module Template

A customizable profile module for easy integration with module federation

Table of Contents

• Getting Started
  • Installing Dependencies
  • Running the Development Server
  • Customizing Your Profile
• Module Federation Configuration
• Theming and Styling
• Building for Production
• Deploy to Web4
• Contributing

Getting Started

Installing Dependencies

This project uses Bun as the package manager. Install the dependencies with:

bun install

Running the Development Server

Start the development server on localhost:5170:

bun run dev

The development server is configured with hot module replacement for a smooth development experience.

Customizing Your Profile

1. Open src/components/Profile.tsx to modify the main profile component.
2. Update styles in src/index.css or use Tailwind classes directly in your components.
3. Adjust the theme in tailwind.config.js to match your desired look and feel.

Module Federation Configuration

This template is set up for module federation. The configuration can be found in rsbuild.config.ts. Key points:

• The profile module is exposed as "./Profile"
• It shares dependencies with the host/"gateway"
• Feel free to install other packages and add components to the Profile, but do not modify App or bootstrap.

Building for Production

To create a production build:

bun run build

This will generate optimized files in the dist directory.

Deploy to web4

To deploy your profile to web4, make sure you have built the project, then:

1. Run the deploy script:

bun run deploy

2. Follow the prompts in the terminal:

   • Enter the network (mainnet/testnet)
   • Enter your account name (e.g., root.near)

The script will automatically:

• Create a web4 subaccount if it doesn't exist
• Deploy your profile to the web4 contract

You will be prompted to sign transactions through near-cli-rs

After successful deployment, your website will be accessible at:

• Testnet: ACCOUNT_NAME.testnet.page
• Mainnet: ACCOUNT_NAME.near.page

Contributing

We welcome contributions! Please read our contribution guide for details on our code of conduct and the process for submitting pull requests.