generator-jhipster-svelte
v1.2.0
Published
A svelte.js blueprint to generate cybernetically enhanced web applications.
Downloads
202
Readme
JHipster Svelte
Generate cybernetically enhanced JHipster Svelte web applications
Introduction
This is a JHipster blueprint, that intends to use SvelteKit / Svelte as the client side development framework.
What's new
Refer to the changelog to gain more insights into each release details.
Supported flows and integrations
Following integrations are supported:
✅ Monolithic, Micro-services architecture applications
✅ Spring WebFlux based reactive applications
✅ Session, JWT, OIDC (Keycloak, Okta, Auth0 out of box integration) authentication types
✅ Dark Mode support
✅ SvelteKit, Vite integration
✅ Tailwind CSS
✅ Prettier, EsLint integration
✅ Cypress integration for end to end tests
✅ Jest and Testing Library integration for unit tests
✅ JHipster application JDL
✅ JHipster entity JDL
✅ JHipster elasticsearch integration
✅ Swagger UI
Following functional flows are covered with end-to-end tests:
✅ Sign in
✅ Sign up
✅ Forgot Password
✅ Home
✅ Account
✅ Change Password
✅ Settings
✅ Sign out
✅ Administration
✅ User Management (List, Create, Update, View, Delete)
✅ Loggers
✅ Docs (Swagger UI)
✅ Gateway (micro-services routes)
✅ Entities
✅ Entity (List, Create, Update, View, Delete, Search, Pagination)
For more details, you can check out the source code of sample application
Technical Stack
Installation
To install the blueprint, run below command:
npm install -g generator-jhipster-svelte
To update the blueprint, run below command:
npm update -g generator-jhipster-svelte
Usage
JHipster Svelte blueprint exposes a
cli
to use the correct version ofJHipster
. Run the below command to generate new applications (interactive
approach):jsvelte
Alternatively, you can also use the application
JDL
to generate new applications (config
approach). Refer to JDL application documentation for all supported options.Create a new application JDL like below and save it in a file (
app.jdl
in this example):application { config { baseName SampleBlogApp, applicationType monolith, authenticationType session, packageName tech.jhipster.samples.blog, devDatabaseType h2Disk, prodDatabaseType postgresql, cacheProvider caffeine, buildTool maven } entities * } entity Blog { name String required minlength(3) handle String required minlength(2) } entity Post { title String required content TextBlob required date Instant required } entity Tag { name String required minlength(3) } relationship ManyToOne { Blog{user(login)} to User with builtInEntity Post{blog(name)} to Blog } relationship ManyToMany { Post{tag(name)} to Tag{entry} } paginate Tag with pagination
Or, To generate a
micro-services
architecture application, use JDL like below and save it in a file (app.jdl
in this example):application { config { baseName gateway packageName tech.jhipster.samples.gateway applicationType gateway authenticationType oauth2 devDatabaseType h2Disk, prodDatabaseType postgresql serviceDiscoveryType eureka testFrameworks [cypress] reactive true } entities Blog, Post, Tag } application { config { baseName blog packageName tech.jhipster.samples.blog applicationType microservice authenticationType oauth2 prodDatabaseType mysql serverPort 8081 serviceDiscoveryType eureka } entities Blog, Post, Tag } entity Blog { name String required minlength(3) handle String required minlength(2) } entity Post { title String required content TextBlob required date Instant required } entity Tag { name String required minlength(2) } relationship ManyToOne { Blog{user(login)} to User with builtInEntity Post{blog(name)} to Blog } relationship ManyToMany { Post{tag(name)} to Tag{post} } paginate Post, Tag with pagination microservice Blog, Post, Tag with blog deployment { deploymentType docker-compose serviceDiscoveryType eureka appsFolders [gateway, blog] }
Refer to JDL entity fields documentation for all supported entity data types and constraints. Refer to JDL relationships documentation for supported relationships and syntax. Refer JHipster micro-services documentation for all supported components.
Pass
import-jdl
option along the file path tojsvelte
cli to generate new application:jsvelte import-jdl app.jdl
To generate Swagger UI, pass
--swagger-ui
option:jsvelte import-jdl app.jdl --swagger-ui
If you have already setup JHipster on your workstation, then, run the below command (it overrides to use the global
JHipster
version). Be cautious to use compatibleJHipster Svelte
andJHipster
versions.jhipster --blueprints svelte
JHipster Compatibility Matrix
| JHipster
| JHipster Svelte
|
| ---------- | ----------------- |
| 6.10.5
| 0.1
- 0.2.1
|
| 7.0.x
| 0.3
- 0.4
|
| 7.1.x
| 0.5
|
| 7.3.x
| 0.6
|
| 7.4.x
| 0.7
- 0.7.1
|
| 7.8.x
| 0.8
- 0.9
|
| 7.9.x
| 0.10.1 - 1.1.0
|
| 8.7.x
| >= 1.2.0
|
Docker development
JHipster Svelte docker images are available at DockerHub
To develop against the latest published release, follow below steps:
- Pull the
JHipster Svelte
docker image:
docker pull jhipster/jhipster-svelte
In case, you want to try out the latest code (unpublished), then, pull the image with main
tag as:
docker pull jhipster/jhipster-svelte:main
- Create a new directory for your application and run the below command to generate the application:
mkdir svelte-app && cd svelte-app
docker run -it --rm -v $PWD:/app jhipster/jhipster-svelte
You can also run the generated application from within the container. Following examples consider
maven
as the build tool:- To run unit test cases, use the command:
docker run -it --rm -v $PWD:/app -v ~/.m2:/home/jsvelte/.m2 --entrypoint ./mvnw jhipster/jhipster-svelte clean test
- To start the application using the default
dev
profile, use the command:
docker run -it --rm -v $PWD:/app -v ~/.m2:/home/jsvelte/.m2 -p 8080:8080 --entrypoint ./mvnw jhipster/jhipster-svelte -DskipTests
Access application with http://localhost:8080/
If you would like to access the container file system, you can also attach a bourne shell:
docker run -it --rm -v $PWD:/app -v ~/.m2:/home/jsvelte/.m2 --entrypoint sh jhipster/jhipster-svelte
🛠️ Local Development
Pull requests are encouraged and always welcome.
To setup your development environment, follow below steps:
- Link svelte blueprint globally:
cd generator-jhipster-svelte
npm link
- Link a development version of JHipster to your blueprint (optional: required only if you want to use a non-released JHipster version, like the main branch or your own custom fork)
cd generator-jhipster
npm link
cd generator-jhipster-svelte
npm link generator-jhipster
- Create a new directory for your application and link
JHipster
andsvelte
blueprint.
mkdir my-app && cd my-app
npm link generator-jhipster-svelte
npm link generator-jhipster (Optional: Needed only if you are using a non-released JHipster version)
jsvelte
License
Apache-2.0 © Vishal Mahajan