Generate cybernetically enhanced JHipster Svelte web applications
This is a JHipster blueprint, that intends to use SvelteKit / Svelte as the client side development framework.
Refer to the changelog to gain more insights into each release details.
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
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
-
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 |
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
|
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
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
Apache-2.0 © Vishal Mahajan