How to Setup Magento 2.3 PWA Studio With Custom Theme

In Magento developer community, we see that there is an arising question about how to deploy one's own custom theme based on Venia concept of Magento PWA Studio. Since doing this yourself can be somewhat tricky, we have created a package that helps you do just that in the simplest way possible. In fact, it takes you only 4 simple steps. Let's do it!





1. Clone pwa-studio





pwa studio repo
pwa-studio repository

Clone the PWA Studio repository into your development environment.





git clone https://github.com/magento-research/pwa-studio/
cd pwa-studio
cp packages/venia-concept/.env.dist packages/venia-concept/.env




clone pwa studio

2. Modify package.json





Modify package.json file. You can change "simi-studio" to any name you want.





Under "workspaces":





 "workspaces": [
...
 "packages/upward-spec",
 "packages/simi-studio"
 ],




Under "scripts":





 "scripts": 
	...
 "watch:venia": "yarn workspace @magento/venia-concept run watch; cd - >/dev/null",
 "watch:simi-studio": "yarn workspace @simicart/simi-studio run watch; cd - >/dev/null",
 "stage:simi-studio": "yarn workspace @simicart/simi-studio run start; cd - >/dev/null"
 ,




modify package.json

3. Clone simi-studio





simi-studio repo
simi-studio repository

Run the following commands to clone simi-studio repository and install the project dependencies:





cd packages
git clone https://github.com/Simicart/simi-studio
cd ..
yarn install
yarn run build




yarn install
yarn run build

4. Start the server





Run the following command from the project root directory to start the server for either test environment or production environment:





Test environment





yarn run watch:simi-studio




test environment

Production environment





NODE_ENV=production PORT=8080 npm run stage:simi-studio




production environment

Final result





pwa studio custom theme

Still find it hard? Don't have time to deploy a Magento PWA yourself? Then let's see if SimiCart Magento PWA can help you.

Comments

Post a Comment

Popular posts from this blog

Top 9 ERP Integration solutions for Magento 1 & 2

Image
What is ERP? ERP (Enterprise Resource Planning) is an end-to-end solution to connect a variety of business aspects including product planning and development, manufacturing, sales, and marketing. A standard ERP software provides businesses with great efficiency in managing all these processes from one place. These process management tools act as a single source for all business data: orders, catalog, inventory, customer accounts,.. ERP can be utilized to streamline operations and boost efficiency for both enterprise-level businesses and small/medium businesses with large production output. There're numerous platforms offering ERP software products that can be integrated with Magento system, including Microsoft Dynamics, SAP, NetSuite and much more. Why Integrate ERP with Your Magento Store Integration of ERP and e-commerce systems allows manager to perform a certain task in one system and let others catch up automatically. A well-integrated ERP system can optimize and au...
Read more

10 Best Magento Development Companies for Small Businesses 2018

Image
For a flexible platform with robust customization capabilities like Magento, you'll need to master at least some development skills to set up and maintain your branded Magento store. With no technical background, typical users would not find it easy and convenient to do it on their own. As the platform requires you to provide your own hosting, install, set up and configure everything before getting a Magento store off the ground, you may need a hand in these technically challenging tasks. In this case, using Magento development services from a reliable provider would be the perfect solution for you as the store owner. To maximize the platform's full potential, choosing a cost-effective Magento development solution is crucial - especially for small businesses with limited resources and budget. If you are looking for affordable and reliable Magento development services, here is a list of 10 top rated companies for your consideration: 10 best magento development co...
Read more

10 Best Landing Page Builders for Non-Developers in 2018

Image
Landing page builders enable non-technical users to deploy web pages designed to drive visitors to a specific conversion goal. Landing pages are usually designed to convert visitors to one specific action like signing up for a newsletter or a free trial, or registering for a subscription service. Landing page builders make it easy for non-developers to test prototypes of pages to discover the impact and reaction of the buyers, customers, and website visitors. Landing page builders are a key part of an organization’s marketing strategies, and marketers can use landing page builders to create, modify, and publish web experience without the help of IT or developers. Landing page builders integrate directly into existing web development infrastructure and web content management systems to create a seamless web experience, and existing digital analytics solutions to track visitor behavior on landing pages. Best landing page builders for non-technical users Listed...
Read more