-
Notifications
You must be signed in to change notification settings - Fork 334
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
update getting started (use gwt-maven-archetype) #354
Merged
Merged
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
1367a2e
update getting started (use gwt-maven-archetype)
FrankHossfeld 5cbd5a9
fixed typo
FrankHossfeld 20b3980
Merge branch 'main' into getting-started-v2
FrankHossfeld 9c291c7
Merge remote-tracking branch 'origin/getting-started-v2' into getting…
FrankHossfeld 4a15ea6
fixed typo
FrankHossfeld 09e059b
add hint of gwt-maven-springboot-archetype in case you want to create…
FrankHossfeld 47d3e9d
Update src/main/markdown/gettingstarted-outdated.md
FrankHossfeld 911e66d
fixed typo
FrankHossfeld 034049e
add Linux
FrankHossfeld 1f30bf1
review feedback
FrankHossfeld ddabd4b
Merge remote-tracking branch 'origin/getting-started-v2' into getting…
FrankHossfeld 305cf16
update IntelliJ set up
FrankHossfeld d5e8ded
review feedback
FrankHossfeld 03ab43d
Merge remote-tracking branch 'origin/getting-started-v2' into getting…
FrankHossfeld 946a7bd
review feedback - cool URIs don't change
FrankHossfeld 138396b
review feedback
FrankHossfeld c1e6972
review feedback
FrankHossfeld 9d3d1e3
review feedback
FrankHossfeld 34e19db
review feedback
FrankHossfeld File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,207 @@ | ||
Getting Started | ||
=== | ||
|
||
Starting with 2.11.0 of the GWT SDK the [webAppCreator](gettingstarted-outdated.html) is deprecated. Instead, we will use | ||
the [gwt-maven-archetypes](https://github.com/tbroyer/gwt-maven-archetypes) by Thomas Broyer to create a new GWT project. Using the **artifactId: modular-webapp** | ||
the plugin generates a Maven project with separate modules for | ||
|
||
* client | ||
* server | ||
* shared. | ||
|
||
**Separation of code is the way to go in modern web development.** | ||
|
||
## TOC | ||
|
||
* [Prerequisites](#prereqs) | ||
* [Create your first web application](#create) | ||
* [Run locally in super dev mode](#run) | ||
* [Make a few changes](#change) | ||
* [Debugging the browser](#bebug) | ||
* [Compile and run in production mode](#compile) | ||
* [Set up an IDE](#setup) | ||
|
||
## Prerequisites<a id="prereqs"></a> | ||
|
||
1. GWT 2.11.0 still supports Java 8 (running and building). We suggest to use at least Java 11 or 17. If necessary, download and | ||
install the Java SE Development Kit (JDK) <a href="https://adoptium.net/de/temurin/releases/" | ||
rel="nofollow">from Eclipse Temurin</a> for your platform. Install the JDK by following the | ||
installation instructions. | ||
2. Apache Maven is also necessary to run the gwt-maven-archetype. In this sample the Maven CLI is used. If | ||
you don't already have it, install <a href="https://maven.apache.org/download.cgi" rel="nofollow">Apache Maven</a>. | ||
|
||
If you have problems running the gwt-maven-archetype from the command line, try setting the | ||
$JDK_HOME environment variable with export JDK_HOME="[pathToJDK]" and $MAVEN_HOME environment variable with export MAVEN_HOME="[pathToMaven]" | ||
and add both to the path. | ||
|
||
## Create your first web application<a id="create"></a> | ||
|
||
Open a terminal and choose the directory you like to generate the project into. Generate a new project using: | ||
|
||
``` | ||
mvn archetype:generate \ | ||
-DarchetypeGroupId=net.ltgt.gwt.archetypes \ | ||
-DarchetypeVersion=LATEST \ | ||
-DarchetypeArtifactId=modular-webapp | ||
``` | ||
|
||
The archetype will request values for: | ||
|
||
* **groupId**: com.mycompany.mywebapp | ||
* **artifactId**: mywebapp | ||
* **version**: HEAD-SNAPSHOT | ||
* **package**: com.mycompany.mywebapp | ||
* **module-short-name**: mywebap | ||
|
||
After entering the parameter above, the terminal shows something like that: | ||
|
||
``` | ||
[INFO] Using property: module = App | ||
Define value for property 'groupId': com.mycompany.mywebapp | ||
Define value for property 'artifactId': mywebapp | ||
Define value for property 'version' 1.0-SNAPSHOT: : HEAD-SNAPSHOT | ||
Define value for property 'package' com.mycompany.mywebapp: : com.mycompany.mywebapp | ||
Define value for property 'module-short-name' app: : MyWebApp | ||
Confirm properties configuration: | ||
module: App | ||
groupId: com.mycompany.mywebapp | ||
artifactId: mywebapp | ||
version: HEAD-SNAPSHOT | ||
package: com.mycompany.mywebapp | ||
module-short-name: mywebapp | ||
Y: : | ||
``` | ||
|
||
Enter **Y** to continue. | ||
|
||
Now, the new project will be generated and you see the following messages: | ||
|
||
``` | ||
[INFO] ---------------------------------------------------------------------------- | ||
[INFO] Using following parameters for creating project from Archetype: modular-webapp:LATEST | ||
[INFO] ---------------------------------------------------------------------------- | ||
[INFO] Parameter: groupId, Value: com.mycompany.mywebapp | ||
[INFO] Parameter: artifactId, Value: mywebapp | ||
[INFO] Parameter: version, Value: HEAD-SNAPSHOT | ||
[INFO] Parameter: package, Value: com.mycompany.mywebapp | ||
[INFO] Parameter: packageInPathFormat, Value: com/mycompany/mywebapp | ||
[INFO] Parameter: package, Value: com.mycompany.mywebapp | ||
[INFO] Parameter: module-short-name, Value: MyWebApp | ||
[INFO] Parameter: module, Value: App | ||
[INFO] Parameter: groupId, Value: com.mycompany.mywebapp | ||
[INFO] Parameter: artifactId, Value: mywebapp | ||
[INFO] Parameter: version, Value: HEAD-SNAPSHOT | ||
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-client/pom.xml | ||
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-shared/pom.xml | ||
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-server/pom.xml | ||
[INFO] Project created from Archetype in dir: /Users/gwt-user/Desktop/mywebapp | ||
[INFO] ------------------------------------------------------------------------ | ||
[INFO] BUILD SUCCESS | ||
[INFO] ------------------------------------------------------------------------ | ||
[INFO] Total time: 01:09 min | ||
[INFO] Finished at: 2023-12-17T17:38:02+01:00 | ||
[INFO] ------------------------------------------------------------------------ | ||
``` | ||
|
||
Switch to the generated directory by entering `cd mywebapp`. | ||
|
||
Listing of the directory (**Windows**: dir, **Mac and Linux**: ls -la), shows: | ||
|
||
``` | ||
drwxr-xr-x@ 6 gwt-user staff 192 Dec 17 17:38 . | ||
drwx------@ 50 gwt-user staff 1600 Dec 17 17:38 .. | ||
drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-client | ||
drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-server | ||
drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-shared | ||
-rw-r--r--@ 1 gwt-user staff 7423 Dec 17 17:38 pom.xml | ||
``` | ||
|
||
## Run locally in super dev mode<a id="run"></a> | ||
|
||
To start the code server, run the following command: | ||
|
||
``` | ||
mvn gwt:codeserver -pl *-client -am | ||
``` | ||
|
||
and entering the following command in another terminal window to start the server: | ||
|
||
``` | ||
mvn jetty:run -pl *-server -am -Denv=dev | ||
``` | ||
|
||
Now, switch to your preferred browser (we suggest using: Chrome, FireFox or Opera) and enter: | ||
|
||
``` | ||
http://lcoalhost:8080 | ||
``` | ||
|
||
Yet, the application is running in super dev mode. You see something like this in the browser: | ||
|
||
<div class="screenshot"><a href="images/mywebapp.png"><img src="images/mywebapp.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
## Make a few changes<a id="change"></a> | ||
|
||
Let's change the label of the button. Because this is something on the client side, we need to locate the source code in the client module. | ||
The source code is located in the `mywebapp-client/src/main/java/com/mycompany/mywebapp` subdirectory and the source in the `App.java` class. | ||
|
||
Look inside `App.java`. Line 42 constructs the "Send" button. | ||
|
||
``` | ||
final Button sendButton = new Button("Send"); | ||
``` | ||
|
||
Change the text from "Send" to "Send to Server". | ||
|
||
``` | ||
final Button sendButton = new Button("Send to Server"); | ||
``` | ||
|
||
Save the file and simply click "Refresh" in your browser to see your change. The button should now say "Send to Server" instead of "Send": | ||
|
||
## Debugging the browser<a id="debug"></a> | ||
|
||
In super dev mode, you can easily debug your client code in the browser. While running your application, open the dev tools | ||
in your browser. Select the `Sources`-tab and press `ctrl-P` (Windows/Linux) or `cmd-P` (macOS). A popup opens. Enter `App.java` and press return. | ||
|
||
<div class="screenshot"><a href="images/sdm-debugger.png"><img src="images/sdm-debugger.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
The source code of the `App.java` class is displayed in the debugger. Add a breakpoint by clicking of Line number 94. Press the send button. | ||
The execution will stop at line 94. The stacktrace is visible, the content of the variable, etc. | ||
|
||
<div class="screenshot"><a href="images/sdm-debugger-breakpoint.png"><img src="images/sdm-debugger-breakpoint.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
## Compile and run in production mode<a id="compile"></a> | ||
|
||
To run the application as JavaScript in what GWT calls "production mode", create the application by executing: | ||
|
||
``` | ||
mvn clean package | ||
``` | ||
|
||
The Maven "package" goal invokes the GWT compiler which generates a number of JavaScript and HTML files from the | ||
MyWebApp Java source code in the `target/` subdirectory. There you will find a `mywebapp-server-HEAD-SNAPSHOT.war`. | ||
You can deploy this war file to every servlet engine and run it. Once running, enter `mywebapp-server-HEAD-SNAPSHOT/index.html` | ||
in your web browser. The application should look identical to the super dev mode above. You can change the name of the war using | ||
Maven 'buildname`. | ||
|
||
Congratulations! You've created your first web application using GWT. | ||
Since you've compiled the project, you're now running pure JavaScript and | ||
HTML that works in Edge, Chrome, Firefox, Safari, and Opera. You could now deploy | ||
your application to production by serving the HTML and JavaScript files from your servlet engine. | ||
|
||
In case you prefer a Spring Boot server, check the | ||
[gwt-maven-springboot-archetype](https://github.com/NaluKit/gwt-maven-springboot-archetype) plugin. It creates a | ||
project in a similar way, but uses Spring Boot instead of Jetty on the server side. | ||
|
||
## Set up an IDE<a id="setup"></a> | ||
|
||
Now that you've created your first app, you probably want to do something a | ||
bit more interesting. But first, if you normally work with an IDE you'll want to | ||
set up your IDE to use the GWT SDK: | ||
|
||
[Set up Eclipse](usingeclipse.html) | ||
|
||
[Set up IntelliJ](usingintellij.html) | ||
|
||
Now, with your sample project set up, head over to [Build a Sample GWT App](doc/latest/tutorial/gettingstarted.html). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
Using IntelliJ | ||
=== | ||
|
||
GWT provides a set of tools that can simply be used with a | ||
text editor, the command line, and a browser. However, you may also use GWT with your | ||
favorite IDE. The Idea IntelliJ Ultimate Edition provides a GWT plugin, but the free Idea IntelliJ Community Edition | ||
is all you need. IntelliJ provides awesome Maven support, enabling the IDE to read the project classpath, and easily create run configurations for compiling and running a GWT project. | ||
|
||
* [Download IntelliJ](#intellij) | ||
* [Import a Web Application](#importing) | ||
* [Run locally in Super Dev Mode](#running) | ||
|
||
## Download IntelliJ<a id="intellij"></a> | ||
|
||
If you do not already have IntelliJ, you may download it from the [IntelliJ Website](https://www.jetbrains.com/idea/download/). | ||
|
||
## Import a Web Application<a id="importing"></a> | ||
|
||
To import a Web Application - create with an archetype creator, select **File > New > Project from existing source** | ||
from the File menu. Select the root directory of the project you want to import and press `enter`. | ||
|
||
A dialog opens: | ||
|
||
<div class="screenshot"><a href="images/import-into-intellij.png"><img src="images/import-into-intellij.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
Press `Create`. The import process starts and after a few seconds, the project window appears: | ||
|
||
<div class="screenshot"><a href="images/intellij-project.png"><img src="images/intellij-project.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
## Run locally in Super Dev Mode<a id="running"></a> | ||
|
||
To improve the development experience, you can set up two run configurations, one for the code server and another for the server. | ||
|
||
### Code Server Run Configuration | ||
|
||
Press `Edit configuration`, a popup appears. Now press `+` and select `Maven`. | ||
|
||
Enter `gwt:codeserver -pl mywebapp-client -am` in the field under `Run`: | ||
|
||
<div class="screenshot"><a href="images/intellij-run-code-server.png"><img src="images/intellij-run-code-server.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
Now you have a run configuration, that starts the code server. | ||
|
||
Note: When running the code server from the command line, you need to run `gwt:codeserver -pl *-client -am`. | ||
This will not work inside a running configuration. Here you have to use the module name instead of '*'. Inside a run | ||
configuration, the command line looks like that: `gwt:codeserver -pl mywebapp-client -am`. | ||
|
||
### Server Run Configuration | ||
|
||
Press `Edit configuration`, a popup appears. Now press `+` and select `Maven`. | ||
|
||
Enter `mvn jetty:run -pl *-server -am -Denv=dev` in the field under run: | ||
|
||
<div class="screenshot"><a href="images/intellij-run-server.png"><img src="images/intellij-run-server.png" alt="Screenshot" width="42%"/></a></div> | ||
|
||
Now, you have a run configuration, that starts the server. | ||
|
||
Note: you have to use the module name instead of '*'. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe adopt the note about forcing a new version of this plugin, so you don't get extra newlines?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am missing my changes ..