general meeting
June General Meeting
We will be back at Bel Aire in their meeting room.
Full Stack Development with React
We will walk through various aspects of the Full Stack Development with Spring Boot and React using Fedora 40.
Tools in use
- Fedora 40
- Eclipse
- VS Code
- MariaDB
sudo dnf install mariadb-server - Postman
- nvm
- Mysql JDBC driver
- Fedora Java Alternatives
Create the database and the user
create database cardb character set utf8;
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER,
CREATE TEMPORARY TABLES ON cardb.*
TO 'brian'@'localhost' IDENTIFIED BY 'Rockit2';
Spring resource to connect to mysql
spring.datasource.url=jdbc:mariadb://localhost:3306/cardb
spring.datasource.username=brian
spring.datasource.password=Rockit2
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto=create-drop
spring.jpa.show-sql=true
spring.jackson.serialization.FAIL_ON_EMPTY_BEANS=false
spring.data.rest.basePath=/api
Fix eclipse crashing. Add this to .bashrc
export WEBKIT_DISABLE_COMPOSITING_MODE=1
Verify nvm configuration for the shell.
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
Start database
sudo service mariadb start
Check that user can connect to MariaDB
mysql -u brian -p cardb
Import Chapter 5 example code and modify SecurityConfig.java per book [Hinkula,238]. We will not have security settings for this demonstration.
http.csrf().disable().cors().and()
.authorizeRequests().anyRequest().permitAll();
Update application.properties
Start CarDatabaseApplication.java.
Verify REST interface for cars with PostMan
Check npm conifuguration. Create carfront skeleton and install
library dependencies [Hinkula,239].
npx create-react-app carfront
cd carfront
npm install @mui/material @emotion/react @emotion/styled
Add the components folder to carfront project [Hinkula,245]. Create
Carlist.js and add content.
Verify that the Spring Boot backend is running CardatabaseApplication.
Start the React application from the terminal npm start.
Brian