# Deploying Scala.js to the Web with Netlify Scala has long been my language of choice, but while I was aware of Scala.js, the process to get from Scala code to something that people could access in a web browser was a bit intimidating. Last week I set up a Scala.js project to automatically deploy the `master` branch from github to a website running on Netlify, and was pleasantly surprised at how easy and straightforward it all was. ## 0. Scala code in a Scala.js project using the [Scalor maven plugin](https://github.com/random-maven/scalor-maven-plugin), in a git project. I'll start by assuming we've got a Maven project set up that will link JS with the Scalor plugin: ```` C:\Users\md401\eclipse-workspace\plus-minus-zero>mvn install ... [INFO] --- scalor-maven-plugin_2.12: (default) @ plus-minus-zero --- [INFO] [compile-main] Invoking Zinc compiler: Scalor [47422f7f42a63a8f70345c9cf979188c]: 2.12.6 [INFO] [compile-main] [DBUG] No changes [INFO] [INFO] --- scalor-maven-plugin_2.12: (default) @ plus-minus-zero --- [INFO] [scala-js-link-main] Full linker build request. [INFO] [scala-js-link-main] Linker runtime: C:\Users\md401\eclipse-workspace\plus-minus-zero\target\classes\META-INF\resources\webjars\plus-minus-zero\0.2-SNAPSHOT\runtime.js [INFO] [scala-js-link-main] Linker runtime: C:\Users\md401\eclipse-workspace\plus-minus-zero\target\classes\META-INF\resources\webjars\plus-minus-zero\0.2-SNAPSHOT\runtime.min.js [INFO] [scala-js-link-main] Closure: 0 error(s), 0 warning(s) ... ```` (I'm sure it's possible to do this stuff with Gradle or SBT, but I find Maven much simpler and easier to use) I'll also assume this project is already in a Git repository hosted on [GitHub](https://github.com). ## 1. Create a basic HTML file, using resource filtering to point at our compiled JS I was a little concerned that the path that the javascript is built in will change with the project version, but Maven has builting functionality to substitute in resource files. So I put some substitutable parameters in `src/main/resources/index.html`: ```` <!DOCTYPE html> <html> <body> <div id="app"></div> <!-- Include Scala.js compiled code --> <script type="text/javascript" src="./META-INF/resources/webjars/${project.artifactId}/${project.version}/runtime.min.js"></script> </body> </html> ```` And enabled filtering for my resources in `pom.xml`: ```` <resource> <directory>src/main/resources</directory> <filtering>true</filtering> </resource> ```` In the same file I also made sure my application's `main` method was in the initializer list in the scalor plugin configration: ```` <linkerMainInitializerList> <initializer>com.github.m50d.plusminuszero.PlusMinusZero.main(build=${project.artifactId},stamp=${maven.build.timestamp})</initializer> </linkerMainInitializerList> ```` To check everything's working, run `mvn process-classes` and then navigate to `target/classes/index.html` in your web browser. You should see your app running locally! ## 2. Include the Maven wrapper in the project source, and add Netlify configuration Following [this blog post](https://www.robintegg.com/2018/01/21/publish-maven-site-to-netlify/), we need to include a maven wrapper in our repository. Netlify will use this wrapper to build our site: ```` mvn -N io.takari:maven:wrapper git add mvnw mvnw.cmd .mvn git update-index --chmod=+x mvnw git commit git push ```` (the `update-index` line shouldn't be necessary on unix-like systems) Check that you can use this `mvnw` to build your project: ```` mvnw process-classes ```` (`./mvnw process-classes` on unix-like systems) Then we add a `netlify.toml` telling Netlify to use it to build: ```` [build] base = "" publish = "target/classes" command = "./mvnw clean process-classes" ```` ## 3. Sign up to [Netlify](https://netlify.com), add/enable this repository, and get a link to your Scala.js webapp It's that simple. Since Scala.js code executes in the user's browser, we can use a service designed for static site generators like Netlify. By default Netlify will automatically rebuild and redeploy our code every time we update the `master` branch on Github! [Home](/) <div id="disqus_thread"></div> comments powered by Disqus