Greetings Hi there! I was trying some new stuff about VUE recently. I downloaded a free version of VUE Argon dashboard code and tried to compile it locally. It's straghtforward: Then I got the dist folder: Interesting... Then I double clicked the index.html, expecting it will display the beautiful landing page, but it didn't happen... This is strange... What went wrong? I tried npm run serve, it works well, I can see the portal and navigate between pages without issues. I must fix this! Should be quick! Bingo! The root cause is that the VUE project used router with createWebHistory instead of createWebHashHistory! It resulted a differenve ways to handle static assets and routing. Using createWebHistory in Production environment is required as it provides several significant benefits: I just want to use createWebHashHistory in my local development environment. The fix Now, the fix is easy. First, modify scripts in package.json to specify mode for serve and build, and I added two new items serve_prod and build_dev: Second, creating or editing vue.config.js as below: Lastly, update src/router/index.js to handle the mode accordingly: The original code was: Now it looks like this: Now, run npm run build_dev again, I can see the portal 😎 Thanks for reading! Have a good day! Thanks for reading! Have a good day!

Hey! In my career, I haven't spent much time on front-end programming. However, I had it now!It's a really exciting journey learning Angular/Karma/Jasmine and I feel like I will probably spent more time on it to gain more depth insights! Today's article is my learning journey on this, hope you will find it as a great tutorial ^^ Introductions Angular Testing Utilities Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Angular testing utilities provide you a library to create a test environment for your application. Classes such as TestBed and ComponentFixtures and helper functions such as async and fakeAsync are part of the @angular/core/testing package. Getting acquainted with these utilities is necessary if you want to write tests that reveal how your components interact with their own template, services, and other components. Ref Links Karma Karma is a tool that lets you test your application on multiple browsers.Karma has plugins for browsers like Chrome, Firefox, Safari, and many others.But I prefer using a headless browser for testing.A headless browser lacks a GUI, and that way, you can keep the test results inside your terminal. Ref Links Jasmine Jasmine is a popular behavior-driven testing framework for JavaScript. With Jasmine, you can write tests that are more expressive and straightforward. Here is an example to get started: Ref Links Steps Environment New An Angular Project The developers at Angular have made it easy…