Posts Blazor app generation with JHipster
Post
Cancel

Blazor app generation with JHipster

Getting Started with JHipster

Prerequisites

  • The first step is to have JHipster and its related tools installed.
  • Next step is to install the blueprint
    1
    
    npm install -g generator-jhipster-dotnetcore
    
  • Call the generator
    1
    
    jhipster --blueprints dotnetcore
    

    After running the command, you have a few questions to answer, as Application name, authentication mode, client framework, etc. Once it’s done, you can build and run your application.

1
dotnet run --verbosity normal --project ./src/YourAppName/YourAppName.csproj

And here you’ll find all the instructions to get started with the blazor generation.

The generated frontend use bootstrap with SASS and the code generated is covered by unit test using bUnit library. You can generated CRUD operations on entities. This entities can contains relationships (one-to-one, one-to-many and many-to-many)

You can also find a sample app generated with blazor front here https://github.com/jhipster/jhipster-sample-app-blazor

Here is the project on GitHub

Generate entity using jdl

Here is the contents of my_file.jdl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
entity Blog {
	name String required minlength(3),
	handle String required minlength(2)
}

entity Entry {
	title String required,
	content TextBlob required,
	date Instant required
}

entity Tag {
	name String required minlength(2)
}

relationship ManyToOne {
	Blog{user(login)} to User,
	Entry{blog(name)} to Blog
}

relationship ManyToMany {
	Entry{tag(name)} to Tag{entry}
}

// Use Data Transfert Objects (DTO)
dto * with mapstruct

paginate Entry, Tag with infinite-scroll

Here is the command line to generate the entities with a jdl file

1
jhipster import-jdl my_file.jdl

Here are the messages generated by JHipster during code generation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
INFO! Using JHipster version installed globally                                           
INFO! No custom sharedOptions found within blueprint: generator-jhipster-dotnetcore at C:/
hipster-dotnetcore                                                                        
INFO! No custom commands found within blueprint: generator-jhipster-dotnetcore at C:/Users
er-dotnetcore                                                                             
INFO! Executing import-jdl C:\Users\bhoji\Downloads\jhipster-jdl.jdl                      
INFO! Found .yo-rc.json on path. This is an existing app                                  
INFO! The JDL is being parsed.                                                            
warn: An Entity name 'User' was used: 'User' is an entity created by default by JHipster. 
tes and relationships from it will be disregarded.                                        
INFO! Found entities: Blog, Entry, Tag.                                                   
INFO! The JDL has been successfully parsed                                                
INFO! Generating 3 entities.                                                              
     info Using blueprint generator-jhipster-dotnetcore for entity subgenerator           
     info Using blueprint generator-jhipster-dotnetcore for entity subgenerator           
     info Using blueprint generator-jhipster-dotnetcore for entity subgenerator           
                                                                                          
Found the .jhipster/Blog.json configuration file, entity can be automatically generated!  
                                                                                          
                                                                                          
The entity Blog is being updated.                                                         
                                                                                          
                                                                                          
Found the .jhipster/Entry.json configuration file, entity can be automatically generated! 
                                                                                          
                                                                                          
The entity Entry is being updated.                                                        
                                                                                          
                                                                                          
Found the .jhipster/Tag.json configuration file, entity can be automatically generated!   
                                                                                          
                                                                                          
The entity Tag is being updated.                                                          
                                                                                          
     info Using blueprint generator-jhipster-dotnetcore for entity-server subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-client subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-i18n subgenerator      
     info Using blueprint generator-jhipster-dotnetcore for entity-server subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-client subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-i18n subgenerator      
     info Using blueprint generator-jhipster-dotnetcore for entity-server subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-client subgenerator    
     info Using blueprint generator-jhipster-dotnetcore for entity-i18n subgenerator      
   create src\MyEnterpriseBlazor.Domain\Entities\Blog.cs                                  
   create src\MyEnterpriseBlazor\Controllers\BlogController.cs                            
   create src\MyEnterpriseBlazor.Domain\Repositories\Interfaces\IBlogRepository.cs        
   create src\MyEnterpriseBlazor.Infrastructure\Data\Repositories\BlogRepository.cs       
    force src\MyEnterpriseBlazor\Configuration\AutoMapper\AutoMapperProfile.cs            
    force src\MyEnterpriseBlazor.Infrastructure\Data\ApplicationDatabaseContext.cs        
   create test\MyEnterpriseBlazor.Test\Controllers\BlogResourceIntTest.cs                 
   create src\client\MyEnterpriseBlazor.Client\Models\BlogModel.cs                        
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Blog\BlogService.cs
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Blog\IBlogService.c
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\Blog.razor.cs          
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\Blog.razor             
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\BlogDetail.razor.cs    
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\BlogDetail.razor       
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\BlogUpdate.razor.cs    
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Blog\BlogUpdate.razor       
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Blog\BlogTest.cs             
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Blog\BlogUpdateTest.cs       
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Blog\BlogDetailTest.cs       
    force src\client\MyEnterpriseBlazor.Client\Shared\NavMenu.razor                       
    force src\client\MyEnterpriseBlazor.Client\Program.cs                                 
    force src\client\MyEnterpriseBlazor.Client\AutoMapper\AutoMapperProfile.cs            
   create src\MyEnterpriseBlazor.Domain\Entities\Entry.cs                                 
   create src\MyEnterpriseBlazor\Controllers\EntryController.cs                           
   create src\MyEnterpriseBlazor.Domain\Repositories\Interfaces\IEntryRepository.cs       
   create src\MyEnterpriseBlazor.Infrastructure\Data\Repositories\EntryRepository.cs      
   create test\MyEnterpriseBlazor.Test\Controllers\EntryResourceIntTest.cs                
   create src\client\MyEnterpriseBlazor.Client\Models\EntryModel.cs                       
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Entry\EntryService.
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Entry\IEntryService
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\Entry.razor.cs        
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\Entry.razor           
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\EntryDetail.razor.cs  
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\EntryDetail.razor     
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\EntryUpdate.razor.cs  
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Entry\EntryUpdate.razor     
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Entry\EntryTest.cs           
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Entry\EntryUpdateTest.cs     
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Entry\EntryDetailTest.cs     
   create src\MyEnterpriseBlazor.Domain\Entities\Tag.cs                                   
   create src\MyEnterpriseBlazor\Controllers\TagController.cs                             
   create src\MyEnterpriseBlazor.Domain\Repositories\Interfaces\ITagRepository.cs         
   create src\MyEnterpriseBlazor.Infrastructure\Data\Repositories\TagRepository.cs        
   create test\MyEnterpriseBlazor.Test\Controllers\TagResourceIntTest.cs                  
   create src\client\MyEnterpriseBlazor.Client\Models\TagModel.cs                         
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Tag\TagService.cs  
   create src\client\MyEnterpriseBlazor.Client\Services\EntityServices\Tag\ITagService.cs 
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\Tag.razor.cs            
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\Tag.razor               
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\TagDetail.razor.cs      
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\TagDetail.razor         
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\TagUpdate.razor.cs      
   create src\client\MyEnterpriseBlazor.Client\Pages\Entities\Tag\TagUpdate.razor         
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Tag\TagTest.cs               
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Tag\TagUpdateTest.cs         
   create test\MyEnterpriseBlazor.Client.Test\Pages\Entities\Tag\TagDetailTest.cs         
    force .jhipster\Blog.json                                                             
    force .jhipster\Entry.json                                                            
    force .jhipster\Tag.json                                                              
   create src\MyEnterpriseBlazor\ClientApp\src\i18n\en\blog.json                          
    force src\MyEnterpriseBlazor\ClientApp\src\i18n\en\global.json                        
   create src\MyEnterpriseBlazor\ClientApp\src\i18n\en\entry.json                         
   create src\MyEnterpriseBlazor\ClientApp\src\i18n\en\tag.json                           
Entity Blog generated successfully.                                                       
Entity Entry generated successfully.                                                      
Entity Tag generated successfully.                                                        
INFO! Congratulations, JHipster execution is complete!  

After the code generation, I tried to rebuild the solution. Unfortunately, it did not compile due to the fact that three classes are missing: BlogDto, EntryDto and TagDto.

DtoBlog

So I had to create them manually.

BlogDto.cs

1
2
3
4
5
6
7
8
9
    public class BlogDto
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        public string Handle { get; set; }
        public string UserId { get; set; }
    }

EntryDto.cs

1
2
3
4
5
6
7
8
9
10
11
12
    public class EntryDto
    {
        public int Id { get; set; }
        [Required]
        public string Title { get; set; }
        [Required]
        public string Content { get; set; }
        [Required]
        public DateTime Date { get; set; }
        public int BlogId { get; set; }
        public IList<TagDto> Tags { get; set; } = new List<TagDto>();
    }

TagDto.cs

1
2
3
4
5
6
    public class TagDto
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
    }

After the classes have been created. the solution compiles successfully. It’s time to try running the application. Unfortunately, I was getting errors. I quickly discovered I have to create the tables in the database myself.

Now, what tables should I create?

By using SQL Server Profiler, I managed to find out what tables are required. Blog, Entry and EntryTags tables need to be created.

Blog table

1
2
3
4
5
6
7
8
9
10
11
CREATE TABLE [dbo].[Blog](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](300) NOT NULL,
	[Handle] [nvarchar](300) NULL,
	[UserId] [nvarchar](450) NULL,
 CONSTRAINT [PK_Blog] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Entry table

1
2
3
4
5
6
7
8
9
10
11
12
CREATE TABLE [dbo].[Entry](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Title] [nvarchar](300) NOT NULL,
	[Content] [nvarchar](max) NOT NULL,
	[Date] [datetime] NOT NULL,
	[BlogId] [int] NULL,
 CONSTRAINT [PK_Entry] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

EntryTags table

1
2
3
4
5
6
7
8
9
10
CREATE TABLE [dbo].[EntryTags](
	[EntriesId] [int] NOT NULL,
	[TagsId] [int] NOT NULL,
 CONSTRAINT [PK_EntryTags] PRIMARY KEY CLUSTERED 
(
	[EntriesId] ASC,
	[TagsId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Entities Blog, Entry and EntryTags

In Summary

JHipster is a nice code generation tool. It generates a lot of files, so it saves a lot of time. The code is easy to understand. It also uses the Repository pattern, domain, dto (data transfer object). You can see my repository on GitHub

This post is licensed under CC BY 4.0 by the author.