packtpublishing / asp.net-core-and-vue.js

ASP.NET Core and Vue.js, published by Packt

ASP.NET Core and Vue.js

This is the code repository for ASP.NET Core and Vue.js, published by Packt.

Build real-world, scalable, full-stack applications using Vue.js 3, TypeScript, .NET 5, and Azure

What is this book about?

Vue.js 3 is faster and smaller than the previous version, and TypeScript’s full support out of the box makes it a more maintainable and easier-to-use version of Vue.js. Then, there's ASP.NET Core 5, which is the fastest .NET web framework today. Together, Vue.js for the frontend and ASP.NET Core 5 for the backend make a powerful combination. This book follows a hands-on approach to implementing practical methodologies for building robust applications using ASP.NET Core 5 and Vue.js 3. The topics here are not deep dive and the book is intended for busy .NET developers who have limited time and want a quick implementation of a clean architecture with popular libraries.

This book covers the following exciting features:

• Discover CQRS and mediator patterns in the ASP.NET Core 5 web API
• Use Serilog, MediatR, FluentValidation, and Redis in ASP.NET
• Explore common Vue.js packages such as Vuelidate, Vuetify, and Vuex
• Manage complex app states using the Vuex state management library
• Write integration tests in ASP.NET Core using xUnit and FluentAssertions
• Deploy your app to Microsoft Azure using the new GitHub Actions for continuous integration and continuous deployment (CI/CD)

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

public void Configure(IApplicationBuilder app,
IWebHostEnvironment env)
{
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello Packt!");
}).AllowAnonymous();
});
}

Following is what you need for this book: This app development book is for .NET developers who want to get started with Vue.js and build full-stack real-world enterprise web applications. Developers looking to build a proof-of-concept application quickly and pragmatically using their existing knowledge of ASP.NET Core as well as developers who want to write readable and maintainable code using TypeScript and the C# programming language will also find this book useful. The book assumes intermediate-level .NET knowledge along with an understanding of C# programming, JavaScript, and ECMAScript

With the following software and hardware list you can run all code files present in the book (Chapter 1-19).

Software and Hardware List

Chapter	Software required	OS required
3-19	Visual Studio Code	Windows, Mac OS X, and Linux (Any)
3-19	Visual Studio 2019	Windows, Mac OS X, and Linux (Any)
3-19	Rider	Windows, Mac OS X, and Linux (Any)
3-19	.NET 5.0	Windows, Mac OS X, and Linux (Any)
3-19	Node.js and Node Package Manager	Windows, Mac OS X, and Linux (Any)
3-19	Postman	Windows, Mac OS X, and Linux (Any)
3-19	Vue.js DevTools	Windows, Mac OS X, and Linux (Any)
3-19	Vue.js DevTools (Firefox Browser Addadd-ons):	Windows, Mac OS X, and Linux (Any)
3-19	DB Browser for SQLite	Windows, Mac OS X, and Linux (Any)
3-19	SQLiteStudioSQLite Studio	Windows, Mac OS X, and Linux (Any)
3-19	Git source control	Windows, Mac OS X, and Linux (Any)

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Related products

• Vue.js 3 By Example [Packt] [Amazon]

• Blazor WebAssembly by Example [Packt] [Amazon]

Get to Know the Author

Devlin Duldulao is a full-stack engineer with over eight years of web, mobile, and cloud development experience. He has been a recipient of Microsoft's Most Valuable Professional (MVP since 2018) and earned the title of Auth0 ambassador for his passion for sharing best practices in application securities. Devlin has passed some prestigious exams in software and cloud development such as MSCD, Azure Associate Developer, AWS Associate Developer, and Terraform Associate. Perhaps it was serendipity that made him venture into the coding world after a short stint in the medical field, however, once he stepped into it, he fell for it hook, line and sinker – but in the right way, he claims. Devlin often finds himself engrossed in solving coding problems and developing apps, even to the detriment of his once-active social life. One of the things that motivate him is ensuring the long-term quality of his code, including looking into ways to transform legacy code into more maintainable and scalable applications. Devlin enjoys tackling challenging projects or applications for high-level clients and customers, as he currently does at his company based in Norway. He also provides training and consultation for international corporations. One of his other interests is giving talks at IT conferences worldwide and meeting unique people in the industry. Devlin is currently based in Oslo, Norway, with his wife. He is a senior software engineer at Inmeta Consulting Company, a subsidiary of the Crayon Group of Companies

Download a free PDF

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

https://packt.link/free-ebook/9781800206694

asp.net-core-and-vue.js's Issues

Upgrade used integration tests FluentAssertions exceptions to V6

Integration test use FluentAssertions none-async exceptions which are removed from v6. Please rewrite code with the use of proper async exceptions calls.

References: https://fluentassertions.com/upgradingtov6

VUE tour store mutations faulty and missing code

vue-app => store => tour => mutations.js => DELETE_TOUR_PACKAGE => not updates state.lists related tourpages collection
vue-app => store => tour => mutations.js => mutations.js => UPDATE_TOUR_PACKAGE=> listIndex find does not work
vue-app => store => tour => mutations.js => mutations.js => UPDATE_TOUR_PACKAGE=> state.lists[listIndex] with undefined object

Vue Vuex tour delete mutation incorrect

vue-app => store => tour => mutations.js => types.DELETE_TOUR_PACKAGE code example does not update the state from lists. To get lists state updated with Vuex by default binded events use the following code:

[types.DELETE_TOUR_PACKAGE](state, id){
const packageIndex = state.packagesOfSelectedCity.findIndex((pl) => pl.id === id);
state.packagesOfSelectedCity.splice(packageIndex, 1);
},

Vue Vuex tour store update package has no working and irrelevant code

vue-app => store => tour => mutations.js => ADD_TOUR_PACKAGE.

Code not working:
const listIndex = state.lists.findIndex(l => l.id === state.packagesOfSelectedCity.listId);
Code can be correct with:
const listIndex = state.lists.findIndex(l => l.id === payload.listId);

But the code is not required, because Vuex does automatic update the list properties.

Vue app Vuex mutations: ADD_TOUR_LIST + ADD_TOUR_PACKAGE not in line with db

Do not use unshift, because the items in database are added as increment, use instead push.