Starter Template
The quickest way to bootstrap a new Xocialive frontend app is to clone the official starter template repository. It comes pre-wired with routing, i18n, Redux, MUI theming, and a sample CRUD module so you can start building features immediately.
Repository
What's included
xocialive-starter-template/
├── src/
│ ├── App.tsx # Root component
│ ├── main.tsx # Entry point with AppProvider
│ ├── data/
│ │ └── menuItems.tsx # Sidebar navigation items
│ ├── hooks/ # Typed Redux hooks
│ ├── layout/
│ │ └── AppLayout.tsx # Shell with Header + Sidebar
│ ├── locales/
│ │ ├── ar/ar.json # Arabic translations
│ │ └── en/en.json # English translations
│ ├── modules/
│ │ └── items/ # Sample CRUD module
│ ├── pages/ # Route-level page components
│ ├── routes/ # React Router v7 route tree
│ ├── store/ # Redux Toolkit store + slices
│ ├── styles/global.css # Global baseline styles
│ ├── types/ # Shared TypeScript types
│ └── utils/i18n.ts # i18next configuration
├── .npmrc # Pre-configured Azure Artifacts feed
├── .prettierrc.js
├── eslint.config.js
├── tsconfig.json
└── vite.config.ts
Setup
1. Clone the repository
git clone https://dev.azure.com/XocialiveProjects/Xocialive-Assets/_git/X4Reports.UI my-app
cd my-app
2. Configure authentication
The template ships with a pre-configured .npmrc that points to the private Azure Artifacts feed. You only need to fill in your Personal Access Token (PAT).
Open .npmrc and replace the _password placeholder with your Base64-encoded PAT:
//pkgs.dev.azure.com/XocialiveProjects/Xocialive-Assets/_packaging/XOC-UI-Components/npm/registry/:_password=[BASE64_ENCODED_PAT]
Encode your PAT:
# Linux / macOS
echo -n ":<YOUR_PAT>" | base64
# Windows PowerShell
[Convert]::ToBase64String([System.Text.Encoding]::UTF8.GetBytes(":<YOUR_PAT>"))
See Installation for full details on obtaining a PAT.
3. Install dependencies
pnpm install
4. Start the development server
pnpm dev
The app will be available at http://localhost:5173 by default.
Available scripts
| Script | Description |
|---|---|
pnpm dev | Start Vite dev server |
pnpm build | Production build with type-check |
pnpm preview | Preview production build on port 3000 |
pnpm lint | ESLint with auto-fix |
pnpm format | Prettier formatting |
pnpm type-check | TypeScript check without emit |
Next steps
- App Setup — Understand how
AppProviderwires everything together - Theme System — Customize colors, fonts, and layout
- RTL / i18n — Enable Arabic or other RTL languages