The Wolfram Language makes it easy to put anything you create onto the web.

GeoGraphics[GeoRange->All,GeoProjection->"Albers"]

CloudDeploy[GeoGraphics[GeoRange -> All, GeoProjection -> "Albers"]]

If you don’t tell it otherwise, CloudDeploy will set up a new webpage, with a unique address. If you go to that webpage, you’ll find your graphics there.

If you want the whole world to be able to see what you created, you can do that too (at least so long as you’ve got appropriate access to the Wolfram Cloud).

CloudDeploy[Graphics[{Red, Disk[ ]}],Permissions -> "Public"]

Anyone who has the web address (URL) can now go there to see what you’ve made. URLShorten makes a short URL that’s easier to tell to people.

URLShorten[CloudDeploy[Graphics[{Red, Disk[ ]}],Permissions -> "Public"]]

You can deploy active content, like Manipulate, to the web too.

CloudDeploy[Manipulate[Graphics[Table[Circle[{0, 0}, r], {r, min, max}]], {min, 1, 30,1}, {max, 1, 30, 1}]]

Now you’ll get a webpage with active sliders and so on. You’ll be able to use them in any standard web browser, though because they have to communicate over the internet, they’ll run slower than if they were directly on your computer.

CloudDeploy normally works by first doing whatever computation it can, and then putting the result on the web. This means, for example, that CloudDeploy[Now] will make a webpage that always just shows the time when it was deployed. If instead you want to make a webpage that gives the current time every time the page is requested, you can do this with CloudDeploy[Delayed[Now]].

CloudDeploy[Delayed[ClockGauge[Now]]]

Now every time you go to the webpage, it’ll regenerate the clock in the Wolfram Cloud, and put a new version onto the webpage.

You can create a “real-time dashboard” by specifying an update interval.

CloudDeploy[Delayed[ClockGauge[Now], UpdateInterval -> 2]]

We’ve talked about things in terms of webpages. But actually, all of this works on mobile too, where you’re for example viewing things through the Wolfram Cloud app.

But what about making your own apps on the web or on mobile? In the Wolfram Language it’s for example easy to set up a form-based app.

The basic idea is to set up a FormFunction that defines both the structure of the form, and the action that’s performed when the form is submitted.

Let’s set up a form with one field labeled name that expects the name of an animal, then generates an image of that animal—and then deploys this to the cloud.

CloudDeploy[FormFunction[{"name" -> "Animal"}, #name["Image"] &]]

You can have your form generate anything, including, for example, an active Manipulate.

CloudDeploy[FormFunction[{"name" -> "Animal"},Manipulate[Rotate[#name["Image"], θ], {θ, 0,360 °}] &]]

You can set up a form with any number of fields. For each field you say what type of input it should accept using the same specifications as Interpreter.

CloudDeploy[FormFunction[{"x" -> "Number", "y" -> "Number"}, #x + #y &]]

You can have fields that expect strings ("String") or integers ("Integer") or dates ("Date") or hundreds of other kinds of things.

When you ask for “real-world” types of input, like "Animal" or "City", CloudDeploy automatically sets up smart fields in your form, indicated by , that use natural language understanding to interpret what’s entered in them. But for more-abstract types of input, like numbers, you can for example choose between "Number", "SemanticNumber" and "ComputedNumber".

"Number" only allows explicit numbers, like 71. "SemanticNumber" also allows numbers in natural language, like “seventy-one”. "ComputedNumber" also allows numbers that have to be computed, like “20th prime number”.

CloudDeploy[FormFunction[{"x" -> "SemanticNumber","y" -> "SemanticNumber"}, #x + #y &]]

If you specify a type of input like "Image", you’ll get special controls for acquiring the image—like direct access to the camera or photo gallery on a mobile device.

CloudDeploy[FormFunction[{"photo" -> "Image"}, EdgeDetect[#photo] &]]

FormFunction lets you set up “one-shot” forms. You fill in a form, press Submit, then get a result. If you want to get another result, you have to go back to the form, and then submit it again. FormPage lets you set up pages that always include the form along with the result—like, for example, Wolfram|Alpha or a search engine would.

CloudDeploy[FormPage[{"city" -> "City"}, GeoGraphics[#city] &]]

Deploy a map of your current location to the web. »

Deploy to the web a map that shows the current inferred location of the user. »

Create a website that displays a new random number up to 1000 at size 100 every time it is visited. »

Deploy a form on the web that takes a number x and returns x^x. »

Deploy a form on the web that takes numbers x and y and computes x^y. »

Deploy a form on the web that takes the topic of a Wikipedia page and gives a word cloud for the page. »

Deploy a form page on the web that takes a string and repeatedly gives a reversed version at size 50. »

Deploy a form page on the web that takes an integer n and repeatedly generates a picture of a polygon with random color and n sides. »

Deploy a form page that takes a location and a number n and repeatedly gives a map of the  n nearest volcanoes to the location. »

Create a website that displays a random red regular polygon with between 3 and 8 sides every time it is visited. »

Deploy a form on the web that takes numbers x and y given in English (e.g. “eight”) and computes x^y. »

Why are the web addresses so long?

They’re UUIDs (universally unique identifiers) that are long enough that with overwhelming probability no two identical ones will ever be created in the history of the universe.

How do I deploy to the cloud in a particular format?

Just ask for the format using ExportForm (or by giving the format inside FormFunction). Popular formats include “GIF”, “PNG”, “JPEG”, “SVG”, “PDF” and “HTMLFragment”. (Note that “form” in ExportForm refers to a “form or type of output”, not a “form to fill in”.)

How can I embed a webpage generated by CloudDeploy?

Use EmbedCode to generate the necessary HTML.

How do I specify a label for a field in a form?

Just say e.g. {"s", "Enter a string here"}-> "String". By default, the label shown for a field is just the name you use for the variable corresponding to the field. You can use any label you want for a field, including graphics, etc.

How do I specify initial or default values for a field in a form?

Say e.g. "n"->"Integer"->100.

How do I restrict the values that can be entered in a particular field of a form?

Use Restricted. For example, Restricted["Number",{0,10}] specifies a number between 0 and 10. Restricted["Location", LinguisticAssistant] specifies a location in Italy.

How do I specify the look of a form?

To start with, use options like FormTheme. For more control, you can put a FormObject inside a FormFunction, and give very detailed instructions. You can include any headers or text or styling that can appear in a notebook.

Can forms have checkboxes, sliders, etc.?

Yes. They can use the same controls as Manipulate, including checkboxes, radio buttons, popup menus, sliders, color pickers, etc.

Can I make extensible and multipage forms?

Yes. Field specifications can include constructs like RepeatingElement and CompoundElement. And forms can consist of lists of pages, including ones that are generated on the fly. (If the logic gets sufficiently complicated, you’ll probably want to use AskFunction instead of FormFunction.)

When I deploy to the cloud, where are the computations actually done?

In the cloud ☺. Or in practice: on computers at centralized locations around the world.

How can I create a mobile app?

When you deploy to the cloud, you immediately have a mobile app that you can access from within the Wolfram Cloud app. You can specify a custom icon for your app using IconRules.

What about APIs?

APIFunction works very much like FormFunction, except it creates a web API that you can call by giving parameters in a URL query. EmbedCode lets you take an APIFunction, and generate code to call the API from many external programming languages and environments.

Tech Notes