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?
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