• Home
  • Full stack example – Spring Boot, React, Redux (JWT Login)

Full stack example – Spring Boot, React, Redux (JWT Login)

Today’s article is about how to start creating Fullstack Web Project. For this example I choose JAVA for backend part, to be more clear I develop Spring Boot Rest Api for backend and for client frontend, app is built with React (with redux for state management and some styling with Bootstrap 4). Complete code is available on my Github repo

I invite you to take look at code and try to do something similar by yourself. Here I will quick guide you through most important parts so you can easily implement everything by your own.

Backend part / everything is in folder chrisvzrands on Github.

In this folder there is complete Spring Boot App. You can download complete code and open (build) project in your IDE and then try run this app. ( app will be available on your http://localhost:8080).  Firstly examine pom.xml file in root so you can see what dependencies needs to be pulled into Spring Boot. Here is my pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.chrisvz.rands</groupId>
  <artifactId>chrisvzrands</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>chrisvzrands</name>
  <description>Demo project for Spring Boot with React Frontend by Chrisvz</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.1.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <scope>runtime</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
    <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version><!--$NO-MVN-MAN-VER$-->
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.0</version>
        </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>


</project>

Here you can see that we included (among else) Maven dependencies – Spring Security, JJWT and also MySQL as database that we are gonna to use.

If you have had experience with the basics of the Spring Framework but this is the 1st time you are using Spring Security then I recommend you spend some time understanding the architecture: https://spring.io/guides/topicals/spring-security-architecture/
And what about JWT…you have at least basic experience with Spring Security but you have never worked with JWTs before? No problem .. there is fantastic article on this link  https://auth0.com/blog/implementing-jwt-authentication-on-spring-boot/

In my code you will find working implementation from above given topics. One more thing that is needed for running my code is setting off database ( in my example I use MySql). You can set database connection according to your needs in application.properties file. Here is my example:

spring.jpa.show-sql=true

spring.datasource.url = jdbc:mysql://localhost:3306/Chrisvy
spring.datasource.username=root
spring.datasource.password=

#Using the right database platform is extremly important on Spring Boot 2.0
spring.jpa.database-platform=org.hibernate.dialect.MySQL5Dialect


#CONFLICTS WITH HEROKU from local host
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL57Dialect
spring.jpa.hibernate.ddl-auto=update

There is two main routes for login and register users in api/UserController (http://localhost:8080/api/login and http://localhost:8080/api/register). I think that rest of the code in this app is preety straightforward so I inwite you to examine rest of app.

Frontend part / everything is in folder randsclient on my Github.

In this folder there is complete React App. You can download complete code and install (npm install) project in your editor and then try run this app. ( app will be available on your http://localhost:3000).  Firstly I invite you to closely examine package.json file so you can install required packages when you create your own app. Also easy way is to download my code and run npm install inside and then replace and change what you want.

package.json

{
  "name": "randsclient",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "classnames": "^2.2.6",
    "jwt-decode": "^2.2.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-redux": "^5.1.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

After you download and install my app you can try to run it with npm start. Here are some printscreens from frontend part and if you test this app you will see Redux, Axios and Validation in action, also if you wanna test login and register functionality please make sure that your server part is also running on http://localhost:8080

 

Complete code is available on my Github repoThank you for reading…

Tags: , , , , ,

Copyright by Kristijan Klepač 2018