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

Question

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?

AFAIK it is possible, but you could also check this [documentation](https://www.ampproject.org/docs/design/visual_story/setting_up). This documentation is good to start with when creating a temporary local web server for the purposes of testing. Also try serving over `HTTPS` for your local environment. Hope this helps. — Mr.Rebot, May 10 '18 at 17:04

score 0 · Answer 1 · answered May 10 '18 at 12:07

If you're working with something such as WAMP, you can set it up to use https. I have used this guide a couple of times to accomplish it.

I have also recently been informed about Local by Flywheel. It's mostly for Wordpress environments but you can spin up an SSL certificate with the click of a button. If you use Wordpress it's a dream for local development work.

It does also work with non-Wordpress sites (see screenshot from their site below). It's just a bit more cumbersome in terms of you have to let it install Wordpress first and then delete Wordpress.

score 0 · Accepted Answer · answered May 11 '18 at 04:15

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

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

2 Answers2