Welcome to the world of JHipster! In this guide, we’ll walk you through the setup and development of a sample application using JHipster 8.7.1. Think of JHipster as your scaffold builder, assembling the perfect environment for building modern web applications with ease.

Understanding the Project Structure

The project structure generated by JHipster is meticulously organized, resembling a well-structured bookshelf where each genre (or component) has its dedicated space:

• Node.js: Essential for generating and recommended for development. JHipster automatically generates package.json for a seamless development experience.
• .yo-rc.json: A Yeoman configuration file where JHipster settings are stored.
• .npmw: A wrapper enabling the use of local npm installations, ensuring consistency in your Node environment.
• src/main/docker: Contains Docker configurations, illustrating how your application interacts with other services.

Development Essentials

To kickstart your development process, follow these steps:

• Ensure Node and npm are installed. JHipster will manage this automatically for you.
• Run the command below to install dependencies when package.json changes:

.npmw install

• Use two terminal windows to run the following commands for a refreshing development experience:

.mvnw

.npmw start

Adding Progressive Web App (PWA) Support

PWA enhances your web app with offline capabilities. By default, it’s turned off. To enable it:

• Uncomment the following line in src/main/webapp/app/app.config.ts:

typescriptServiceWorkerModule.register(ngsw-worker.js, enabled: false),

Managing Dependencies

To include libraries, like Leaflet, simply run:

.npmw install --save --save-exact leaflet

For TypeScript definitions, install it as a dev dependency:

.npmw install --save-dev --save-exact @types/leaflet

Then, import Leaflet in your configuration files to let Webpack know about it:

• Modify src/main/webapp/app/app.config.ts: import 'leaflet/dist/leaflet.js';
• Update src/main/webapp/content/css/vendor.scss: @import 'leaflet/dist/leaflet.css';

Building for Production

Prepare your application for production by packaging it as a JAR file:

.mvnw -Pprod clean verify

To run the application, execute:

java -jar target/*.jar

Next, navigate to http://localhost:8080 in your browser to see your app in action.

Testing Your Application

Testing is vital for ensuring your application operates smoothly. You can use the following:

• Spring Boot Tests: Execute tests with .mvnw verify.
• Gatling Performance Tests: Run via .mvnw gatling:test.
• Client Tests: Use .npmw test for unit tests, and for end-to-end tests, start Spring Boot and run .npmw run e2e.

Troubleshooting

If you encounter issues during development, consider the following:

• Check the terminal for error messages and revisit the documentation at JHipster Documentation.
• Ensure you have the correct versions of Node.js and npm by running node -v and npm -v.
• If unsure about your configurations, delete the node_modules directory and your package.json lock file, then reinstall dependencies by running .npmw install.
• Check that any dependencies you’ve added are correctly imported and configured in your project files.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.