Deploying to the Moovweb XDN

React Storefront makes it easy to deploy your project to Moovweb XDN (Experience Delivery Network). There are three ways to deploy your app:

• GitHub - Link your Moovweb XDN project to your GitHub repo so that the XDN can deploy automatically when new code is pushed.
• CLI - Moovweb provides a moovsdk npm package that allows you to deploy to the XDN from the command line.
• Circle CI - Your app contains a Circle CI config template that you can edit to easily deploy via Circle CI

• Sign into the Moovweb Control Center and click Create New Project.
• Give your project a name. Since you'll most likely be deploying your project to at least two environments (for example, staging and production), we recommend adding a suffix to the project name that matches the suffix of one moov_config-*.json files in the root of your project. For example, "my-project-prod" for moov_config-prod.json and "my-project-stage" for moov_config-stage.json.
• Select the domain model. We recommend using Single Domain for PWAs.
• Select JavaScript for the project type (the default).
• If you use GitHub, the Moovweb XDN can automatically redeploy your app every time you push new code. To use this feature, enter the path to your GitHub Repo and select Auto-Deploy. Upon creating your project, GitHub will ask you for permission to install the Moovweb XDN GitHub App in your repo.
• Click Create Project.

If you use GitHub, the Moovweb XDN can automatically redeploy your app every time you push new code. This can be configured when creating your project (see the section above), or any time later by selecting Project Settings => Continuous Deployment.

Once your XDN project is linked to your GitHub repo, a new version of your app will automatically be deployed every time you push code. Each new branch gets it's own unique URL with via a ?moov_=(guid) query parameter appended to the site's URL. The XDN will also run your unit tests every time you push code and indicate the status of the tests and deployment by adding a "Moovweb XDN" check to each pull request.

You can also deploy to the Moovweb XDN from the command line using your project's deploy npm script.

Open package.json and find the "deploy" script. By default it should look something like this:

"deploy": "f() { npm run link $@ && moovsdk deploy my-account my-project-$@ --ignore-live --deploy-id=\"`git rev-parse HEAD`\" --notes=\"`git log -1 --pretty=format:%s`\" && npm run link -- local; }; f"

This script does the following:

1. Builds your project
2. Updates the symlink moov_config.json in the root of your project to the moov_config-*.json file corresponding to the environment we're deploying to
3. Calls moovsdk deploy to build and upload the project to Moovweb XDN

Update this script so that it uses your organization and project by replacing my-account my-project-$@ with your actual account and project name in the Moovweb Control Center. For example, if your project is called "my-project-prod", use "my-project-\$@".

To deploy your project to the Moovweb XDN, run:

npm run deploy {environment-name}

For example, to deploy to staging, run

npm run deploy stage

To deploy to production, run:

npm run deploy prod

The React Storefront Boilerplate contains an example CircleCI configuration in .circleci/config.yml.

To deploy with CircleCI, make the following changes to .circleci/config.yml:

1. Find the step marked "deploy to production":

# deploy to production
    command: |
      npm build
      if [ $CIRCLE_BRANCH = 'master' ]; then
        npm run link -- prod
        moov deploy moovweb/react-storefront-prod -user-email=${MOOV_EMAIL} -user-password=${MOOV_PASSWORD} -ignore-live -deploy-id $(git rev-parse HEAD) -notes "$(git rev-parse --abbrev-ref HEAD) - $(git log -1 --pretty=%B)"
      fi

2. If you're deploying to an environment other than production, update the line that reads npm run link -- prod to deploy. The last part should match to the suffix of the moov-config-*.json file corresponding to the environment to which you are deploying.

3. Update "moov deploy moovweb/react-storefront-prod" to the correct project name. For example, if your project is called "my-project-prod", use "moov deploy "my-org/my-project-prod"

4. Add your moov credentials as MOOV_EMAIL and MOOV_PASSWORD environment variables in Circle CI.