add React example

fluent-ci-templates · Jul 31, 2024 · 2233bba · 2233bba
1 parent 3721abb
commit 2233bba
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/examples/stacks/laravel.mdx b/docs/examples/stacks/laravel.mdx
@@ -22,12 +22,12 @@ import CodeBlock from "@theme/CodeBlock";
 <Tabs>
   <TabItem value="dagger" label="Dagger">
     <CodeBlock language="bash">
-      {`fluentci run laravel test`}
+      {`fluentci init -t laravel`}
     </CodeBlock>
   </TabItem>
   <TabItem value="wasm" label="Wasm">
     <CodeBlock language="bash">
-      {`fluentci run --wasm laravel test`}
+      {`fluentci init --wasm -t laravel`}
 
 </CodeBlock>
 </TabItem>

diff --git a/docs/examples/stacks/react.mdx b/docs/examples/stacks/react.mdx
@@ -0,0 +1,155 @@
+---
+sidebar_position: 3
+title: React
+---
+
+## Running the pre-built Bun Plugin to build your React app
+
+To build your React app, you can use the pre-built Bun Plugin or Node.js Plugin.
+You don't need to install any dependencies, just run the following command directly:
+
+```bash
+fluentci run --wasm bun run build
+```
+
+## Add Bun Pipeline to your project
+
+Run the following command to add a Bun pipeline to your React project:
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+<Tabs>
+  <TabItem value="dagger" label="Dagger">
+    <CodeBlock language="bash">
+      {`fluentci init -t bun`}
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="wasm" label="Wasm">
+    <CodeBlock language="bash">
+      {`fluentci init --wasm -t bun`}
+
+</CodeBlock>
+</TabItem>
+</Tabs>
+
+This will create a `.fluentci` directory in your project, feel free to customize the pipeline for your needs.
+
+## CI/CD Platforms
+
+The following example shows how to use the Bun plugin to build a React app in different CI/CD Platforms:
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+<Tabs>
+  <TabItem value="gha" label="Github Actions">
+    <CodeBlock language="yaml" title="ci.yml">
+      {`name: ci
+on:
+  push:
+    branches:
+      - main
+jobs:
+  tasks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Fluent CI
+        uses: fluentci-io/setup-fluentci@v5
+      - name: Build 
+        run: fluentci run --wasm bun run build
+`}
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="gitlab" label="GitLab CI">
+    <CodeBlock language="yaml" title=".gitlab-ci.yml">
+      {`
+.docker:
+  image: denoland/deno:debian-1.42.4
+  services:
+    - docker:\${DOCKER_VERSION}-dind
+  variables:
+    DOCKER_HOST: tcp://docker:2376
+    DOCKER_TLS_VERIFY: "1"
+    DOCKER_TLS_CERTDIR: /certs
+    DOCKER_CERT_PATH: /certs/client
+    DOCKER_DRIVER: overlay2
+    DOCKER_VERSION: 20.10.16
+    GITLAB_ACCESS_TOKEN: $GITLAB_ACCESS_TOKEN
+.fluentci:
+  extends: .docker
+  before_script:
+    - apt-get update
+    - apt-get install -y curl tar gzip ca-certificates openssl git unzip libncursesw6
+    - deno install -A -r https://cli.fluentci.io -n fluentci 
+    - fluentci --version 
+    - curl -L https://dl.dagger.io/dagger/install.sh | DAGGER_VERSION=0.12.3 sh 
+    - mv bin/dagger /usr/local/bin 
+    - dagger version
+build:
+  extends: .fluentci
+  script: - fluentci run --wasm bun run build
+`}
+
+</CodeBlock>
+</TabItem>
+<TabItem value="circleci" label="Circle CI">
+<CodeBlock language="yaml" title=".circleci/config.yml">
+{`version: 2.1
+jobs:
+  job:
+    steps:
+      - checkout
+      - run: |
+          sudo apt-get update && sudo apt-get install -y curl unzip
+          curl -fsSL https://cli.fluentci.io | bash
+          fluentci --version
+        name: Setup FluentCI
+      - run: fluentci run --wasm bun run build
+        name: Run build
+    machine:
+      image: ubuntu-2004:2023.07.1
+workflows:
+  fluentci:
+    jobs:
+      - job
+`}
+</CodeBlock>
+</TabItem>
+<TabItem value="azure" label="Azure Pipelines">
+<CodeBlock language="yaml" title="azure-pipelines.yml">
+{`trigger:
+  - main
+pool:
+  vmImage: ubuntu-latest
+steps:
+  - script: |
+      curl -fsSL https://cli.fluentci.io | bash
+      fluentci --version
+      echo "##vso[task.prependpath]\${HOME}/.deno/bin
+    displayName: Setup FluentCI
+  - script: fluentci run --wasm bun run build
+    displayName: Run build
+`}
+</CodeBlock>
+</TabItem>
+<TabItem value="aws" label="AWS CodePipeline">
+<CodeBlock language="yaml" title="buildspec.yml">
+{`version: 0.2
+phases:
+  install:
+    commands:
+      - curl -fsSL https://cli.fluentci.io | bash
+      - fluentci --version
+  build:
+    commands:
+      - fluentci run --wasm bun run build
+  post_build:
+    commands:
+      - echo Build completed on \`date\`
+    `}
+</CodeBlock>
+</TabItem>
+</Tabs>