Using sbt new
The fastest and easiest way to create a new OutWatch application is by using
Note that this requires sbt version
0.13.13, so update to that version if you don’t have it yet.
Then open the
index.html file in your browser to see what you just created.
Opening your project in IntelliJ
To open your project in IntelliJ IDEA (Community or Ultimate Edition doesn’t matter), simply go to
File -> Open and then choose the directory you just created.
IntelliJ should now start indexing the files and be ready shortly.
Recompiling your files as needed
fastOptJS every time we want to compile can get quite annoying and inefficient.
sbt, we can run every command in watch mode by simply adding a tilde
~ in front of it.
You also have the option automatically reload your page on code changes.
To do that, first you’ll need to install
Then, while in sbt, start up the server process:
Then instruct sbt to recompile on source changes:
And now your server should compile your code and serve it on port 8080. Next up, you’ll want to tell webpack to make a page reload on every change. You can do this by adding the following to your build.sbt:
Now if you want to stop the background server process simply do this:
And voila, you’ve created your first working developer environment. You can skip the rest of this chapter if everything worked for you.
Creating an OutWatch project from scratch
Create a new SBT project and add the ScalaJS plugin to your
Then add the following line to your
Great, we’ve created our first OutWatch Project!
Now we’ll create a small Hello World app to get you started.
First we’ll create a new Scala file
HelloOutWatch.scala in our main directory.
Inside we’ll want to import the framework by specifying
import outwatch.dom._ at the top of our file.
We also need to import the Scala.js main class:
Now we’re ready to create our main entry point:
main function we will want to write the following line:
This will render an
h1 element into the element with the id
Next we’ll need to create an
index.html file at your project’s root.
Inside we’ll want to add a reference to our js files and also add a node in which we want to display our app:
We’re basically done here. We created our first app. Now we only need to run it.
To run this, simply launch
sbt and then use the
And with that, we’re done, check your browser, to see what we just created (it’s not that special, but it’s something).