Blog post about Angular and Quarkus development. #210

kabir · 2019-05-24T12:03:07Z

No description provided.

rsvoboda · 2019-05-27T14:05:57Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+    -DprojectArtifactId=blog-quarkus-ui-development \
+    -DprojectVersion=0.1.0 \
+    -DclassName="org.kabir.quarkus.ui.SampleResource" \
+    -Dextensions=io.quarkus:quarkus-resteasy,io.quarkus:quarkus-resteasy-jsonb


-Dextensions=io.quarkus:quarkus-resteasy-jsonb is sufficient

quarkus-resteasy is already added in template - https://github.com/quarkusio/quarkus/blob/master/devtools/common/src/main/resources/templates/basic-rest/java/pom-template.ftl#L31

Right now user will see warnings like:

[WARNING] 'dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: io.quarkus:quarkus-resteasy:jar -> duplicate declaration of version (?) @ line 46, column 17

rsvoboda · 2019-05-27T14:40:29Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+
+If we go to `/rest`, we end up in `RestComponent` which displays data from the `SampleResource` we saw above and also has a link back to `DefaultComponent`.
+
+Finally if we go to `/clientCallback` (which is triggered via `/servlet/callback`  in `/SampleServlet` we end up in `ClientCallbackComponent`.


/SampleServlet => SampleServlet

rsvoboda · 2019-05-27T14:46:25Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+----
+If you go to http://localhost:8080 you will get a page with links to `Other`, `Rest` and `Default`. Click on the `Other` and `Rest` ones, and it should all work.
+
+However while in the `Other` component, so that the address in the browser is http://localhost:8080/other, if you try to refresh the page you will end up with the following error message:


This message look a bit strange. What about following version?

However while in the Other component (http://localhost:8080/other), if you try to refresh the page you will end up with the following error message:

rsvoboda · 2019-05-28T07:55:06Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+        }
+    }
+
+    private boolean isIndexHtmlRequest(HttpServletRequest request) {


I would change the method name, it's confusing.

assumeAngularRoute() or isAngularRoute sound better to me

rsvoboda · 2019-05-28T07:59:41Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+
+== Quarkus and Angular UI Development
+
+In this blog post we will look at how to take advantage of the respective development modes of both Quarkus and Angular CLI and see how we can develop a zero turnaround web application backed by a RESTful API on Quarkus. While I am using Angular, the concepts should be the same for other web application frameworks.


the concepts should be the same for other web application frameworks.

Mention you looked at React and Vue and they support proxying API requests.

So the reader familiar with above two doesn't give up reading when not familiar with Angular

rsvoboda · 2019-05-28T08:24:17Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+$mvn clean
+$mvn package quarkus:dev
+----
+to start the Quarkus application. Note how we did not pass in `-Dui.dev` so we will no longer bundle the web application which saves us a significant amount of time. If you go to http://localhost:8080 you will get an error since we have no web application this time.


you will get an error

That's true if you remove webapp/dist/webapp first.

rsvoboda · 2019-05-28T10:11:08Z

_posts/2019-05-23-quarkus-and-angular-ui-development-mode.adoc

+Finally, to run this in production you need to run:
+[source,bash]
+----
+$mvn package -Dui


Add section about native image, this is very important part of Quarkus story.

mvn package -Dui -Pnative works fine and you see awesome

Quarkus 0.15.0 started in 0.007s. Listening on: http://[::]:8080

rsvoboda · 2019-05-28T13:15:47Z

@gsmet / @stuartwdouglas / @emmanuelbernard

Can you look into this blog post ?

It could possibly go out together with 0.16.0 release.

kabir · 2019-05-28T13:25:10Z

I will address @rsvoboda 's comments, but as it is a slight pain to retag all the code when I make changes I will wait for further comments from people. Or if someone lets me know it looks ok once I've incorporated those changes, I can do so then

emmanuelbernard · 2019-05-28T14:00:59Z

General comments as the front end is not my forte.

To me, the blog feels like you went through a lot of pains and hitting snatches but by luck recovered every time. Not sure that's the feeling we want to give. It looks like you want to explain the various points and then find a solution but I had this negative reading. Also it looks very complicated to setup :)

Have you tried and explored the idea of wording it with the following sections:

what we aim to achieve
ninja survival guide jsut ot get started (for the tl;dr;
a diagram explaining the various problems
the detailed solution that overcomes points in 3

I don't know if it would work best so take it as a proposal.

The other points are more technical:

servlets are a bit passé so having to define some is not awesome but a better solution will have to wait for the router API I suppose CC @stuartwdouglas
you have a lot of "stop quarkus and start it again which is not a nice experience. I wonder if that was mandatory or if that simply was due to you wanting to do step by step and therefore having these stops to update your poms and co?

kabir · 2019-05-28T14:19:51Z

The stop and start is to do all this step by step, yes. So it leads up to being able to do everything without needing to stop and start it.

To have something to demo (steps 1-3), it became quite lengthy for something which is not really that interesting, and which is where the bulk of the stop/start stuff is. I could push steps 1-3 into the example code repositories README and just refer to that from the blog. Then I can:

briefly run through the three problems I have seen 'selling' that in a more positive light. Something along the lines of "we can already change the output of the REST endpoint in quarkus:dev. Now let's see the simple steps to be able to do the same in the UI without repackaging the application"?
Address them with steps 4-6

Hopefully, once the whole thing is shorter I can make clearer what is actually needed (aka your ninja survival guide)

rsvoboda · 2019-05-28T14:26:30Z

I could push steps 1-3 into the example code repositories README

I would push full blog post to README, including steps 4-6

kabir · 2019-06-06T11:37:27Z

Replaced by #223

rsvoboda · 2019-06-07T12:48:05Z

Closing as this PR is invalid, followup one is merged.

kabir force-pushed the blog branch from 62e5ffa to 60878d2 Compare May 24, 2019 12:05

Blog post about Angular and Quarkus development.

8c90928

kabir force-pushed the blog branch from 60878d2 to 8c90928 Compare May 24, 2019 12:10

rsvoboda reviewed May 27, 2019

View reviewed changes

rsvoboda reviewed May 28, 2019

View reviewed changes

kabir mentioned this pull request Jun 6, 2019

Blog post about Angular and Quarkus development. #223

Merged

rsvoboda closed this Jun 7, 2019

holly-cummins mentioned this pull request Jun 23, 2025

Ensure past-present status for Quarkus Insights episodes is always correct #2342

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Blog post about Angular and Quarkus development. #210

Blog post about Angular and Quarkus development. #210

Uh oh!

kabir commented May 24, 2019

Uh oh!

rsvoboda May 27, 2019

Uh oh!

rsvoboda May 27, 2019

Uh oh!

rsvoboda May 27, 2019

Uh oh!

rsvoboda May 28, 2019

Uh oh!

rsvoboda May 28, 2019

Uh oh!

rsvoboda May 28, 2019

Uh oh!

rsvoboda May 28, 2019

Uh oh!

rsvoboda commented May 28, 2019

Uh oh!

kabir commented May 28, 2019

Uh oh!

emmanuelbernard commented May 28, 2019 •

edited

Loading

Uh oh!

kabir commented May 28, 2019 •

edited

Loading

Uh oh!

rsvoboda commented May 28, 2019

Uh oh!

kabir commented Jun 6, 2019

Uh oh!

rsvoboda commented Jun 7, 2019

Uh oh!

Uh oh!


		If we go to `/rest`, we end up in `RestComponent` which displays data from the `SampleResource` we saw above and also has a link back to `DefaultComponent`.

		Finally if we go to `/clientCallback` (which is triggered via `/servlet/callback` in `/SampleServlet` we end up in `ClientCallbackComponent`.


		== Quarkus and Angular UI Development

		In this blog post we will look at how to take advantage of the respective development modes of both Quarkus and Angular CLI and see how we can develop a zero turnaround web application backed by a RESTful API on Quarkus. While I am using Angular, the concepts should be the same for other web application frameworks.

Blog post about Angular and Quarkus development. #210

Blog post about Angular and Quarkus development. #210

Uh oh!

Conversation

kabir commented May 24, 2019

Uh oh!

rsvoboda May 27, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 27, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 27, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 28, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 28, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 28, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda May 28, 2019

Choose a reason for hiding this comment

Uh oh!

rsvoboda commented May 28, 2019

Uh oh!

kabir commented May 28, 2019

Uh oh!

emmanuelbernard commented May 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kabir commented May 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rsvoboda commented May 28, 2019

Uh oh!

kabir commented Jun 6, 2019

Uh oh!

rsvoboda commented Jun 7, 2019

Uh oh!

Uh oh!

emmanuelbernard commented May 28, 2019 •

edited

Loading

kabir commented May 28, 2019 •

edited

Loading