ochrons/scalajs-spa-tutorial

Tutorial for creating a simple Single Page Application in ScalaJS

Akhtiam Sakaev

@asakaev

What you guys think about https://github.com/ThoughtWorksInc/Binding.scala ? Looks like here is no react js deps, no virtual dom and simpler xtml templates, so no need to wrap html.

Haemin Yoo

@yoohaemin

Hi, I've fixed a few Korean translation files. I wish them fully fixed since the current translation doesn't do justice, and I'm planning to work on it on my spare time now. Please let me know if you have any concerns or questions. Thanks!

Otto Chrons

@ochrons

:+1: thanks!

Alexander

@asakalou

Hello, I am playing with scalajs-spa-tutorial and trying to run tests. sbt test command produces

[error] Error: Cannot find module 'jsdom'
[error]     at Function.Module._resolveFilename (module.js:489:15)
[error]     at Function.Module._load (module.js:439:25)
[error]     at Module.require (module.js:517:17)
[error]     at require (internal/module.js:11:18)
[error]     at [stdin]:39:13
[error]     at [stdin]:95:3
[error]     at ContextifyScript.Script.runInThisContext (vm.js:44:33)
[error]     at Object.runInThisContext (vm.js:116:38)
[error]     at Object.<anonymous> ([stdin]-wrapper:6:22)
[error]     at Module._compile (module.js:573:30)
[info] Closure: 0 error(s), 0 warning(s)
org.scalajs.jsenv.ExternalJSEnv$NonZeroExitException: Node.js with JSDOM exited with code 1

Could you please suggest how to fix this? Thanks

Otto Chrons

@ochrons

you need to install jsdom locally npm install jsdom or so

Alexander

@asakalou

it fixed the problem, but little bit unclear to me why to run this separately. Is there a way to automate the process ?

Otto Chrons

@ochrons

it used to be part of scala.js plugin functionality, but not anymore

npm can be automated via sbt and having a package.json in the project root, though

Zsolt Szilagyi

@esgott

hello, first of all thank you for this great tutorial, I am pretty new to javascript, scalajs and react, and it helped me a lot to understand how these things can work together. :)

Otto Chrons

@ochrons

:+1: nice to hear!

Zsolt Szilagyi

@esgott

I am would like to create a line chart, where the data displayed is returned by the server through ajax/diode. I found it hard with chartjs, as it's a stateful thing, and you have to call update() when the state is changed, I didn't manage to come up with a way to do this with diode. Then I thought I try paths-scala-js, which seems to fit react better. My problem is, that when I add "eu.unicredit" %%% "paths-scala-js" % "0.4.4" to scalajsDependencies, then client-jsdeps.js doesn't compile any more in the browser, I have two errors:

Error: Cannot find module 'function (factory, root) {
    if (typeof define == "function" && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof module != "undefined" && typeof exports == "object") {
        // Node/CommonJS style
        module.exports = factory();
    } else {
        // No AMD or CommonJS support so we place log4javascript in (probably) the global variable
        root.log4javascript = factory();
    }
}'
    at s (client-jsdeps.js:sourcemap:16271)
    at client-jsdeps.js:sourcemap:16369

and

Cannot read property 'getLogger' of undefined
    at $c_Lspatutorial_client_logger_LoggerFactory$.getLogger__T__Lspatutorial_client_logger_Logger (LoggerFactory.scala:42)
    at $c_Lspatutorial_client_logger_package$.init___ (package.scala:4)
    at $m_Lspatutorial_client_logger_package$ (package.scala:3)
    at $c_Lspatutorial_client_SPAMain$.main__V (SPAMain.scala:58)
    at client-fastopt.js:68923
    at client-fastopt.js:68924

can you help me? I am not really familiar with how the build system should work together with the javascript dependencies

Otto Chrons

@ochrons

JS uses a common module system which requires bundling

so you need to look into scalajs-bundler if you wish to use JS modules

actually, paths-scala-js is a Scala.js library, not a JS library, so you need to add it with libraryDependencies not scalajsDependencies

Zsolt Szilagyi

@esgott

@ochrons thanks for the help. If I understand the build.sbt correctly, the scalajsDependencies is added to the libraryDependencies, and the jsDependencies is added to the jsDependecies for the client. Or do I miss something?

Otto Chrons

@ochrons

ah yea, true

got confused there with the details :)

Zsolt Szilagyi

@esgott

@ochrons no worries :) if I understand the problem correctly, it's some log4javascript version conflict between path.js and the tutorial?

elyphas

@elyphas

Hi, @ochrons ; Could You help, I update my sbt from 0.3.15 to 1.1.1, because is getting my machine slow, so in the build.sbt line 88, is this:

// loads the Play server project at sbt startup
onLoad in Global := (Command.process("project server", _: State)) compose (onLoad in Global).value

build.sbt:88: error: value process is not a member of object sbt.Command
onLoad in Global := (Command.process("project server", _: State)) compose (onLoad in Global).value

Otto Chrons

@ochrons

that just sets the default project when SBT starts

not very relevant :)

elyphas

@elyphas

@ochrons ; ok thank you

Ryan Williams

@ryan-williams

I'm working on upgrading the tutorial to SBT 1.1.1, scalajs 0.6.22, play 2.6.12, etc.

I think I'm very close but all the XHRs to server are giving 403s atm:

any suggestions would be appreciated!

btw this tutorial is amazing, thanks so much

here are the relevant recent server msgs:

[info] p.a.h.EnabledFilters - Enabled Filters (see <https://www.playframework.com/documentation/latest/Filters>):

    play.filters.csrf.CSRFFilter
    play.filters.headers.SecurityHeadersFilter
    play.filters.hosts.AllowedHostsFilter

[info] play.api.Play - Application started (Dev)
[warn] p.filters.CSRF - [CSRF] Check failed because application/json for request /logging
[warn] p.filters.CSRF - [CSRF] Check failed because application/octet-stream for request /api/spatutorial/shared/Api/getAllTodos
[warn] p.filters.CSRF - [CSRF] Check failed because application/octet-stream for request /api/spatutorial/shared/Api/welcomeMsg
[warn] p.filters.CSRF - [CSRF] Check failed because application/octet-stream for request /api/spatutorial/shared/Api/welcomeMsg

Ryan Williams

@ryan-williams

ok adding

play.filters.disabled+=play.filters.csrf.CSRFFilter

to application.conf fixes it, but i guess doing CSRF-checking properly will be desirable going forward. i think I'll PR what i have though and we can discuss there!

Ryan Williams

@ryan-williams

ochrons/scalajs-spa-tutorial#76 :confetti_ball: :sparkles:

Otto Chrons

@ochrons

thx!

nice to get the tutorial updated

Ryan Williams

@ryan-williams

i can't figure out the magic in these lines:

class MotdHandler[M](modelRW: ModelRW[M, Pot[String]]) extends ActionHandler(modelRW) {
  …
    case action: UpdateMotd ⇒
      val updateF = action.effect(AjaxClient[Api].welcomeMsg("User X").call())(identity _)
      action.handleWith(this, updateF)(PotAction.handler())

I wanted to put more things on the main page (e.g. a second string that can refresh like the motd), so I changed the ModelRW[M, Pot[String]] to ModelRW[M, Dashboard], with:

case class Dashboard(motd: Pot[String], otherMsg: Pot[String])

and can't figure out how to modify those Handler lines to update just Dashboard.motd

Ryan Williams

@ryan-williams

ok i think i figured it out :laughing:

Otto Chrons

@ochrons

you could use a separate handler that is only interested in the part of the model it needs

Ryan Williams

@ryan-williams

yea i think that's where i ended up, and the selection / "zooming" is done in the composeHandlers bit

Ryan Williams

@ryan-williams

I thought proxy().render/ the Ready state should be set to pending when I start fetching a new value from the server via a handler with

action.handleWith(this, updateF)(PotAction.handler())

but i'm seeing the previous render value persisting through pending and failed states of the subsequent value. :confused: :mag_right:

sorry, not a fully formed question yet

should i emit one Effect that explictly sets the value to "pending", and then another that requests the new value from the server? it seems like the proxy().renderPending (_ > 100, …) bits correctly display a "Loading..." message, they just don't wipe the previous value,

Ryan Williams

@ryan-williams

I guess I see: Ready -> value.pending() -> PendingStale -> .fail -> FailedStale, and PendingStale andFailedStaleare considerednonEmpty(the previous value is propagated through), andproxy().render` will render that stale value in those cases

changing proxy().render to proxy().renderReady makes those different render-calls mut-exc. cool!

Otto Chrons

@ochrons

yes. the stale states still contain the previous value

did you read through Diode docs btw? it contains more info on these :)

Ryan Williams

@ryan-williams

cool. i'm just pattern-matching my way around diode now but occasionally having to go deeper, sorry for the noob q's

Ryan Williams

@ryan-williams

where can i put a 3rd-party .js file for the build to copy it into the public folder so that i can serve it like a static asset?

seems like normally it would go in public/ in the root of the project, but my guess is that .disablePlugins(PlayLayoutPlugin) on the server module disrupts that?

I'm trying a bunch of other setups but haven't found one that works yet

Ryan Williams

@ryan-williams

seems like something like this is what I need:

unmanagedResourceDirectories in Assets += baseDirectory.value / "public"

Otto Chrons

@ochrons

I cannot really remember the details, it's been awhile since I've done such things myself :)

best to ask on the scalajs gitter

Ryan Williams

@ryan-williams

i think the snippet above does what i need, thanks

Where communities thrive

People

Repo info

Activity