How to turn Angular app into VC theme

requirements:

  1. run VC platform v3 from source code, see: https://github.com/VirtoCommerce/vc-platform/blob/master/docs/deploy-from-source-code.md

  2. create a new store:

  3. create a new theme for the store:

  4. open VS code, create a new angular app with a command “ng new VCAngular”

  5. go to VC platform directory
    “VirtoCommerce.Platform.Web\wwwroot\cms-content\Themes\VcAngular” and remove your created theme folder. E.g if your theme named ‘default’ you should delete “default” folder.

  • open windows console (run as admin)
  • in windows console go to directory “vc-platform\src\VirtoCommerce.Platform.Web\wwwroot\cms-content\Themes\VcAngular”
  • create a symlink with the following command “symlink /d default E:\Projects\AngularVC”

“E:\Projects\AngularVC” should be set to your Angular app root path.

after that you’ll see a picture like this:

in the picture, you can see that symlink successfully created with name “default”

  1. further, in your created angular app open angular.json file and change output path in build section to “assets/static/bundle”. Here the diff that you should get:

and in VS Code terminal run command “npm run build”

  1. in your angular app root directory create the following folders: templates, snippets, layout
  • in the templates folder create an empty file “index.liquid”
  • in the layout folder create a file “theme.liquid”, place the following content into your theme.liquid file:
  1. open storefront project, open “appsettings.json” file, change the default theme to “AngularVC”:

  2. don’t forget to set current store to “SPA” mode:

Now, you can run vc platform, and VC storefront. You’ll have to be able to see the following:

Profit!

Source code: https://github.com/t13ka/AngularVCTheme

3 Likes