Using Enact With Tizen Studio

The Enact framework team has seen a few requests from developers about how to use Enact in Tizen Studio, so I’m going to step through how I got it going from zero to app launch in the simulator.

Due to the need to make a couple configuration changes to get everything working properly, I would say that the difficulty level for this integration is moderate:

• IDE configuration changes (adding Tizen libraries/templates)
• Internal IDE configuration changes (modifying Eclipse heap sizes)

This article assumes that you already have either an Enact app or the Enact CLI tools installed and working. If not, drop everything and go get it! Without that, all hope of getting an Enact app working with Tizen Studio is lost. 😭 I will wait for you to return.

If you haven’t already, download Tizen Studio. The version available to download at the time of this writing is 3.7 April 6, 2020. Maybe. It’s the one I downloaded but this is what it shows for its “About” information.

March 4th? April 3rd? Nope, April 6th! 🤔

Extra configuration steps

I had to do some extra configuration so that Eclipse would run correctly. Specifically, I needed to update a few heap parameters in eclipse.ini to keep Tizen Studio from crashing while attempting to run an app on the simulator. Please note that I am neither very fond of Java nor Eclipse, so your mileage may vary, but here is what I currently have working for my setup:

...
-Xms1024m
-Xmx4096m
-XX:PermSize=512M
-XX:MaxPermSize=2048M
...

Please verify your system has the resources to support the values you provide. If you are tempted to ask me why I chose those values, be prepared for the disappointing answer of

“They were larger than what was there before.”

If you use a Mac as your primary development machine, here’s a little tip for people who don’t know OS X as well as they do Linux and other operating systems (like me!): The eclipse.ini file is contained in the Tizen Studio package (application icon you see in Finder). Right-click the icon and choose Show Package Contents and you will find it in Contents\Eclipse\eclipse.ini.

Also, I needed to download some packages that are not included with the base Tizen Studio installation. Use Tools > Package Manager in the IDE to install the packages you require for the platform you are targeting. I installed the TV package for v5.5. You may be able to get by with just installing the Web app. development (IDE) and Web app. development (CLI) pieces of the packages you choose.

Got everything you need?🤞 You are now ready to begin.

Mr. Right Now

For this integration, I chose the easiest way to use these products together and that is by taking an existing Enact app developed in another IDE and packaged via the Enact CLI before importing the packaged app into a new Tizen Studio project that can then be run/debugged in the simulator(s) they provide.

Wise developers (and wiseacre ones, too) would probably be questioning the utility of this multi-IDE/toolchain solution, but I would like to remind you of the heading of this section. We aren’t looking for Mr. Right, we’re looking for Mr. Right Now. Someone, somewhere at some time had, has or is going to have an Enact app they need immediately tested on a Tizen device without needing to do a full-blown integration. This guide is for those developers. I have a plan to make another guide for general Eclipse usage as the sole IDE and it should be applicable to Tizen Studio.

Launch Tizen Studio and create a new project from the Template type:

Choose your application profile and version (i.e. TV-samsung v5.5):

Select Web Application as the application type. This guide will not cover how to use NaCl or WebAssembly with your project (I only do JavaScript, what can I say? 😁):

You can choose to let Tizen Studio create the project using an empty template or choose one of the options with some boilerplate in them. I used the Empty one:

Give your project a name:

Package ID is a field, but it can’t be edited? Okay, then.

Huzzah! The project is ready to receive its source code. There are a couple of ways to go about it. One way is to open the project source directory on the filesystem and copy the source of an Enact app that has been packaged for deployment. This generally involves writing an Enact application and doing npm run pack-p in that project’s source directory. This would result in the packed application’s deployable JS/HTML/CSS files in the dist directory in the Enact project. It is also possible to designate a different directory when packing your Enact application so you could use the Tizen project’s source directory as that output target (see enact pack --help and the --output option). However, that will delete the contents of the directory every time you pack the Enact app and you will lose the Tizen project’s config.xml.

Mr. Right Now says we should do the least impactful method that I mentioned a few paragraphs ago. First, delete everything in the Tizen project except config.xml. You need that one. Then, use File > Import… to import the Enact app’s packaged contents.

At least using the import utility makes me have a feeling about how well this will go.

Use the dist directory of the Enact app as the import source.

Tizen Studio (or Eclipse? 🤷‍♀️) “helpfully” excludes some things that your app needs, such as the entire node_modules directory. After choosing the import directory, make sure you check all the boxes to get everything (or just use the Select All button). You also need to specify the Tizen project folder where these files are to be imported.

Click Finish and your Enact app will be imported into the Tizen project. You should be able to launch it in the simulator (make sure to select LGMoonstoneOnSamsungTV in the project explorer if it isn’t already) from Run > Run As > Tizen Web Simulator Application (Samsung TV).

And that’s how it’s done!

Almost. Another helpful thing that Tizen Studio does for you is run validation on all kinds of code. This includes anything in the node_modules directory and the potentially minified single file structure that results from a production deployment of an Enact app. It takes an extraordinary amount of time to complete and complains about a lot of things that, frankly, can’t be changed at this point.

99 problems, you say? Here, hold my Dr Pepper.

I just turned client-side JavaScript validation off in the IDE preferences. You are already using ESLint in the editor where you wrote the Enact app, right? Or at least running npm run lint on it before packaging? Right? Good, but in case you still want Tizen Studio to offer its opinion, the validation can also be done per workspace and the validator has some settings that might allow filtering out specific files or directories.

LG UX awesomeness now appearing on a Samsung TV near you! 💪

Now that’s how it’s done 🎉

If you enjoyed this content or if you found it helpful, don’t forget to give it the virtual applause it deserves. Be sure to follow Enact to stay up-to-date with what’s going on in the framework and for other goodies like this helpful guide. Who knows, maybe I will start liking Eclipse so much that I will be able to write the full integration guide in no time? 😆 Ah, we’ve got the jokes!