How to install Cenia PWA

Key takeaways

• Cenia PWA installation requires Magento backend setup and a React-based PWA Studio frontend build.
• Install the Cenia backend API files before building and running the storefront.
• Confirm Magento, Composer, Node.js, Yarn, and UPWARD requirements before starting.
• Test the Cenia PWA storefront after installation to check routing, product pages, cart behavior, and mobile install prompts.

Installing Cenia PWA requires backend Magento files, a frontend build, and UPWARD configuration. Before you start, confirm your Magento version, development environment, and access to the Cenia package.

What is Cenia PWA?

Cenia PWA is a progressive web app storefront for Magento 2. It gives Magento stores a React-based frontend that connects back to Magento for catalog, cart, customer, and checkout data.

A Cenia PWA setup usually includes two parts: backend API files added to Magento and a frontend PWA Studio project that you build and deploy separately.

Before you install Cenia PWA

Review the installation requirements before you start. Cenia PWA setup touches Magento files, frontend dependencies, and server configuration.

• Magento 2.3.5 or higher installed on the server
• Composer installed on the server
• UPWARD PHP connector
• A local development environment to build Cenia.
• Sample data (optional)

You should also confirm that Node.js and Yarn are available in the environment where you plan to build the PWA frontend.

Use a staging or development environment when possible. Your storefront depends on the backend and frontend working together.

Phase 1: set up the Cenia PWA frontend

After you purchase Cenia, download the theme package to your local environment and extract the files.

Navigate into the pwa-studio folder and install the dependencies:

If yarn install fails, check your Node.js version, Yarn version, and dependency error messages.

Phase 2: configure the Magento backend URL

After installing dependencies, update the environment file that tells the PWA where to find your Magento store.

Open the .env file under packages/ced-concept:

Find the Magento backend URL setting and update it with your Magento 2 store URL:

Confirm the URL is correct before building the storefront. A wrong backend URL can cause product, category, cart, or checkout data to fail.

Phase 3: build the Cenia PWA storefront

After you update the .env file, build the PWA frontend:

The build generates a dist folder at pwa-studio/packages/ced-concept/dist.

That dist folder contains the files needed to run the Cenia PWA storefront, including the UPWARD specification, JavaScript, and HTML files.

Phase 4: transfer the build output to your server

After the build finishes, move the generated files to your Magento server.

For a simple setup, create a pwa folder inside the Magento pub directory and move the build output there.

Transfer files using scp or FTP over TLS.

Phase 5: install the UPWARD PHP connector

Run the following commands from the Magento root directory on your server:

After installing the connector, tell Magento where to find the upward.yml file:

UPWARD connects the PWA storefront routing to Magento. If this path is wrong, the storefront may not load correctly.

Phase 6: add the Cenia backend API files

From the original Cenia theme download, find the Ced_PwaApi folder. Move the app and pub directories from that folder into your Magento 2 root directory.

Then run the Magento setup commands:

For a production store, run these commands during a controlled deployment window.

Phase 7: install sample data, if needed

Sample data is optional, but it can help you test the storefront if you don’t already have products, categories, and images in your Magento store.

Run these commands from the Magento root directory:

Magento may ask you to authenticate before completing the sample data install.

Phase 8: test the Cenia PWA storefront

After the build and backend setup finish, open your storefront URL in a browser.

Check:

• Homepage loading
• Category pages
• Product pages
• Search
• Cart
• Checkout routing
• Product images
• Mobile layout
• Browser console errors
• PWA install prompt, if configured

You should still be able to access Magento Admin at the same Admin URL you used before.

Install the PWA on a device

Once the Cenia PWA storefront runs, you can test the install experience. On desktop, open the PWA URL in a Chromium-based browser such as Chrome or Edge and look for the install icon in the address bar. On mobile, open the PWA URL and use the browser’s Add to Home Screen option when available.

Common Cenia PWA installation issues

The backend API does not work

Check that the Ced_PwaApi app and pub folders were copied into the correct Magento root directories and that Magento setup commands completed successfully.

Yarn install fails

Check the Node.js version, Yarn version, package compatibility, and dependency error messages.

The PWA frontend cannot connect to Magento

Check MAGENTO_BACKEND_URL, SSL, CORS behavior, UPWARD configuration, and the upward.yml path.

Product or category pages do not load

Check Magento API access, cache, generated files, backend URL configuration, and frontend build output.

The PWA install prompt does not appear

Check HTTPS, manifest settings, service worker behavior, browser support, and whether the PWA meets install criteria.

The UPWARD module is disabled

If the UPWARD module is disabled after installation, enable it with:

Cenia PWA FAQs

Getting started with Cenia PWA

Cenia PWA installation requires both Magento backend setup and a PWA Studio frontend build, so confirm your environment before running installation commands.

Start by checking your Magento version and confirming that you have the Cenia package, Composer access, Node.js, and Yarn.

If PWA setup, Magento performance, or storefront reliability affects a live ecommerce site, explore Liquid Web Magento hosting.

Related resources

• How to install ScandiPWA on Liquid Web
• How to Install Venia Storefront on Liquid Web
• magento/pwa-studio: Development tools to build, optimize and deploy PWAs for Magento 2.
• Help – How to deploy to production · Issue #2328 · magento/pwa-studio

Miguel Balparda