1fb7266469
- Introduced Aggregator.sol for Chainlink-compatible oracle functionality, including round-based updates and access control. - Added OracleWithCCIP.sol to extend Aggregator with CCIP cross-chain messaging capabilities. - Created .gitmodules to include OpenZeppelin contracts as a submodule. - Developed a comprehensive deployment guide in NEXT_STEPS_COMPLETE_GUIDE.md for Phase 2 and smart contract deployment. - Implemented Vite configuration for the orchestration portal, supporting both Vue and React frameworks. - Added server-side logic for the Multi-Cloud Orchestration Portal, including API endpoints for environment management and monitoring. - Created scripts for resource import and usage validation across non-US regions. - Added tests for CCIP error handling and integration to ensure robust functionality. - Included various new files and directories for the orchestration portal and deployment scripts.
150 lines
3.7 KiB
Markdown
150 lines
3.7 KiB
Markdown
# Frontend Setup - Vue, React & TailwindCSS
|
|
|
|
## ✅ Successfully Integrated
|
|
|
|
The orchestration portal now includes:
|
|
|
|
- ✅ **Vue.js 3.5.24** - Latest version installed
|
|
- ✅ **React 18.3.1** - Latest stable version installed
|
|
- ✅ **TailwindCSS 3.4.18** - Latest version installed
|
|
- ✅ **Vite 5.4.21** - Modern build tool
|
|
- ✅ **Vue Router 4.6.3** - Vue routing
|
|
- ✅ **React Router DOM 6.30.2** - React routing
|
|
|
|
## 📦 Installed Packages
|
|
|
|
### Production Dependencies
|
|
- `vue@^3.4.21` → **3.5.24** ✅
|
|
- `vue-router@^4.3.0` → **4.6.3** ✅
|
|
- `react@^18.3.1` → **18.3.1** ✅
|
|
- `react-dom@^18.3.1` → **18.3.1** ✅
|
|
- `react-router-dom@^6.22.3` → **6.30.2** ✅
|
|
|
|
### Development Dependencies
|
|
- `vite@^5.1.4` → **5.4.21** ✅
|
|
- `@vitejs/plugin-vue@^5.0.4` → **5.2.4** ✅
|
|
- `@vitejs/plugin-react@^4.2.1` → **4.7.0** ✅
|
|
- `tailwindcss@^3.4.1` → **3.4.18** ✅
|
|
- `autoprefixer@^10.4.18` → **10.4.22** ✅
|
|
- `postcss@^8.4.35` → **8.5.6** ✅
|
|
- `@tailwindcss/forms@^0.5.7` → **0.5.10** ✅
|
|
- `@tailwindcss/typography@^0.5.13` → **0.5.19** ✅
|
|
- `concurrently@^8.2.2` → **8.2.2** ✅
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Development
|
|
|
|
```bash
|
|
# Start both server and client
|
|
pnpm dev
|
|
|
|
# Or separately:
|
|
pnpm dev:server # Express on :5000
|
|
pnpm dev:client # Vite on :5173
|
|
```
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
# Build everything
|
|
pnpm build
|
|
|
|
# Or separately:
|
|
pnpm build:server # TypeScript compilation
|
|
pnpm build:client # Vite build
|
|
```
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
orchestration/portal/
|
|
├── client/ # Frontend application
|
|
│ ├── index.html # Entry point
|
|
│ └── src/
|
|
│ ├── main.ts # Main entry (Vue/React)
|
|
│ ├── styles/
|
|
│ │ └── main.css # TailwindCSS
|
|
│ ├── types/ # Shared types
|
|
│ ├── vue/ # Vue implementation
|
|
│ │ ├── App.vue
|
|
│ │ ├── router/
|
|
│ │ ├── views/
|
|
│ │ └── components/
|
|
│ └── react/ # React implementation
|
|
│ ├── App.tsx
|
|
│ ├── views/
|
|
│ └── components/
|
|
├── vite.config.ts # Vite config
|
|
├── tailwind.config.js # TailwindCSS config
|
|
└── postcss.config.js # PostCSS config
|
|
```
|
|
|
|
## 🎯 Framework Usage
|
|
|
|
### Vue (Default)
|
|
|
|
Currently configured to use Vue.js. The main entry point is in `client/src/main.ts`:
|
|
|
|
```typescript
|
|
import { createApp } from 'vue';
|
|
import App from './vue/App.vue';
|
|
import router from './vue/router';
|
|
import './styles/main.css';
|
|
|
|
const app = createApp(App);
|
|
app.use(router);
|
|
app.mount('#app');
|
|
```
|
|
|
|
### React (Alternative)
|
|
|
|
To switch to React, edit `client/src/main.ts` and uncomment the React code.
|
|
|
|
## 🎨 TailwindCSS
|
|
|
|
Fully configured with:
|
|
- Custom primary color palette
|
|
- Form plugin
|
|
- Typography plugin
|
|
- Responsive utilities
|
|
- Custom component classes
|
|
|
|
## 📝 Next Steps
|
|
|
|
1. **Test Development Server**:
|
|
```bash
|
|
pnpm dev:client
|
|
```
|
|
Access at: http://localhost:5173
|
|
|
|
2. **Build for Production**:
|
|
```bash
|
|
pnpm build:client
|
|
```
|
|
|
|
3. **Customize Components**:
|
|
- Edit Vue components in `client/src/vue/`
|
|
- Edit React components in `client/src/react/`
|
|
|
|
4. **Add Features**:
|
|
- Create new views
|
|
- Add components
|
|
- Style with TailwindCSS
|
|
|
|
## 🔧 Configuration Files
|
|
|
|
- `vite.config.ts` - Vite build configuration
|
|
- `tailwind.config.js` - TailwindCSS theme and plugins
|
|
- `postcss.config.js` - PostCSS processing
|
|
- `tsconfig.client.json` - TypeScript config for client
|
|
|
|
## 📚 Documentation
|
|
|
|
See [FRONTEND_SETUP.md](FRONTEND_SETUP.md) for complete setup guide.
|
|
|
|
---
|
|
|
|
**Status**: ✅ Vue, React, and TailwindCSS installed and configured!
|
|
|