B2C API React Example installation
Edit on GitHubB2C API React Example can be installed inside Spryker Development Virtual Machine (VM) or on a separate dedicated server. Below, you will find detailed steps on how to perform both the installation scenarios.
Using a virtual machine ensures a faster deployment as the VM already has all the necessary components installed.
The example application is provided only for display purposes, and should under no circumstances be used as a starting point for any project.
Installation inside the Development Virtual Machine
To perform the app installation on the VM:
- Make sure that you have Spryker Glue REST API installed and working.
- Log in to the VM. For this purpose, execute the following command on the host where the VM runs:
vagrant ssh
- After logging in to the VM, the current directory will be the folder where your Spryker project is installed, which is
/data/shop/development/current
by default. Go one directory up. To do this, execute the following command:
cd ..
- Prepare a folder where the example app will be installed. For example, if you want to place it in folder
api-rest-example
, execute the following:
commands:sudo mkdir api-rest-example
cd api-rest-example
sudo chown vagrant:vagrant .
sudo chmod og+rwx .
- Clone the B2C API React Example repository:
git clone https://github.com/spryker-shop/b2c-api-react-example
- Open the
local_inside_vm.env
file for editing. - Change the
DEV_SERVER_HOST
variable to point to the Glue host. For example, if your project name isb2c-demo-shop
, the host address will beglue.de.b2c-demo-shop.local
. Also, you can change the example app page title. It is specified via theAPP_TITLE
variable.
Sample local_inside_vm.env
file implementation for a VM running B2C Demo Shop:
NODE_ENV=development
DEV_SERVER_HOST=glue.de.b2c-demo-shop.local
DEV_SERVER_PORT=3000
WEB_PORT=3000
WEB_PATH="/react/"
API_URL="/"
APP_TITLE=Spryker API React Example
When done, save the changes and close the file.
- Install
npm cpy
globally:
sudo npm install --global cpy-cli
- Open the Nginx configuration file for the Glue vhost:
sudo nano /etc/nginx/sites-available/DE_development_glue
-
Add a new location block as follows:
location /react/ { proxy_pass `http://glue.de.b2c-demo-shop.local`:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }
where
proxy_pass
specifies the host and port where the B2C API React Example will run. The value must match the values ofDEV_SERVER_HOST
andDEV_SERVER_PORT
of thelocal_inside_vm.env
file you edited in step 7.
Sample vhost implementation for a VM running B2C Demo Shop
server {
# Listener for production/staging - requires external LoadBalancer directi$
listen 10002;
# Listener for testing/development - one host only, doesn't require extern$
listen 80;
server_name ~^glue\\.de\\..+\\.local$;
keepalive_timeout 0;
access_log /data/logs/development/glue-access.log extended;
root /data/shop/development/current/public/Glue;
set $application_env development;
set $application_store DE;
include "spryker/glue.conf";
location /react/ {
proxy_pass `http://glue.de.b2c-demo-shop.local`:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
When done, save the changes and close the file.
- Restart the nginx service:
sudo /etc/init.d/nginx restart`
- Build and run the application:
npm i
npm run dist
npm run serve:vm
- Check that the example application is available at the following URL:
http://glue.de.b2c-demo-shop.local/react/
, whereglue.de.b2c-demo-shop.local
is the host name you specified in thelocal_inside_vm.env
file. - To stop the app, press Ctrl+C. To start it again, run:
npm run serve:vm
Installation on a dedicated server
To perform the app installation on a dedicated web server:
-
Make sure that you have Spryker Glue REST API installed and working.
-
Make sure that the following prerequisites are installed on the server:
- Node 8.9.3 or newer.
-
Add the following entries to the hosts file of the server:
<Glue_IP> glue.de.project-name.local
127.0.0.1 react.local
where:
- <Glue_IP> - the IP of the Glue REST API server;
- glue.de.project-name.local - the local hostname of the Glue REST AP server;
- react.local - the local hostname of the B2C API React Example application.
- Clone the B2C API React Example repository:
git clone https://github.com/spryker-shop/b2c-api-react-example
- Open the
local_outside_vm.env
file for editing. - Change the
DEV_SERVER_HOST
variable to point to the example app hostname, for example,react.local
, and theAPI_URL
variable to point to the local hostname of the Glue REST API server. Also, you can change the example app page title. It is specified via theAPP_TITLE
variable. Samplelocal_outside_vm.env
file implementation:
NODE_ENV=development
DEV_SERVER_HOST=localhost
DEV_SERVER_PORT=3000
WEB_PORT=3000
WEB_PATH="/"
API_URL="`https://glue.mysprykershop.com`"
APP_TITLE=Spryker API React Example
When done, save the changes and close the file.
- Install
npm cpy
globally:
npm install --global cpy-cli
- Build and run the application:
npm i
npm run dist
npm run serve:local
- Check that the example application is available at the following URL:
http://react.local
- To stop the app, press Ctrl+C. To start it again, run:
npm run serve:local
Thank you!
For submitting the form