2023-06-27 19:56:46 +02:00
<!doctype html>
2023-11-28 17:23:45 +01:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-concepts/files" data-has-hydrated = "false" >
2023-06-27 19:56:46 +02:00
< head >
< meta charset = "UTF-8" >
2024-01-17 17:53:30 +01:00
< meta name = "generator" content = "Docusaurus v3.1.0" >
2023-11-28 17:23:45 +01:00
< title data-rh = "true" > Sharing Websites and Files | Zrok< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://docs.zrok.io/docs/concepts/files/" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docusaurus_locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Sharing Websites and Files | Zrok" > < meta data-rh = "true" name = "description" content = "With zrok it is possible to share files quickly and easily as well. To share files using zrok use" > < meta data-rh = "true" property = "og:description" content = "With zrok it is possible to share files quickly and easily as well. To share files using zrok use" > < link data-rh = "true" rel = "icon" href = "/img/space-ziggy.png" > < link data-rh = "true" rel = "canonical" href = "https://docs.zrok.io/docs/concepts/files/" > < link data-rh = "true" rel = "alternate" href = "https://docs.zrok.io/docs/concepts/files/" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://docs.zrok.io/docs/concepts/files/" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://CO73R59OLO-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "preconnect" href = "https://www.google-analytics.com" >
2023-10-12 16:25:39 +02:00
< link rel = "preconnect" href = "https://www.googletagmanager.com" >
< script async src = "https://www.googletagmanager.com/gtag/js?id=G-V2KMEXWJ10" > < / script >
< script > function gtag ( ) { dataLayer . push ( arguments ) } window . dataLayer = window . dataLayer || [ ] , gtag ( "js" , new Date ) , gtag ( "config" , "G-V2KMEXWJ10" , { anonymize _ip : ! 0 } ) < / script >
2023-12-07 19:53:28 +01:00
< link rel = "search" type = "application/opensearchdescription+xml" title = "Zrok" href = "/opensearch.xml" > < link rel = "stylesheet" href = "/assets/css/styles.e053e05e.css" >
2024-01-22 16:48:56 +01:00
< script src = "/assets/js/runtime~main.9ba4b30b.js" defer = "defer" > < / script >
< script src = "/assets/js/main.529bb6a8.js" defer = "defer" > < / script >
2023-06-27 19:56:46 +02:00
< / head >
< body class = "navigation-with-keyboard" >
2023-11-28 17:23:45 +01:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; t ( null !== e ? e : "dark" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_fXgn" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a href = "https://zrok.io" target = "_self" rel = "noopener noreferrer" class = "navbar__brand" > < div class = "navbar__logo" > < img src = "/img/space-ziggy.png" alt = "Ziggy Goes to Space" class = "themedComponent_mlkZ themedComponent--light_NVdE" > < img src = "/img/space-ziggy.png" alt = "Ziggy Goes to Space" class = "themedComponent_mlkZ themedComponent--dark_xIcU" > < / div > < b class = "navbar__title text--truncate" > zrok< / b > < / a > < / div > < div class = "navbar__items navbar__items--right" > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/docs/getting-started/" > Docs< / a > < a href = "https://github.com/orgs/openziti/projects/16" target = "_blank" rel = "noopener noreferrer" class = "navbar__item navbar__link" > Roadmap< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < a href = "https://github.com/openziti/zrok" target = "_blank" rel = "noopener noreferrer" class = "navbar__item navbar__link" > GitHub< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < div class = "toggle_vylO colorModeToggle_DEke" > < button class = "clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type = "button" disabled = "" title = "Switch between dark and light mode (currently dark mode)" aria-label = "Switch between dark and light mode (currently dark mode)" aria-live = "polite" > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "lightToggleIcon_pyhR" > < path fill = "currentColor" d = "M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" > < / path > < / svg > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "darkToggleIcon_wfgR" > < path fill = "currentColor" d = "M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0
the < code > --backend-mode web< / code > , for example: < code > zrok share private . --backend-mode web< / code > .< / p >
< p > Running with this mode will make it trivially easy to share files from the directory which the command
was run from.< / p >
< p > For example if you have a directory with a structure like this:< / p >
< div class = "language-shell codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > -rw-r--r--+ 1 Michael None 7090 Apr 17 12:53 CHANGELOG.md< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > -rw-r--r--+ 1 Michael None 11346 Apr 17 12:53 LICENSE< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > -rw-r--r--+ 1 Michael None 2885 Apr 17 12:53 README.md< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > -rwxr-xr-x+ 1 Michael None 44250624 Apr 17 13:00 zrok.exe*< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > The files can be shared using a command such as:< / p >
< div class = "language-shell codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > zrok share public --backend-mode web .< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Then the files can be access with a < code > private< / code > or < code > public< / code > share, for example as shown:< / p >
< p > < img loading = "lazy" alt = "zrok_share_web_files" src = "/assets/images/zrok_share_web_files-936de420b39b071d71a8e275fe84e63d.png" width = "952" height = "723" class = "img_ev3q" > < / p >
< p > < code > zrok< / code > will automatically provide a stock website, which will allow the accessing user to browse and navigate the file tree. Clicking the files allows the user to download them.< / p >
< p > < code > zrok< / code > can also share a pre-rendered static HTML website. If you have a directory like this:< / p >
< div class = "language-shell codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > -rw-rw-r--+ 1 Michael None 56 Jun 26 13:23 index.html< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > If < code > index.html< / code > contains valid HTML, like this:< / p >
< div class = "language-html codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-html codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < < / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > html< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < < / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > body< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < < / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > h1< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token plain" > Hello < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < < / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > code< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token plain" > zrok< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < /< / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > code< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < /< / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > h1< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < /< / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > html< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Sharing the directory will result in the following when you access the share in a web browser:< / p >
< p > < img loading = "lazy" alt = "zrok_share_web_website" src = "/assets/images/zrok_share_web_website-5d4c550374b118d1992e488bb319e230.png" width = "952" height = "723" class = "img_ev3q" > < / p >
2024-01-17 17:53:30 +01:00
< p > < code > zrok< / code > contains a built-in web server, which you can use to serve static websites as a share.< / p > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "theme-doc-footer-edit-meta-row row" > < div class = "col" > < a href = "https://github.com/openziti/zrok/blob/main/docs/../docs/concepts/files.md" target = "_blank" rel = "noopener noreferrer" class = "theme-edit-this-page" > < svg fill = "currentColor" height = "20" width = "20" viewBox = "0 0 40 40" class = "iconEdit_Z9Sw" aria-hidden = "true" > < g > < path d = "m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" > < / path > < / g > < / svg > Edit this page< / a > < / div > < div class = "col lastUpdated_vwxv" > < / div > < / div > < / footer > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/docs/concepts/tunnels/" > < div class = "pagination-nav__sublabel" > Previous< / div > < div class = "pagination-nav__label" > Sharing TCP and UDP Servers< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/docs/concepts/opensource/" > < div class = "pagination-nav__sublabel" > Next< / div > < div class = "pagination-nav__label" > Open Source< / div > < / a > < / nav > < / div > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer footer--dark" > < div class = "container container-fluid" > < div class = "footer__bottom text--center" > < div class = "footer__copyright" > Copyright © 2024 NetFoundry Inc. Built with Docusaurus.< / div > < / div > < / div > < / footer > < / div >
2023-06-27 19:56:46 +02:00
< / body >
< / html >
