Add basic frontend in Tyrian

kannupriyakalra · Feb 8, 2024 · 83be314 · 83be314
1 parent 6ab96ad
commit 83be314
Show file tree

Hide file tree

Showing 13 changed files with 4,949 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,8 @@ metals.sbt
 hs_err_pid*
 
 .DS_Store
+
+## Frontend stuff
+frontend/node_modules
+frontend/dist
+frontend/.parcel-cache
diff --git a/README.md b/README.md
@@ -2,6 +2,44 @@
 
 ScalaBridge Project - mentored by Zainab Ali & Noel Welsh
 
+## Frontend
+
+### Running
+
+To run the frontend you need to compile the code in sbt and then do some Javascript setup (which requires you have `npm` installed on your machine.)
+
+First, the Scala side of things. From within `sbt` run
+
+```scala
+frontend / fastOptJS
+```
+
+Now the Javascript side. From a terminal, change into the `frontend` directory
+
+```sh
+cd frontend
+```
+
+Install Javascript dependencies
+
+```sh
+npm install
+```
+
+Start the web server running the frontend
+
+```sh
+npm start
+```
+
+Visit [localhost:1234](http://localhost:1234/) and you should see the frontend.
+
+
+### Developing
+
+Code is in `src/main/{css,html,scala}`
+
+
 ### Next time
 
 - Use the updated version of krop with updates Noel demonstrated

diff --git a/build.sbt b/build.sbt
@@ -30,3 +30,8 @@ lazy val frontend =
   project
     .in(file("frontend"))
     .settings(commonSettings)
+    .settings(
+      libraryDependencies += "io.indigoengine" %%% "tyrian-io" % "0.10.0",
+      scalaJSLinkerConfig ~= { _.withModuleKind(ModuleKind.CommonJSModule) }
+    )
+    .enablePlugins(ScalaJSPlugin)
diff --git a/frontend/.postcssrc b/frontend/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Snorri</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link type="stylesheet" href="src/main/css/index.css">
+</head>
+
+<body>
+  <div id="snorri"></div>
+  <script type="module" src="./tyrianapp.js"></script>
+</body>
+
+</html>