B2C API React example installation

B2C API React Example can be installed inside Spryker Development Virtual Machine (VM) or on a separate dedicated server. To perform both the installation scenarios, take the following steps.

Installation inside the Development Virtual Machine

To perform the app installation on the VM:

1. Make sure that you have Spryker Glue REST API installed and working.
2. Log in to the VM. For this purpose, execute the following command on the host where the VM runs:

vagrant ssh

3. After logging in to the VM, the current directory is the folder where your Spryker project is installed, which is /data/shop/development/current by default. Go one directory up:

cd ..

4. Prepare a folder to install the example app. For example, you can place it in the api-rest-example folder:

commands:sudo mkdir api-rest-example
cd api-rest-example
sudo chown vagrant:vagrant .
sudo chmod og+rwx .

5. Clone the B2C API React Example repository:

git clone https://github.com/spryker-shop/b2c-api-react-example

6. Open the local_inside_vm.env file for editing.
7. Change the DEV_SERVER_HOST variable to point to the Glue host. For example, if your project name is b2c-demo-shop, the host address is glue.de.b2c-demo-shop.local. Also, you can change the example app page title. It is specified via the APP_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

Save the changes and close the file.

8. Install npm cpy globally:

sudo npm install --global cpy-cli

9. Open the Nginx configuration file for the Glue vhost:

sudo nano /etc/nginx/sites-available/DE_development_glue

10. 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 is to be run. The value must match the values of DEV_SERVER_HOST and DEV_SERVER_PORT of the local_inside_vm.env file you have 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;
    }
}

Save the changes and close the file.

11. Restart the nginx service:

sudo /etc/init.d/nginx restart

12. Build and run the application:

npm i
npm run dist
npm run serve:vm

13. Check that the example application is available at the following URL: http://glue.de.b2c-demo-shop.local/react/, where glue.de.b2c-demo-shop.local is the host name you specified in the local_inside_vm.env file.
14. 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, follow these steps:

1. Make sure that you have Spryker Glue REST API installed and working.

2. Make sure that the following prerequisites are installed on the server:

   • Node 8.9.3 or newer.

3. 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.

4. Clone the B2C API React Example repository:

git clone https://github.com/spryker-shop/b2c-api-react-example

5. Open the local_outside_vm.env file for editing.
6. Change the DEV_SERVER_HOST variable to point to the example app hostname—for example, react.local, and the API_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 the APP_TITLE variable. Sample local_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

Save the changes and close the file.

7. Install npm cpy globally:

npm install --global cpy-cli

8. Build and run the application:

npm i
npm run dist
npm run serve:local

9. Check that the example application is available at the following URL: http://react.local
10. To stop the app, press Ctrl+C. To start it again, run npm run serve:local.