Run locally using bundler, use whatever port
bundle exec jekyll serve -P 4001
Open up post/markdown page locally
Open inspect and navigate to js code
Add breakpoints by clicking on the line numbers on the left.
When running code, press the arrow to step through each breakpoint. In our case, the code will be run when attempting to login.
Backend
Navigate to Main.java
In VSCode, press on the arrow next to the run button and click "Debug Java"
Demonstration
First, we run our frontend locally with bundle exec jekyll serve -P 4001 and navigate to http://localhost:4001/teacher_portfolio/java/login
(You can choose any port, but preferably not 4000 to see a CORS error later)
Then, inspect element and find the "login" js code in Sources
Setting three breakpoints on the .fetch, .then, and .catch allows us to see possible points of error from our frontend.
The following errors occur in different cases when trying to sign in:
ERR_CONNECTION_REFUSED occurs from not running the backend, and is fixed by doing so
This CORS error occurs from not allowing the correct origins on MvcConfig.java
This error is fixed by making sure the origin is allowed, and in this case, we had to change the port to match our localhost.
@Override
public void addCorsMappings(@NonNull CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("https://nighthawkcoders.github.io", "http://localhost:4001"); // Changed port to 4001 from 4000
}
The 401 error occurs from an authorization issue, which in this case was from incorrect login credentials
This is fixed by making sure to use the correct login information from Person.java, as we testing with a random password, instead of the actual password initialized within the file.
How to Run with Debugger
Frontend
Run locally using bundler, use whatever port
bundle exec jekyll serve -P 4001
Open up post/markdown page locally![Screen Shot 2024-03-05 at 9 18 41 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/bee24be5-9fc4-4dc1-afd2-a1508b440175)
Open inspect and navigate to js code![Screen Shot 2024-03-05 at 9 19 59 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/924bee8b-5c97-4cc1-b769-fa2f09ea125c)
Add breakpoints by clicking on the line numbers on the left.![Screen Shot 2024-03-05 at 9 19 45 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/5726a9b6-714c-4ae7-b92f-25b52475da21)
When running code, press the arrow to step through each breakpoint. In our case, the code will be run when attempting to login.![Screen Shot 2024-03-05 at 10 13 50 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/1022cfa3-4e0c-437d-b761-312b722088b4)
Backend
Demonstration
First, we run our frontend locally with
bundle exec jekyll serve -P 4001
and navigate to http://localhost:4001/teacher_portfolio/java/login (You can choose any port, but preferably not 4000 to see a CORS error later)Then, inspect element and find the "login" js code in Sources
Setting three breakpoints on the .fetch, .then, and .catch allows us to see possible points of error from our frontend.![Screen Shot 2024-03-05 at 9 19 45 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/5726a9b6-714c-4ae7-b92f-25b52475da21)
The following errors occur in different cases when trying to sign in:
ERR_CONNECTION_REFUSED
occurs from not running the backend, and is fixed by doing soThis CORS error occurs from not allowing the correct origins on![Screen Shot 2024-03-05 at 9 24 04 AM](https://github.com/aidenhuynh/Epic_CSA/assets/112529809/92f3094e-a7b2-4cd5-abdb-e922e466f0be)
MvcConfig.java
This error is fixed by making sure the origin is allowed, and in this case, we had to change the port to match our localhost.
This is fixed by making sure to use the correct login information from Person.java, as we testing with a random password, instead of the actual password initialized within the file.
Successful Run
The expected outcome of properly avoiding all of these errors is being redirected to the data page (http://localhost:4001/teacher_portfolio/java/data). Yay!