Play with Spring and Angular: Getting Started
Risav
Posted on March 26, 2020
In this series, we will explore full stack development with Play, Akka, Spring modules and Angular. This will also help you understand how projects like nep.work are built and what one might need to learn or revise to be able to contribute to the nep.work core stack or to any Play and Angular based stack, for that matter.
We will start this series by installing the command line interface tools for Play 2.0, Spring Boot and Angular. I strongly recommend using a linux distro with a good package manager and a sensible terminal emulator for the best developer experience.
SDKMAN and JVMs
Download SDKMAN from sdkman.io. If you like curling, run:
curl -s "https://get.sdkman.io" | bash
This shows all available installs on SDKMAN.
sdk list
You have some choices of JDKs to choose from.
sdk list java
I would suggest Amazon's Corretto if you will be deploying to AWS as it is always a good idea to have development, staging and production environment parity whenever applicable.
You can also use AdoptOpenJDK or the magical GraalVM (strongly recommended) if you are a polyglot developer or want to experience the best available high performance VM.
For Corretto:
sdk install java 11.0.4-amzn
For GraalVM:
sdk install java 20.0.0.r11-grl
Please update the version numbers in this article yourself in the future. For SDKMAN, you can use
sdk list <package>
to see available versions.
Spring Boot
Install springboot:
sdk install springboot
spring --version
Let's run an obligatory hello world to see if everything is running fine using a helloWorld.groovy file with the following content:
@RestController
class SimpleWebApplication {
@RequestMapping("/")
String welcome() {
"Hello World!"
}
}
Run it using Spring CLI:
spring run helloWorld.groovy
This command will resolve all dependencies and start a tomcat install on the default port 8080. Check your browser or curl localhost:8080 to see if Hello World! has been displayed.
Scala and Play
You should strongly consider using Scala and Play if you are interested in leveling up from Spring Boot/Java. You can still use Spring Data and other awesome spring modules in Scala/Play.
Installing Scala and sbt is simple:
sdk install sbt
sdk install scala
You can now create a sample Play app with a single command:
sbt new playframework/play-scala-seed.g8
To run it simply type:
sbt run
This downloads all the dependencies and starts the system.
In a browser, enter localhost:9000
to view the welcome page.
Nodejs
We will be making use of nodejs' package manager npm, which comes bundled with nodejs. Download it from the download page of their site or via your package manager as explained here. For example, to get Node.js v13.x (with full ICU/i18n support by default) on Ubuntu you would run:
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt install -y nodejs
It is a bad idea to use sudo with npm for security reasons. A simple better solution is to set it to install packages to your home directory and then recursively chown
the npm directory with your user and group.
mkdir -p ~/.npm/prefix
npm config set prefix ~/.npm/prefix
sudo chown -R $USER:`id -g -n $USER` ~/.npm/prefix
Now we need to update the path environment variables by adding the following in any one among ~/.bash_profile
or ~/.bashrc
or ~/.profile
files.
# set node to use user's chowned directory
export PATH="$PATH:$HOME/.npm/prefix/bin"
export NODE_PATH="$NODE_PATH:$HOME/.npm/prefix/lib/node_modules"
After saving the above addition to the file, you have source the file e.g.
source ~/.profile
It is a good idea to enable the use of npm's cache whenever possible, especially when you have a lot of projects with similar dependencies. This is effectively the same as setting the now deprecated 'cache-min' option to 9999999
:
npm config set prefer-offline
Angular
After nodejs and npm have been installed and configured, install angular CLI globally:
npm install -g @angular/cli
Now create and run your angular hello world using ng new
and ng serve
:
ng new hello-world --defaults
cd hello-world
ng serve -open
In your browser you can see your new angular application being served at localhost:4200
.
IDEs and Editors
For IDEs, you could use Spring Tool Suite (STS) version of Eclipse for Spring and Visual Studio for Angular. For working on both using the same IDE, you can also install STS on Visual Studio Code or just use Intellij Ultimate, which would be an expensive option but a worthwhile one if your company/team decides to use it. In case your IDE does not recognize the SDKMAN installed JDK, create these symlinks to the usual locations:
sudo ln -s ~/.sdkman/candidates/java/current/bin/javac /usr/bin/javac
sudo ln -s ~/.sdkman/candidates/java/current/bin/java /usr/bin/java
Bon Voyage!
Now we are all set to explore Scala, Play, Spring and Angular in the future installments of this series on nep.work stack related tutorials.
We will also use Java 11+, Scala 2.13+ & Typescript 3.8+ from this setup for exploring advanced CS, category theory and other pure mathematics concepts in the Mathematics' (An)architecture series .
Posted on March 26, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.