htmlamp-htmlprogressive-web-appsaccelerated-mobile-page

How to develop AMP by using amp-list in local environment?


I realized that amp-list must use CORS and https. So how can I build a demo in the local environment?
I built an AMP page from scratch and create a simple JSON file.

{
  "items": [
    {
      "title": "AMP YouTube Channel",
      "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"
    },
    {
      "title": "AMP project.org",
      "url": "https://www.ampproject.org/"
    },
    {
      "title": "AMP By Example",
      "url": "https://ampbyexample.com/"
    },
    {
      "title": "AMP Start",
      "url": "https://ampstart.com/"
    }
  ]
}

Then add the src to amp-list

<amp-list width="auto"
          height="100"
          layout="fixed-height"
          src="http://localhost:9909/data1.json/">
    <template type="amp-mustache">
        <div class="url-entry">
            <a href="{{url}}">{{title}}</a>
        </div>
    </template>
</amp-list>

And I got

GET http://localhost:9909/data1.json/?__amp_source_origin=http%3A%2F%2Flocalhost%3A9909 404 (Not Found)

If I change the src to "data1.json", I got

"source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

From the errors, it is said that, it can be served from either https or from localhost.
But how can I achieve this?


Solution

  • It is very easy to setup on local, just follow the below steps:

    1) Make the PHP as a global access through setup environment variable

    2) Go to ROOT directory of your project and open the Terminal

    3) Serve the PHP server on terminal.

    php -S localhost:3000

    4) Change the amp-list url like below (remove the localhost url from src and replace with "/")

    <amp-list width="auto"
              height="100"
              layout="fixed-height"
              src="/data1.json">
        <template type="amp-mustache">
            <div class="url-entry">
                <a href="{{url}}">{{title}}</a>
            </div>
        </template>
    </amp-list>
    

    5) Open your browser and browse like : http://localhost:3000

    Hope it will solve your problem.

    Thanks Ziyed