PWA Starter Kit with Netlify and a Custom Domain



Below are the steps I followed to integrate the PWA Starter Kit with Netlify and a Custom Domain:
  1. Create GitHub project
  2. Clone the PWA Starter Kit
    1. git clone --depth 1 https://github.com/Polymer/pwa-starter-kit my-app
    2. git remote remove origin
    3. git remote add origin https://github.com/<your-github-username>/<your-repo>
    4. git push -f origin master
  3. Personalize 
    1. package.json
    2. polymer.json
    3. manifest.json
    4. index.html
      1. <title>
      2. several meta fields
      3. appTitle attribute
      4. Rename <my-app> element
    5. Rename "my-app" in src/components/my-app
  4. Create Netlify project
    1. Choose to integrate with GitHub
    2. Choose to configure Netlify on Github and allow Netlify to have access to your GitHub project
    3. Update the build command to be npm run build:static
    4. Update the publish directory to be build/esm-bundled
  5. Add custom url
    1. Go to domain management in Netlify and add custom domain.
    2. Follow the steps that Netlify provides.
    3. This will likely include adding a CNAME record to your domain name provider.
  6. Add a _redirects file with one line:
    1. /*    /es5-bundled/index.html   200
  7. Go to the url you configured.
  8. Update the README.md with:
    1. Name
    2. Url
    3. Node requirement (nvm use 11)
    4. Install command (npm install)
    5. Develop command (npm start)
    6. Test command (npm run test)
    7. Build command (npm run build:static)
    8. Serve command (npm run serve)
    9. Deploy instructions (git commits auto deploy and manual deployments can be done through the Netlify console)
Now you are ready to develop, test, and deploy your PWA Starter Kit on Netlify with a custom domain.

Popular Posts