Storefront

​ScandiPWA theme is capable of being bundled into the storefront.
Storefront - a stand-alone deployment of your e-commerce platform front-end. The storefront main goal is to display the data coming from e-commerce platform API. The storefront is not the data-source, rather data-presentation.
Creating a storefront build is simple. It works out-of-the-box with any application created using Create ScandiPWA App. All you need to do is to bundle it using the production build command.
Deploying the Storefront
The main challange of deploying ScandiPWA as a storefront is to properly configure the proxy to existing Magento 2 instance. This is automatically done in development, however in production, you must configure it yourself.
Using the CLI
To deploy an application to the FREE ScandiPWA static-hosting, you can use ScandiPWA CLI. In order to do it, simply type-in following command from your theme's root:
1
scandipwa deploy
Copied!
This will return you a link to your instance and update the package.json file with the scandipwa.staticDeploy field. This field makes you application deployment persistent. Next time you run this command, the changes will be reflected on the same instance.
The application will proxy all requests to the Magento server you defined in the proxy field of your package.json.
Using the express server
This approach is a little-bit more complex. In order to do it you will need to install the express server and http-proxy-middleware as your theme's dependency. To do it, run:
1
npm i express http-proxy-middleware # for NPM
2
yarn add express http-proxy-middleware # for Yarn
Copied!
Then create a new file server.js in the application root. Inside, paste following:
1
const express = require('express');
2
const path = require('path');
3
const { createProxyMiddleware } = require('http-proxy-middleware');
4
​
5
const app = express();
6
​
7
app.use(express.static(path.join(__dirname, 'build')));
8
​
9
app.use(['/graphql', '/media'], createProxyMiddleware({
10
    target: require('package.json').proxy,
11
    changeOrigin: true
12
}));
13
​
14
app.get('/*', function (req, res) {
15
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
16
});
17
​
18
app.listen(9000);
Copied!
Now, create a production build. Then, start the server:
1
node server.js
Copied!
The application will proxy all requests to the Magento server you defined in the proxy field of your package.json.

Building your app - Previous

Creating production build

Next - Deploying your app

Magento theme

Last modified 1yr ago

Copy link

Contents

Deploying the Storefront

Using the CLI

Using the express server