In this article, we will set up a local full-stack application if you don't already have one. If you have already set it up or want to develop your own specific app, feel free to skip this article. I will list the main software/languages used for the sample app (called "my notes") and provide links to Git repositories to clone, along with any extra details you should know.

Database

Software:pgAdmin 4(version 8.8)

Click here for my-notes-db git repo

We will be creating a simple PostgreSQL database. This article explains how to create a new database in pgAdmin. Once you do this, you can run the create.sql script from the my-notes-db Git repo. This will create two tables, Users and Notes, and insert some sample data. Feel free to explore. Important details to note are the host, port, database name, user, and password. My values are listed below, so going forward I will reference these. You should use your own values in their place:

• host: localhost

• port: 5432

• database name: MyNotesDB

• user: postgres

• password: 1234

REST API

Software:IntelliJ IDEA(2023.3.5), Java(21.0.2), Maven(3.9.5)

Click here for my-notes-app git repo

The REST API is a simple Spring Boot Java app, based on this concise Spring tutorial: https://spring.io/guides/gs/spring-boot. Cloning the my-notes-app repo has everything configured, so you can go ahead and do this. The only file you need to update is the application.properties file in the src/main/resources folder with the database connection info we noted in the previous section:

• spring.datasource.url: This value is of the format "jdbc:postgresql://{host}:{port}/{database name}". As we are doing a jdbc connection to a postgresql database; if you are using different languages update accordingly.

• spring.datasource.username: {user} value from the previous section

• spring.datasource.password: {password} value from the previous section

You can leave the server.port and spring.datasource.driver-class-name values as default. Run the Application class, and it should be live at "http://localhost:5000/". Paste this link into your web browser, and you should see a page saying "Status: OK" if everything went well.

Front End

Software: WebStorm(2019.2.3), node(18.12.1), npm(8.19.2)

Click here for my-notes-web repo

The front end is a simple react web app, based on this simple react starter app guide: https://create-react-app.dev/docs/getting-started. We have just one config property to set here, in the .env file under src folder.

• REACT_APP_API_BASE_URL: localhost:5000

Assuming your REST API is running on port 5000 like we configured earlier, you can leave this as is, otherwise set it to the appropriate host:port. You can run the web app from the command line; cd into "my-notes-web" root folder, and run "npm start". Double check your REST API app is running, and then the web app should start on http://localhost:3000/. Important that if your web app is running on a different port, and you are encountering CORS policy issues in the browser console trying to access your REST API, you will need to update the port value in the REST API in the NotesController class:

There are 2 instances to update. Restarting your REST API app should then fix this issue.

Summary & Notes

We have configured our 3 components (database, REST API and front end) to run together locally:

In the next article we will begin to work with AWS.