Giter Site home page Giter Site logo

manuelff / spring-react Goto Github PK

View Code? Open in Web Editor NEW

This project forked from vikramgulia/spring-react

0.0 0.0 0.0 119 KB

App with Spring, React JS, Gradle and Webpack

Home Page: http://thetechnicaljournal.com/

License: MIT License

HTML 4.62% CSS 15.80% JavaScript 16.81% Java 62.77%

spring-react's Introduction

Spring Boot + Gradle + React + Webpack

This is a sample application to get started on using React with Spring Boot.

Technologies

  1. Spring Boot - https://start.spring.io
  2. Gradle - https://gradle.org
  3. ReactJS - https://reactjs.org
  4. Webpack - https://webpack.js.org

SpringBoot

Here, spring boot is acting as our backend which is serving the initial page and provides API's for other interactions.

Gradle

Build tool for our app

REACT JS

A JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Webpack

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. It helps compile your javascript files (in this example react js files) into a bundle.js making sure most browsers are able to understand while still allowing engineers to code in latest ES syntax.

Getting Started

Clone/Fork the repo and get started.

  1. Go to your terminal and run the command ./gradlew npm_install to get all node_modules set up.
  2. To get the app up and running in dev mode to the following -
    1. In one terminal, start the spring app to act as our backend - ./gradlew bootRun.
    2. In another terminal window, let us start our front end in hot loader mode. We are using webpack-dev-server to help us with it. Run the command ./gradlew start.
    3. Done. the terminal window will open a browser window pointing to http://localhost:3030/ and you will see a simple login page. Use admin/admin to get to the welcome page.
  3. To run the react tests, execute ./gradlew check
  4. To compile the whole app into a single executable, run ./gradlew assemble. This will bundle your react app into a single javascript file, create the index page with correct tag for bundled js, and copy these files to jar's static folder.
  5. Once compiled run - java -jar spring-app/build/libs/spring-react-0.0.1.jar and you will have your app running on http://localhost:8080/.

Working on -

  1. Dockerfile
  2. Adding other webpack plugins
  3. Making size of bundled file more smaller.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.