https://github.com/abelljs/integrations

A repository to show how you can integrate Abell with your favorite frameworks, libraries, tools
https://github.com/abelljs/integrations

Last synced: 6 days ago
JSON representation

A repository to show how you can integrate Abell with your favorite frameworks, libraries, tools

• Host: GitHub
• URL: https://github.com/abelljs/integrations
• Owner: abelljs
• License: mit
• Created: 2023-09-13T15:44:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-29T18:47:59.000Z (about 1 year ago)
• Last Synced: 2024-10-29T21:48:51.958Z (17 days ago)
• Language: CSS
• Size: 175 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Abell Integrations Repository

A repository to show how you can integrate Abell with your favorite frameworks, libraries, tools 

## How to Integrate with Framework of your choice

If your framework's integration example already exists in this repo, you can check it out directly.

If you want to understand how abell integrates with frameworks, you can checkout the steps below. 

1. Install Abell

  ```sh

  npm install --save-dev abell@latest

  ```

2. Change "scripts" in package.json to abell scripts

  ```js

  "scripts": {

    "dev": "abell dev",

    "build": "abell generate"

  }

  ```

3. Turn index.html file of framework to index.abell (Now you can do dynamic things in your HTML  🚀)

4. Add Vite plugin of that framework (E.g. for react its `@vitejs/plugin-react`) Make sure to enable it's SSR configuration if it has any.

5. Add your framework's SSR function (called `renderToString` in most frameworks) in index.abell.

  Checkout [React's Example](./with-react/index.abell)

6. Turn your render call in client-side file to hydrate.