npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-jhipster-svelte

v1.2.0

Published

A svelte.js blueprint to generate cybernetically enhanced web applications.

Downloads

231

Readme

JHipster Svelte

NPM version code style: prettier Generated applications build status

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 of JHipster. 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 to jsvelte 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 compatible JHipster Svelte and JHipster 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:

  1. Link svelte blueprint globally:
cd generator-jhipster-svelte
npm link
  1. 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
  1. Create a new directory for your application and link JHipster and svelte 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