Magento Tutorials

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.

Magento 2.3 PWA Studio with Custom Theme Setup: A Step-by-Step Tutorial

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
git checkout release/4.0

2. Modify package.json

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

Under “workspaces”:

  "workspaces": [
...
    "packages/venia-ui",
    "packages/simi-studio"
  ],

Under “scripts”:

  "scripts": {
	...
    "watch:venia": "yarn venia run watch",
    "watch:simi-studio": "yarn workspace @simicart/simi-studio run watch",
    "stage:simi-studio": "yarn workspace @simicart/simi-studio run start"
  },
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.


FURTHER READING:

Magento PWA Studio vs Vue Storefront: Which one is for you?

Progressive Web Apps: 12 Real Examples For Your Inspiration

A knowledge craver who always strive to be wiser everyday.

Subscribe
Notify of
guest
3 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
prabhakaran
prabhakaran
5 months ago

{"errors":[{"message":"Error: ServiceResolver: Request to https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/graphql failed: ServerError: Response not successful: Received status code 404\n at makePromise.then.catch.e (/var/www/html/pwa-studio/packages/simi-studio/node_modules/@magento/upward-js/lib/resolvers/ServiceResolver.js:105:23)\n at process._tickCallback (internal/process/next_tick.js:68:7)"}]}

i’m getting error like this….

Arthur
5 months ago

Hi Dom, I installed the module and have it point to one of my Magento 2.3.0 installs. Only the development environment, version works; on the production I get an error that the dist directory in sim-studio is missing. Furthermore, it does not show anything of my Magento install; instead I get the message that the page doles not exist. It seems I don’t quite see how this PWA frontend works, and the documentation from Magento did not help either. Can you point me to documentation that explains how to change the PWA front end such that it “understands” my M2… Read more »