Deploying noodl projects

When you have are happy with your design and would like to share it you need to deploy so the prototype or app can run without having the editor running. Using the deploy feature Noodl will export an independent web application containing your design. When this is completed it leaves you with a number of options to make your design available to the world.

Sharing your prototype on Github

Github has a great featured called Github Pages. It allows you to create projects and host web content for free, as long as you're fine with having them available publicly.

Github is used together with the version control system git. Github provides a tool for free that makes git easier to use, and you can also use git directly from the command line or choose from a wide range of other great tools.

Github has a guide for how to set everything up. It walks you through how to create a new project and upload your content to it. The only thing you need to upload are the files that Noodl creates when deploying a project, and Github will make your prototype available on the web. Make sure to read the guide about a Project site and not a user or organization.

Sharing your prototype on your own site

Noodl will generate an index.html file together will all the javascript and assets needed to run your prototype. You can upload and serve it from your own site, and it runs well both on its own or inside an iframe. The generated web page is static and is ready to go without any additional setup.

Turning your Noodl prototype into a mobile app

Its possible and very easy to turn your Noodl design into a full mobile app using the Cordova project.

Apache Cordova is a framework for building mobile applications using web technologies. Using Apache Cordova it’s very easy to deploy a Noodl design to an iOS or Android app. Simply follow the steps below, to learn more about Cordova go here .

Install cordova

To install cordova you need to have node (https://nodejs.org) and npm (https://www.npmjs.com) installed. Once that is done open a Terminal and run:

npm install -g cordova

Create the application

Once the tools are installed you can create a new application by running.

cordova create MyApp

cd MyApp

This will create a folder called MyApp with a simple application. The content of the application is located in the www folder. This is the folder where you should deploy you Noodl design, start by remove all files in the www folder that was created when Cordova created the app for you.

Deploy your Noodl prototype

Now open the Noodl project that you wish to deploy into your app click the deploy icon in the top right corner of the editor. In the popup choose "Pick folder" which will open a file selector where you need to choose the www folder of your recently created app.

Now the www folder should contain index.html and all other files necessary to run your Noodl design. Next up it's time to build the app for your target platform of choice.

Building the app

You can build for a range of different platforms like iOS and Android by installing the developer tools. More information on building the app on your local machine can be found here.

If you don't have the developer tools you can also use the cloud build tool provided by Adobe. This and more instructions can be found here.

Sign up to noodl newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.