Live Coding Di Browser Sendiri

Dalam artikel ini kita akan belajar bagaimana cara membuat live editor untuk ngoding di browser yang kita sendiri.

2 min read

Published on 12 Oct, 2022 (updated: 20 Oct, 2022)

Written by Irsyad A. Panjaitan

Fill in React.jsPackage

ArticlesLive Coding Di Browser Sendiri

Mungkin sebelumnya Anda sering menggunakan yang namanya CodeSandbox, CodePen, dan lain semacam nya. Tetapi, bagaimana jika kita belajar bagaimana cara membuat nya.

Sandpack

Sandpack adalah React komponen yang memberikan semacam wrapper yang dapat diedit dan berjalan di browser kita sendiri. Sandpack ini sendiri dibangun oleh CodeSanbox, maka oleh karena itu, Sandpack ini juga mengizinkan kita untuk menggunakan / embed komponen yang pernah kita buat di CodeSanbox ke dalam aplikasi kita.

Mari Kita Mulai

Karena sandpack adalah komponen react, maka kita akan install react terlebih dahulu. Untuk case ini, saya akan menggunakan Vite.js, buka terminal Anda dan jalankan perintah berikut ini:

npm create [email protected] sandpak -- --template react
bashCopy

Setelah itu, buka folder nya dari terminal kita dengan melakukan cd sandpack. Kemudian kita akan langsung sandpack nya dengan perintah seperti ini:

npm i @codesandbox/sandpack-react
bashCopy

Setelah itu, buka project ini di browser Anda, dan buka file App.jsx. Kemudian, masukkan sandpack di komponen ini seperti:

import React from 'react'; import { Sandpack } from '@codesandbox/sandpack-react'; export default function App(props) { return ( <div className='p-10'> <Sandpack theme="dark" template="react" /> </div> ); }
jsxCopy

Template

Untuk template, Anda bisa pilih sesuai yang telah diberikannya. Berikut adalah list dari template nya:

# ✓ react-ts # ✓ angular # ✓ vue # ✓ vue3 # ✓ vanilla-ts # ✓ vanilla <Sandpack template="angular" />
jsxCopy

Tema

Untuk temanya, tentu Anda bisa ganti menggunakan "dark" / "light", tetapi sepertinya Anda ingin lebih, Anda mungkin berfikir entah ingin memakai github, atau pun monokaiPro. Baik, untuk melakukan itu, kita bisa install daftar tema untuk sandpack nya.

Buka terminal Anda kemali, dan instal tema nya dengan perintah berikut ini:

npm i @codesandbox/sandpack-themes
bashCopy

Kemudian untuk menggunakannya, kita akan import dia seperti:

import { Sandpack } from '@codesandbox/sandpack-react'; import { monokaiPro } from '@codesandbox/sandpack-themes'; ... ... <Sandpack theme={monokaiPro} template="react" />
jsxCopy

Untuk temanya dari sanpack-themes itu ada 11, mungkin nanti diperbarui lagi. Untuk saat ini, berikut ini adalah list yang bisa dipakai.

✓ aquaBlue ✓ atomDark ✓ cobalt2 ✓ dracula ✓ ecoLight ✓ freeCodeCampDark ✓ githubLight ✓ levelUp ✓ monokaiPro ✓ nightOwl ✓ sandpackDark
jsxCopy

Jangan lupa import untuk memakai temanya seperti:

import { sandpackDark } from '@codesandbox/sandpack-themes';
jsxCopy

Custom UI

Mungkin Anda berfikir, jika tampilan yang diberikan kurang mantap, dan memang bisa saja ingin mengganti posisinya, untuk melakukan itu Anda bisa melakukannya pada props options.

<Sandpack template='react' theme={monokaiPro} options={{ showNavigator: true, showTabs: true, closableTabs: true, showLineNumbers: true, showInlineErrors: true, wrapContent: true, editorHeight: 590, editorWidthPercentage: 60 }} />
jsxCopy

Custon Dependencies

Jika Anda berfikir ingin memakai custom dependencies seperti misalnya react-spring, maka Anda bisa melakukannya seperti:

<Sandpack template="react" customSetup={{ dependencies: { "react-spring": "9.5.5", "react-scripts": "4.0.0", }, }} />
jsxCopy

Semoga informasi ini bermanfaat untuk Anda, dan jangan lupa untuk mempelajari Sanpack ini lebih dalam lagi dengan mengunjungi langsung disini. Saya Irsyad, dan saya akan melihat Anda lagi di artikel selanjutnya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
3

Share on