DEV Community

Cover image for Up and running with @dojo/cli
Rene Rubalcava
Rene Rubalcava

Posted on • Updated on • Originally published at learn-dojo.com

Up and running with @dojo/cli

If you haven't heard, dojo has gotten an upgrade! The latest version of dojo ha some pretty awesome features, not just to build widgets, but it also includes a robust i18n package for your internationalization needs, a nice selection of out-of-the-box widgets and a pretty nice way to theme your applications.

A key tool provided by dojo is the @dojo/cli.

To get started you will want to use npm to install it globally.

npm install -g @dojo/cli @dojo/cli-create-app
Enter fullscreen mode Exit fullscreen mode

Once it's installed, you can type dojo --help into your command line and you should get this spiffy help message.

Nice

You're one step closer to world domination.

Now you want to actually create an application, which you do with the following.

dojo create app --name awesome-dojo-app
Enter fullscreen mode Exit fullscreen mode

This will take about a minute or so to create your application directory and install all the dependencies for your scaffold application.

Once it's done, you cd into your application directory and use the following command to run it.

dojo build --mode dev --watch --serve
Enter fullscreen mode Exit fullscreen mode

Under the hood, the @dojo/cli is using webpack to build and bundle your application. What we're doing here is:

  • build - command to build the application
  • --mode dev - use dev mode so that the builds are quicker and not production optimized
  • --watch - watch for any file changes and recompile
  • --serve - serve the application in a local server for us

You should be able to open your browser to http://localhost:9999/ and you would see the following

Success

I'll let you peruse the application provided, but let us take a look at the widget code real quick.

// src/widgets/HelloWorld.ts
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';

import * as css from './styles/helloWorld.m.css';

const logo = require('./../img/logo.svg');

export class HelloWorld extends WidgetBase {
    protected render() {
        return v('div', { classes: css.root }, [
            v('img', { src: logo, classes: css.logo }),
            v('div', { classes: css.label }, ['Hello, Dojo 2 World!'])
        ]);
    }
}

export default HelloWorld;


Enter fullscreen mode Exit fullscreen mode

You may not notice right away, but it's all TypeScript. Notice, in this widget their are no types or interfaces defined, that's because it's all inferred by the TypeScript compiler to make sure it's valid. The power of TypeScript!

Dojo has it's own virtual dom engine for building widgets and uses hyperscript as the default for creating your apps. If you are familiar with React, hyperscript is what it's like writing it without the JSX. But the v method is much shorter for dev purposes.

I really like writing my widgets this way, and I won't go into too much detail on building a widget, I'll cover that in another post and you can read more in the dojo tutorials.

But I do realize, some people really love their JSX, so no worries, you can still use JSX if you want.

Just change the .ts file extension to .tsx and convert the hyperscript to JSX like this.

// src/widgets/HelloWorld.tsx
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
// tslint:disable-next-line
import { tsx } from "@dojo/framework/widget-core/tsx";
import * as css from './styles/helloWorld.m.css';

const logo = require('./../img/logo.svg');

export class HelloWorld extends WidgetBase {
    protected render() {
        return (
            <div classes={css.root}>
                <img src={logo} classes={css.logo}></img>
                <div classes={css.label}>Hello Dojo!</div>
            </div>
        );
    }
}

export default HelloWorld;
Enter fullscreen mode Exit fullscreen mode

We need to import the tsx module so that the JSX can be compiled and the default tslint doesn't like unused modules, so you'll also need to add a comment for tslint to ignore that line.

But there you go, you still use JSX in your Dojo widgets!

Be sure to check out the dojo tutorials for more great lessons and also the docs if you really want to dig in!

Top comments (3)

Collapse
 
sleepyfran profile image
Fran González

Very good post! Dojo seems quite interesting, what advantages does it offer over Vue? I've been looking at their webpage and I cannot find something particularly better in Dojo.

Collapse
 
odoenet profile image
Rene Rubalcava

Some of the things that currently set Dojo apart are a few:

  1. TypeScript by default, may not be huge for some, but for people like myself, I think it's a big positive.
  2. Widget theme development is built in. This comes into play in moment.
  3. Web Components. I don't think the current docs for Dojo include it, but Dojo does have a build pipeline to export widgets into their own encapsulated Web Components. I did a video on this last year. I think this workflow is still being fleshed out in Dojo, but it is really powerful to reuse widgets anywhere.

I have extensive experience with old school Dojo 1, which is incredibly scalable, so I look forward to building some larger apps with the new Dojo in the future.

Collapse
 
sleepyfran profile image
Fran González

Thanks! It definitely looks interesting, I'll take a look at it!