-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
28 lines (27 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Installation | Marko</title><link rel=icon type=image/png sizes=32x32 href=/assets/d78b83f1.png><meta name=viewport content="width=device-width, initial-scale=1"><meta name=description content="Marko is a friendly (and fast!) UI library that makes building web apps fun."><script>
if (window.self !== window.top) {
document.documentElement.classList.add("iframe");
}
</script><script>
const params = new URL(window.location).searchParams;
const uwu = params.has("uwu")
? params.get("uwu") !== "false"
: localStorage.uwu;
if (uwu) {
localStorage.uwu = true;
document.documentElement.className = "uwu";
document.write(
"<style>@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');html.uwu body{font-family:'Varela Round',sans-serif;}</style>",
);
} else {
delete localStorage.uwu;
}
</script><script src="/assets/121.6fc1b285.js" async></script><script src="/assets/364.f6733859.js" async></script><script src="/assets/991.5eec5c73.js" async></script><link rel="stylesheet" href="/assets/a50c84bf.css"></head><body class=docs><a href="#main" id=skip-link>Skip to main content</a><!--M#s0-1-0-14--><header data-marko-key="@header s0-1-0-14" class=site-header><div class=content><a href="/"><img src=/assets/91bc26e5.svg alt="Marko Home" class=site-logo><img src=/assets/2371441a.png alt="Marko Home" class=site-logo-uwu></a><div class=stuff><nav class=site-menu><a href=/docs/getting-started>Docs</a><a href=/try-online>Try Online</a><a href=https://github.com/marko-js/marko>GitHub</a><!--M^s0-1-0-14-12 s0-1-0-14 12--><link rel=preconnect href=https://GB0QQV5RQM-dsn.algolia.net crossorigin><div data-marko-key="@container s0-1-0-14-12" class=search></div><!--M/--></nav><button data-marko='{"onclick":"toggleMenu s0-1-0-14 false"}' class=menu>☰</button></div></div></header><!--M/--><!--M#s0-1-0-15--><div data-marko-key="@sidebar s0-1-0-15" class=doc-sidebar><button data-marko='{"onclick":"hide s0-1-0-15 false"}' class=close>✕</button><h1>Marko <!--M^s0-1-0-15-9 s0-1-0-15 9--><select data-marko='{"onchange":"switchVersion s0-1-0-15-9 false"}' data-marko-key="@version s0-1-0-15-9"><option value=/v6/docs/setup>next</option><option value=/docs/getting-started selected>5.37.27</option><option value="http://marko-v4.github.io/docs/">4.x</option><option value="http://v3.markojs.com/docs/">3.x</option><option value="http://marko-v2.github.io/docs/">2.x</option></select><!--M/--></h1><ul class=toc-level0><li class=section><a href="/docs/guides-overview/">GUIDES</a></li><li><a class=selected href="/docs/installing/">Installing</a></li><li><a href="/docs/getting-started/">Getting started</a></li><li><a href="/docs/conditionals-and-lists/">Conditionals and lists</a></li><li><a href="/docs/custom-tags/">Custom tags</a></li><li><a href="/docs/state/">State</a></li><li><a href="/docs/styles/">Styles</a></li><li><a href="/docs/events/">Events</a></li><li><a href="/docs/body-content/">Body content</a></li><li><a href="/docs/typescript/">TypeScript</a></li><li><a href="/docs/marko-5-upgrade/">Marko 5 upgrade</a></li><li><a href="/docs/troubleshooting-streaming/">Troubleshooting Streaming</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tutorials-overview/">TUTORIALS</a></li><li><a href="/docs/color-picker/">Color Picker</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/reference-overview/">REFERENCE</a></li><li><a href="/docs/rendering/">Rendering</a></li><li><a href="/docs/syntax/">Syntax</a></li><li><a href="/docs/core-tags/">Core tags</a></li><li><a href="/docs/class-components/">Class components</a></li><li><a href="/docs/marko-json/">marko.json</a></li><li><a href="/docs/compiler/">Compiler</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/bundler-integrations-overview/">BUNDLER INTEGRATIONS</a></li><li><a href="/docs/vite/">Vite</a></li><li><a href="/docs/webpack/">Webpack</a></li><li><a href="/docs/rollup/">Rollup</a></li><li><a href="/docs/lasso/">Lasso</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/server-integrations-overview/">SERVER INTEGRATIONS</a></li><li><a href="/docs/cloudflare-workers/">Cloudflare Workers</a></li><li><a href="/docs/express/">Express</a></li><li><a href="/docs/fastify/">Fastify</a></li><li><a href="/docs/koa/">Koa</a></li><li><a href="/docs/http/">HTTP</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tooling-overview/">TOOLING</a></li><li><a href="/docs/editor-plugins/">Editor plugins</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/articles-overview/">ARTICLES</a></li><li><a href="/docs/marko-vs-react/">Marko vs React</a></li><li><a href="/docs/why-is-marko-fast/">Why is Marko Fast</a></li><li><a href="/docs/10-awesome-marko-features/">10 Awesome Marko Features</a></li></ul></div><!--M/--><main id=main tabindex=-1 class=content><div class=doc-layout><div class=doc-container><div class=doc-content><h1 id=installation><a name=installation class=anchor href=#installation><span class=header-link></span></a>Installation</h1><h2 id=trying-out-marko><a name=trying-out-marko class=anchor href=#trying-out-marko><span class=header-link></span></a>Trying out Marko</h2><p>If you just want to play around with Marko in the browser, head on over to our <a href=/try-online>Try Online</a> feature. You'll be able to develop a Marko application right in your browser.</p><h2 id=creating-new-apps-recommended><a name=creating-new-apps-recommended class=anchor href=#creating-new-apps-recommended><span class=header-link></span></a>Creating new apps (Recommended)</h2><p>If you're starting from scratch, you can use Marko's <a href=https://github.com/marko-js/cli>CLI</a> commands to quickly create a starter app:</p><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><pre class=highlighted style=color:#D0D0E0;background-color:#202034>npm init marko
</pre><p>This will use an interactive <a href=https://github.com/marko-js/cli>CLI</a> to automatically create a project for you using the pre-made starter template of your choosing. The <code>basic</code> template is the most minimal and the easiest way to get started. It uses our recommended app framework <a href=https://github.com/marko-js/run>Marko Run</a> that handles building, bundling, and serving your web application. These projects are config-free with built-in file based routing and automatic code reloading.</p><h2 id=custom-bundling><a name=custom-bundling class=anchor href=#custom-bundling><span class=header-link></span></a>Custom Bundling</h2><p>Marko relies on JavaScript bundlers to package your code on both the client and the server. This is because Marko's client and server bundling works closely together to optimize the smallest client bundles and handle shared assets properly.</p><p>Using the CLI is still the easiest way to get started even when you want to get your hands dirty tweaking every last part of your config files. Marko currently supports Webpack, Lasso, and Rollup.</p><h3 id=webpack><a name=webpack class=anchor href=#webpack><span class=header-link></span></a>Webpack</h3><p><a href="/docs/webpack/">Webpack Integration Docs</a></p><p><a href=https://github.com/marko-js/webpack>Marko Webpack Plugin</a></p><p><a href=https://github.com/marko-js/examples/tree/master/examples/webpack-express>Webpack Example</a></p><p>CLI Command: <code>npx @marko/create --template webpack-express</code></p><h3 id=lasso><a name=lasso class=anchor href=#lasso><span class=header-link></span></a>Lasso</h3><p><a href="/docs/lasso/">Lasso Integration Docs</a></p><p><a href=https://github.com/lasso-js/lasso-marko>Marko Lasso Plugin</a></p><p><a href=https://github.com/marko-js/examples/tree/master/examples/lasso-express>Lasso Example</a></p><p>CLI Command: <code>npx @marko/create --template lasso-express</code></p><h3 id=rollup><a name=rollup class=anchor href=#rollup><span class=header-link></span></a>Rollup</h3><p><a href="/docs/rollup/">Rollup Integration Docs</a></p><p><a href=https://github.com/marko-js/rollup>Marko Rollup Plugin</a></p><a href="https://github.com/marko-js/marko/blob/main/packages/marko/docs/installing.md" class=edit-on-github>EDIT <img alt="on GitHub" src=/assets/0bc571bc.svg></a><h2 id=contributors><a name=contributors class=anchor href=#contributors><span class=header-link></span></a> Contributors</h2><p>Helpful? You can thank these awesome people! You can also <a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/installing.md>edit this doc</a> if you see any issues or want to improve it.</p><div class=contributors><a href=https://github.com/DylanPiercey class=contributor><img src=https://avatars.githubusercontent.com/u/4985201?v=4 alt class=photo><span class=name>DylanPiercey</span></a><a href=https://github.com/mlrawlings class=contributor><img src=https://avatars.githubusercontent.com/u/1958812?v=4 alt class=photo><span class=name>mlrawlings</span></a><a class=contributor><img alt class=photo><span class=name></span></a><a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/installing.md class="contributor you"><div class=photo><span class=icon>+</span></div><span class=name>You?</span></a></div><footer class="site-footer doc-footer"><a href="https://openjsf.org/" class=openjsf><img src=/assets/6876aea9.svg alt> <span><span class=bold>OpenJS</span> <span class=light>Foundation</span></span></a><div class=separator></div><a href=https://github.com/marko-js/marko/blob/main/LICENSE class=osi><img src=/assets/1b70b500.svg alt> MIT License</a><div class=separator></div><a href=https://github.com/eBay class=ebay><img src=/assets/339b8a9e.svg alt=eBay> open source</a></footer></div></div></div></main><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66854919-1', 'markojs.com');
ga('send', 'pageview');
</script><a href=https://discord.gg/marko target=_blank class=discord-button><img src=/assets/78800ea4.svg alt="Chat in Marko's Discord Server"></a><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-1-0-14",0,{}],["s0-1-0-14-12",1,{}],["s0-1-0-15",2,{"currentDoc":"installing"}],["s0-1-0-15-9",3,{}]],"t":["IZr$9Bl","uja7Vjk","G0dDyNr","wIkyy5p"]})</script></body></html>