BaseSite styles developed by us is not showing up in Spartacus frontend, any idea why? - spartacus-storefront

I am a frontend developer, working first time on Spartacus. I am told to convert a hybris commerce site into Spartacus. The site is fully custom styled. I installed Spartacus and imported the same as basesite. But all styles are not showing up at localhost:4200. It shows the theme of the electronic site. I have followed the step as per Spartacus documentation. Any idea what is missing from my side?

If you use schematics, after generate project you should have yourProject/src/styles.scss, there is default imported barrel styles from spartacus library.
You can add global styles to this file and also import other style files. Above or instead.

Related

How to select a theme in a Getting Started page for a theme extension app using NodeJS

In the UX guidelines for theme app extensions it says that users need to be able to select a theme on which they want to implement their theme app extension.
Is there an example project which implements this theme selecting feature, and if not, is there any resource in which I can read about how to implement this feature in NodeJS?
All the logic of my app happens in the extension, so I only really need to use the app for showing this Getting Started page.

Getting started with Vue Storefront

I am trying to build multi vendor eCommerce progressive web application and I came across vue storefront. Although the documentation is very helpful I want to hear if I have made the right choice and where I could find some resources to build. Thanks in adavnce.
We had an e-commerce website built using Magento 2. Recently we decided to build our frontend using Vue Storefront PWA. It is feature rich but we've faced lots of issues regarding customizations. So my suggestion is to you that if your project doesn't need highly customization then go for it.

How to create a mutli page Vue.js app without Vue-Cli?

I created a Vue.js app without using Vue CLI, so that means I did everything from scratch including setting up Webpack 4. The reason I did this was because I don't like the idea of frameworks concealing the inner workings of things so that I can't fix things myself.
As an SPA, I have got the basic demo site working with an Home and About view. But I am looking to create a multi-page app with Express. The only information on multi-page Vue.js apps seems to be linked to the pages option that only comes with Vue CLI (see here)
Is there a way to have a multi-page app for projects created without Vue CLI?
Sure, you could handle routing with Express and have the page rendered server-side.
You can use Vue official package for routing, vue-router and choose between SSR (server-side rendering) or client side.
I suggest you to check this official doc about it: https://ssr.vuejs.org/

Differences and use of vuexpress, VuePress and vue-server-renderer modules of Vue.js

I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.

Install an App in unpublished theme in shopify store

I want to install some Apps in my unpublished theme (development theme) without impacting published (live) theme.
I have searched in google but couldn't find any solution. If anybody have done this type of task then please help me. Thanks in advance!
If the app provides an option for choosing a theme then yes you can, but otherwhise you can't.
Most APPs now install scripts that inject some content. Those scripts are tied directly to the live theme and if there is no option to choose a specific theme you can't change that functionality.
So you don't have a lot of options, if the APPs are not paid you can create a separate dev store where you can do your testing or styling and transfer the theme to the live store once you are done. But if the APPs are paid you will need to communicate with your client that there is a chance that the app may modify some of the current theme functionality and this may be visible on the live site.
The different apps are as follow:
Has an option for choosing a theme
Modify the theme files directly
Includes a script that will inject content and functionality to the front-end
Mash up of the above
Have in mind that all of the above indicates that these apps will modify the front-end in some way, there are APPs that extend the back-end and doesn't modify the front-end.