Menu
Menu Sheet Overlay
Search

Running Your Dev Server

Note: Make sure you've gone through our Installation steps before following these instructions to run the development server.

Depending on whether your project is tag-loaded or server-side rendered, the following instructions will help you get your development server running:

Start by running the following commands:

cd packages/pwa
npm run tag-loaded

Note If those commands didn't work for you, navigate to the packages/pwa directory and then run npm run start:preview

Now that the development server is running, you can open the PWA in a browser:

  1. Go to https://preview.mobify.com
  2. Enter the URL for the site that you want to preview in the Site URL field
  3. Enter the URL for the code bundle you want to load in the Bundle Location field (This will usually be https://localhost:8443/loader.js.
  4. Emulate a mobile device in your browser. Here are some instructions for Google Chrome. Do not skip this step!
  5. Click Preview

Success! You should now see the home page for the PWA in your browser. You can kill the development server at any time by using the keyboard shortcut Control-C.

The site you want to preview must contain the Mobify Tag, and you must emulate a mobile device in your browser before clicking the Preview button. Otherwise, previewing will fail. See the troubleshooting section for tag-loaded PWAs below for more help.

Start by running the following commands:

cd packages/pwa
npm run ssr

Note If those commands didn't work for you, navigate to the packages/pwa directory and then run npm run start:ssr

Now that the development server is running, you can open the PWA in a browser:

Success! You should now see the home page for the PWA in your browser. You can kill the development server at any time by using the keyboard shortcut Control-C.

Troubleshooting

Windows users

If you encounter errors in your terminal while starting your development server...

Start by checking which version of Node is installed:

  1. Run node -v from your terminal
  2. Verify that the version is v8.10.0

If you have a different version of Node installed, do not use nvm to install the newer version of Node. Instead, download the 8.10.0 release from the Node.js archive.

Now reinstall your dependencies:

  1. Delete your node_modules directory
  2. Repeat the steps to run your development server and preview your work
  3. Don’t forget to check your Node version before running npm install again

Mac users

If you encounter errors in your terminal while starting your development server...

  1. Install Node Version Manager (nvm)
  2. Open your terminal and run nvm install 8.10.0
  3. Delete your node_modules directory
  4. Repeat the steps to run your development server and preview your work
  5. Don’t forget to check your Node version before running npm install again

Tag-loaded PWAs

If you see a blank, white screen while loading...

  1. Clear your cookies for localhost and merlinspotions.com
  2. Go to the terminal window running your development server
  3. Press Control-C to stop the development server
  4. Run npm run tag-loaded
  5. Copy the preview URL from the terminal output
  6. Paste the URL into your browser
  7. Emulate a mobile device using your browser’s developer tools.
    You must do this before the next step!
  8. Click the Preview button

If you see the desktop site instead of the PWA...

  1. Open Chrome’s DevTools
  2. Go to Application tab in the DevTools window
  3. Click the Clear site data button
  4. Verify that your local development server is running
  5. Copy the Preview URL from the terminal again
  6. Load the Preview URL (but don’t click the Preview button yet!)
  7. Emulate a mobile device using Chrome’s DevTools
  8. Click the Preview button

If the PWA still doesn’t load...

Start by verifying that the development server is running. You will know that your server is running when you see a message in your terminal window which states: "Server started ✓" with "Access URLs" listed below.

If your development server is not running, ask yourself:

  • Did you run npm run tag-loaded from the packages/pwa directory?
  • Did the command fail because something else is running on the same port?
  • Did you click through your browser’s warning about the self-signed certificate?
  • Did you open the correct URL?

Next steps

Now that you've finished setting up the Mobify Platform, head on over to our Orientation Exercises and use your first SDK Component!

Feedback

Was this page helpful?