When I started my web development career, I often heard that you had to use dynamic languages like Ruby or Python to prototype your ideas, and then, once your product became popular, you’d simply have to port it over to a battle-tested, compiled language like Java. Plenty of people have rebutted that last point by talking about how you can scale apps written in Rails, Django, or Laravel, and that many popular sites such as Github, Shopify, and Instagram have managed to do just that. It turns out, if your dynamic-language monolith takes off, you aren’t doomed to do a full rewrite. But I’d like to tackle the choice-of-language issue from a different angle: did you have to write that MVP in a dynamic language to begin with?
Like most popular languages, Java is no longer the same beast that it was when the Rails and Django community fled its over-engineered ecosystem in the mid-2000s. With robust IDE intellisense, along with tools such as Spring Boot to generate and autoconfigure a backend web application, and JHipster to add front-end single-page-app generation to the mix, Java can get your project up and running even faster than some of the dynamic language frameworks.
In this series, I’ll walk through the process of creating an application for keeping track of foods that different pets can eat. The app will have admins and regular users, who can all create pet categories, food records, and reviews for each type of food. For example, a user can create a pet called “guinea pig,” a food record called “Oxbox pellets,” and a review that describes how much their guinea pigs liked this food, and how nutritious it is for them. Admins will be able to do several things on top of this core functionality. For example, an admin user will be able to set other users’ permission levels and see monitoring dashboards for the app’s performance and memory usage.
From a tech perspective, this app will be based on a Spring Boot RESTful API talking to a MySQL database, with Angular 6 on the front end. It will automatically be configured with Liquibase to keep track of database migrations, and it will have a CLI for generating additional database-backed entities.
Right off the bat, this should strike you as a more extensive feature set than you would normally get in Rails or Django or Laravel. Over the next couple of posts, I’ll write about how to build these features in JHipster, a code-generation package that you can install as a Yeoman generator. That feature-richness is, of course, both a blessing and a curse. You can get an app up-and-running in minutes, but it does admittedly generate a huge amount of code and consume a lot of memory on your development machine. Still, I feel that JHipster is very useful for prototyping applications in Java + Angular, and that the code may be verbose, but it’s also so explicit and readable that you can use it to learn a lot of programming best practices.
Because JHipster is a Yeoman generator, you’ll first need to ensure that you have Yeoman installed. From your terminal, you can install it with npm or yarn. I’ll use yarn:
yarn global add yo
Once you have Yeoman installed, you can install the JHipster code generator:
yarn global add generator-jhipster
Now you’ll need a directory for your application code. Create one, change into it, and run the JHipster generator.
The JHipster generator will then prompt you for a few questions. When it asks what *type* of application you want to create, choose “Monolithic application.” When it asks for the base name of your application, type what you want,but make sure not to use special characters or spaces. I’ll use “mypetfooddb”. Type a unique Java package name for yourself. I’ll use “com.vinvasir.mypetfooddb”. Select “JWT Authentication” when it asks what *type* of authentication you’d like to use. Select “SQL” for your type of database. Select “MySQL” for the *production* database and the *development* database. Select Maven as the build tool. Finally, select Angular 6 (or whatever the latest version available to you is) as your frontend framework, and SASS as a CSS pre-processor.
Once the CLI lets you know that it’s finished installing all the dependencies, open up the project in your favorite IDE. Open up src/main/resources/config/application-dev.yml and take a look at the properties nested under “datasource.” You should see a username of “root” and a blank password. You will probably have to change these values. For example, if your local MySQL user is name “user” and the password is “password,” you should enter those values here.
You should also make sure that database name, which is “mypetfooddb” in the datasourc.url property, actually exists on your local machine. Open up the MySQL CLI with the command below. Make sure to substitute in a valid username:
sudo -u <your username> mysql -p
You may then be prompted for your Unix user’s password. Make sure to enter that in correctly. Eventually, you’ll be prompted for the MySQL user’s password. Enter in the correct value, and you’ll see the CLI start up. You can then create your database with this command:
CREATE DATABASE IF NOT EXISTS mypetfooddb;
Verify that the database exists with this command:
You may then exit the MySQL CLI by pressing ctrl + D, or cmd + D on a Mac.
With your database settings ready to go, start up your application by running “./mvnw”. In a separate terminal, start up the front-end Webpack hot reload development server with “yarn start”. If all went well, you’ll now see a landing page with the title “Welcome, Java Hipster!”
Your application already has a users table with some authorization roles set up. In the upper right portion of the navbar, click “sign in,” and then enter in the username “admin” and the password “admin”. You’ll now be able to a blank navbar area for “Entities,” and a feature-rich area for “administration.” Under “administration,” you can click on “user management” to change other users’ roles. This is great for when you start registering real accounts and don’t want to use the built-in admin and user accounts with their easily guessable passwords.
At this point, you’ve already come a long way! You’ve created a robust single-page web application with user authentication and authorization, monitoring, audits, logs, and swagger-based API documentation. Feel free to explore the app and take it all in, as we prepare for Part Two, where we’ll add the Entities and CRUD features that will make this app unique!