From 997c6562d3b615101e51ec342ac8a10f6f67de2d Mon Sep 17 00:00:00 2001 From: Bartosz Cylwik <52455076+juujisai@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:32:13 +0100 Subject: [PATCH] Add bun instructions (#2175) * Add Vite with Bun section to Quick Start page * Change npx for bunx in Vite with Bun guide section --- .../getting-started/quick-start/index-ss.html | 3 + .../getting-started/quick-start/index.html | 334 +++++++++++++++++- 2 files changed, 336 insertions(+), 1 deletion(-) diff --git a/site/content/docs/standard/getting-started/quick-start/index-ss.html b/site/content/docs/standard/getting-started/quick-start/index-ss.html index bcb947877..3be25a434 100644 --- a/site/content/docs/standard/getting-started/quick-start/index-ss.html +++ b/site/content/docs/standard/getting-started/quick-start/index-ss.html @@ -7,6 +7,9 @@
  • NPM
  • MDB GO / CLI
  • Vite
    • +
  • + Vite with Bun +
  • CDN
  • Starter (.zip) diff --git a/site/content/docs/standard/getting-started/quick-start/index.html b/site/content/docs/standard/getting-started/quick-start/index.html index 1d176e95d..00a1366a8 100644 --- a/site/content/docs/standard/getting-started/quick-start/index.html +++ b/site/content/docs/standard/getting-started/quick-start/index.html @@ -328,7 +328,7 @@

    How to use the initTE method?

    + data-te-spy-item> Vite

    @@ -650,6 +650,338 @@
    Third slide label
    +
    +
    +

    + Vite with Bun +

    + +

    + Bun is a tool that is designed to replace Node.js in the development of + web applications. The main goal of Bun is to reduce the startup times and + memory usage of created apps. Vite works with a Bun out of the box. + TW Elements can be imported in Vite applications according to the + following procedure: +

    +
    +
    + +

    + 1. Make sure to have the + Bun + installed. You can run the following command to check whether Bun is working + properly: +

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}} + bun --version + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + If the console is showing the version of Bun it means that the installation + was successful and you can proceed to the next step. +

    + +

    + 2. Create a new vite project and enter the newly created directory. Pick + Vanilla framework and JavaScript variant. +

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}} + bun create vite my-project + cd my-project + bun install + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 3. Install tailwind CSS and its dependencies. After that, + init the tailwind with the Tailwind CLI tool to create + tailwind.config.js file. +

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}} + bun install -D tailwindcss postcss autoprefixer + bunx tailwindcss init -p + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 4. Add the Tailwind directives to your style.css file to be able + to use Tailwind classes on your website. +

    + +
    + + {{< twsnippet/wrapper "style.css" "" "mobile" >}}{{< twsnippet/code active=true lang="css" >}} + @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"); + @tailwind base; + + @layer base { + html { + @apply text-neutral-800; + } + html.dark { + @apply text-neutral-50; + @apply bg-neutral-800; + } + } + + @tailwind components; + @tailwind utilities; + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 5. Link the css file inside the output.html. We are linking the + output.html file instead of the style.css because + thats where the tailwindcss CLI is going to add the styling classes. +

    + +
    + {{< twsnippet/wrapper "index.html" "" "mobile" >}}{{< twsnippet/code active=true lang="HTML" >}} + + ... + + ... + + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    6. Install the tw-elements package.

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}} + bun install tw-elements + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 7. Add js files patterns that loads dynamic component classes to the content + array inside the tailwind.config.js. Extend the default tailwind + classes by adding the TW elements plugin. +

    + +
    + + {{< twsnippet/wrapper "tailwind.config.js" "" "mobile" >}}{{< twsnippet/code active=true lang="js" >}} + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: [ + "./index.html", + "./src/**/*.{html,js}", + "./node_modules/tw-elements/dist/js/**/*.js", + ], + plugins: [require("tw-elements/dist/plugin.cjs")], + darkMode: "class" + }; + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 8. Build the output.css file with use of the tailwindcss CLI. You + can also add this command to the package.json file to make it + easier to use. +

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="plaintext" type="terminal" >}} + bunx tailwindcss -i ./style.css -o ./output.css --watch + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 9. Now you can start working on your app. Copy the code bellow to add a + carousel component to your app. Don't forget to call the + initTE method. +

    + +
    + {{< twsnippet/wrapper "index.html,main.js" "" "mobile" >}} + {{< twsnippet/code active=true lang="html" >}} + +
    +
    + + + +
    +
    +
    + ... + +
    + + +
    + + +
    + + + + {{< /twsnippet/code >}} + + {{< twsnippet/code lang="js" >}} + import { Carousel, initTE } from "tw-elements"; + initTE({ Carousel }, true ); // set second parameter to true if you want to use a debugger + {{< /twsnippet/code >}} + {{< /twsnippet/wrapper >}} +
    + +

    + 10. Update the scripts inside the package.json file so that the + development server can be started using bunx instead of + node. You can do the same with the build script. +

    + +
    + + {{< twsnippet/wrapper "package.json" "" "mobile" >}}{{< twsnippet/code active=true lang="json" >}} + "scripts": { + "dev": "bunx --bun vite", + "build": "bunx --bun vite build", + }, + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +

    + 11. Tailwind should be connected properly to the vite app with Bun. +

    + +
    + + {{< twsnippet/wrapper "terminal" "" "mobile" >}}{{< twsnippet/code active=true lang="Plaintext" type="terminal" >}} + bun run dev + {{< /twsnippet/code >}}{{< /twsnippet/wrapper >}} +
    + +
    +