Deploying

To deploy your Web Component we recommend netlify.

It's free
It's easy
It provides previews for every PR
It supports custom domains

Manual Setup

Head over to netlify and register. Select your github account and repository. If you follow these recommendations all you need to do is

Build command: npm run build
Publish directory: dist

And you're all set up.

Example

The Set-Game Example deploys its storybook to netlify in this way. You can see the finished page here: https://example-set-game-open-wc.netlify.com/.

Serving With Apache HTTP Server

If you're using our build configuration, the dist directory created by the npm run build command can be deployed on any local web server. These directions are for the Apache HTTP Server specifically, but should be adaptable to other web servers.

Build command: npm run build
Copy the dist directory to your desired location: sudo cp -R dist /Library/WebServer/Documents/myapp
Add a <VirtualHost> directive to httpd.conf, either directly or by an Include directive:

<VirtualHost *:80>
    DocumentRoot "/Library/WebServer/Documents/myapp"
    ServerName mypwa.localhost
    Alias "/mypwa" "/Library/WebServer/Documents/myapp"
    <Directory "/Library/WebServer/Documents/myapp">
      Options -Indexes
      AllowOverride None
      Require all granted
    </Directory>
</VirtualHost>

Restart Apache: sudo /usr/sbin/apachectl restart
Open the page in your browser using the URL http://mypwa.localhost/

If the app was built to support legacy browsers, the dist directory will include the subdirectories legacy and polyfills, and legacy browsers such as Internet Explorer 11 will be served suitable content.

Deployment to Github Pages

If you want to deploy your SPA to github-pages, do the following

Install gh-pages: yarn add gh-pages
Add a "deploy" script to package.json

If you are deploying to a project site e.g https://myusername.github.io/my-app

"scripts": {
  "deploy": "npm run build && gh-pages -d dist"
}

The script will build your application and deploy it github pages and put the bundle code into a branch named "gh-pages" of the repository https://github.com/myusername/my-app

If you are deploying to a user or organization site e.g https://myusername.github.io

"scripts": {
  "deploy": "npm run build && gh-pages -d dist -r https://github.com/myusername/myusername.github.io.git -b master"
}

The script will build your application deploy it github pages and put the bundle code into the "master" branch of the repository https://github.com/myusername.github.io

Deploy the site by running npm run deploy