Developer Tutorial: Deploy and Share Live Scene Previews

Learn how to share a playable preview of your Decentraland scene on Now

Nicolas Earnshaw
Decentraland
5 min readSep 17, 2018

--

Decentraland scene previews are compatible with Now, a very handy service that lets you upload content to a server to run for as long as you like, for free. You can very easily upload a Decentraland scene to one of these servers, and the preview for that scene will be automatically launched for each visitor.

This is a fantastic way to share your content with others! District leaders can use this to demonstrate their progress, developers can get feedback from others, or you can simply share what you’ve built with the community to get recognition for your work and to inspire others.

Once uploaded to Now, the only thing people have to do to see your scene is follow a link. They don’t need to install the CLI, Node, NPM, or any of the other tools that would be required to run the preview on their local machine.

For example here are some scenes that are currently running in Now:

Keep in mind that each person who opens the link is running the scene independently from other users. Even though the scene runs on the same server, the scene state is stored in the user’s browser, so you can’t interact with, or see, other users.

If you deploy a remote scene, on the other hand, you will be able to interact with other people that open the link. Keep reading to learn how to deploy remote scenes to Now.

Get your scene ready

To run your scene in Now, make sure you’re using the latest version of the SDK (4.1.0). Remember that the SDK version is specified in the scene and is determined when you first create it with the CLI. So, if you have a scene you created with an older version of the CLI, and then update the CLI, you will need to manually update the scene so it references the latest version of the SDK.

To update a scene manually, follow the instructions detailed here, under the section Migrate a scene to 4.1.0.

Once your scene has been updated to 4.1.0, modify the package.json file to include a new script called now-start. This script should run dcl start --ci.

Your package.json file should contain something like:

Now will automatically run the script that’s on now-start as soon as the scene is deployed. We’re using the--ci flag on the dcl start command to make the preview run in a slightly different way that’s fully compatible with Now and other hosting and testing services.

Download and use the Now Desktop Client

  • Go to zeit.co’s website to download the Now Desktop Client.
  • Once you’ve installed and opened the desktop client, you should see the triangular Now icon appear next to your other running programs.
  • Click the entire scene folder and drop it on the Now icon on the toolbar. That will start uploading the folder’s contents to the server.
  • A new tab will open automatically in your web browser, showing you the server’s console as it installs the necessary dependencies to run your scene. This takes a few minutes, but eventually the scene preview should open automatically once everything is installed.
  • Share the link with anyone you want! Now will keep hosting your scene at that link indeterminably.

Keep in mind that the free version of Now enforces a maximum file size of 50 MB.

If your scene exceeds this limit, try deleting the node_modules folder and any other files in the scene folder that don’t need to be uploaded or that can be automatically installed by the server based on package.json.

Uploading remote scenes to Now

If you created your scene using the Remote Scene option in the CLI, then you need to make two separate deployments to Now, one for the server and another for the scene client.

First drag the /server folder over to the Now icon on your toolbar to deploy it. A browser window will open showing you a console as all of the dependencies are installed. Once that’s done and the preview is launched, copy the URL from the browser tab.

In the /scene folder, open scene.json and modify the main field so that it points to the link of the server you deployed to Now (the URL you just copied). You must modify the URL address manually so that it begins with wss (web socket secure) instead of https.

For example, if the server’s address is https://dcl-project-fsutefbepd.now.sh/, your scene.json file should look like this:

After editing scene.json, you can drag the /scene folder over to the Now icon in your toolbar to deploy it.

Final thoughts

If you’ve been building content with the SDK, we encourage you to share it with the community! An interactive preview is the perfect way to do this, since it’s accessible to anyone and shows your work in full. We also want to encourage you to post links to your work in Discord, where we have a vibrant community of builders and artists that will be excited to see what you put together!

Happy building!

Join the conversation on…

--

--