Yarn Integration

Utopia integrates with Yarn and provides a rake task to simplify deployment packages distributed using yarn that implement the dist sub-directory convention.

By default, utopia includes a .yarnrc file which installs modules into lib/components. This code can then be copied into public/_components using rake yarn:update.

Installing Yarn

If you don’t already have yarn installed, make sure you have npm installed and then run the following command:

$ sudo npm install -g yarn

Installing jQuery

Firstly, ensure your project has a package.json file:

$ yarn init

Then install jquery using yarn:

$ bower install jquery

Copy the distribution scripts to public/_components:

$ rake yarn:update

Then add the appropriate <script> tags to pages/_page.xnode:

<script type="text/javascript" src="/_components/jquery/jquery.min.js"></script>

What does `rake yarn:update` do?

This task copies only the contents of the dist directory. This ensures that you only get files intended for distribution. If the bower package doesn’t have a dist directory, the entire contents is copied.


namespace :yarn do
	desc 'Load the .bowerrc file and setup the environment for other tasks.'
	task :environment do
		@yarn_package_root = SITE_ROOT + "lib/components"
		@yarn_install_root = SITE_ROOT + "public/_components"
	end
	
	desc 'Update the bower packages and link into the public directory.'
	task :update => :environment do
		require 'fileutils'
		require 'utopia/path'
		
		@yarn_package_root.children.select(&:directory?).collect(&:basename).each do |package_directory|
			install_path = @yarn_install_root + package_directory
			package_path = @yarn_package_root + package_directory
			dist_path = package_path + 'dist'
			
			FileUtils::Verbose.rm_rf install_path
			FileUtils::Verbose.mkpath(install_path.dirname)
			
			# If a package has a dist directory, we only symlink that... otherwise we have to do the entire package, and hope that bower's ignore was setup correctly:
			if File.exist? dist_path
				link_path = Utopia::Path.shortest_path(dist_path, install_path)
			else
				link_path = Utopia::Path.shortest_path(package_path, install_path)
			end
			
			FileUtils::Verbose.cp_r File.expand_path(link_path, install_path), install_path
		end
	end
end

Using JavaScript

You can use JavaScript by embedding it directly into your HTML, or by creating a JavaScript source file and referencing that.

Embedding Code

In your HTML view:

<html>
  <body>
    <script type="text/javascript">
      //<![CDATA[
      console.log("Hello World")
      //]]>
    </script>
  </body>
</html>

External Script

In script.js:

console.log("Hello World")