InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search
  • Home
  • > Tutorials
  • > Dropbox

How to use dropbox as mini webserver

By admin on Apr 4, 2013

Dropbox can serve files in the Public Folder (and other folders as well) over http. To view the file over http users don’t need to have any dropbox account. It is just like any other web page. Some possible uses are:

  1. You can share static html pages without having to worry about maintaining a web server.
  2. Interactive HTML page with javascript code can also be served as long as there is no submission to the server as dropbox won’t execute any server side code.

Here are the steps using macbook desktop client. These should be similar on other clients.

  1. Put you html file in Public Folder. In this example I have created a demo folder and created to files served-from-dropbox.html and served-from-dropbox.png.
    dropbox-public-folder-html-file
  2. Right click the file you want to get Public link for, click dropbox and then click “Copy Public Link”.
    dropbox-public-folder-html-file-copy-public-linkHere is the content of the html file. I added a small javascript also just to test if it works fine.

    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    </head>
    <body>
    <h1>Demo html page served from dropbox</h1>
    <p>This is demo html page served from dropbox.
    </p>
    <br/>
    <div style="color:red;" id="div1">Click here</div>
    <script>
    $('#div1').click(function() {
    $('#div1').html("Clicked");
    });
    </script>
    </body>
    </html>
  3. It created the link https://dl.dropbox.com/u/53779982/demo/served-from-dropbox.html for the html file. And for png it created the link https://dl.dropbox.com/u/53779982/demo/served-from-dropbox.png

Please also note that Dropbox accounts created after Oct 4, 2012 no longer have public folder. But it can be enabled as per dropbox public folder help page.

Some observations

  1. Dropbox can server any kind of file like html, png, etc.
  2. For images dropbox sends header cache-control: max-age=0. That means that images are not cached at client side.
  3. Dropbox also generates content type header based on file extension. e.g. for png files it send the header Content-Type:image/png
  4. Everything in Public Folder is automatically shared and generates a url of the form https://dl.dropbox.com/u/[ID]/[FILE_PATH]
  5. Files and folders from locations other than Public Folders can also be shared.
  6. To un-share files or folders, just move them somewhere else.

Suggested posts:

  1. svn – how to undo last commit
  2. How to customize wordpress rss feed
  3. Convert mp3 to ogg on Mac using ffmpeg
  4. How to include angularjs javascript in wordpress post
  5. How to install ViewVC for svn repository on Ubuntu Linux
  6. view event handlers in Chrome
  7. Using JSLint on command line on Ubuntu linux – quick start guide
  8. How to run a program as administrator on windows 10
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Dropbox, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress