Live demo major issues about foodadvisor

[Mcastres]

Do you have a repository I can check?

Steps I did to test the preview system:

1. git clone https://github.com/strapi/foodadvisor.git
2. cd foodadvisor
3. git checkout v2
4. cd api
5. cp .env.example .env (add a newline at the end of the file)
6. yarn && yarn seed && yarn develop
7. Sign up -> Create a new page -> Fill the slug

Preview button appears above the Edit the fields external link on the bottom right.

[Mcastres]

Thanks @jamesdwalker for opening the issue. The actual https://foodadvisor.strapi.io/ is in fact quite outdated.
Hopefully, I'm currently working on a FoodAdvisor v2 that will be published during this month.

However I'm not sure we'll host another https://foodadvisor.strapi.io/. Are you using the hosted version to make demos?

[mfreeman-xtivia]

So is the content preview fully implemented in the v2 branch?

I cannot seem to figure out what i need to do (and where) in the admin console to get the "eye" link for the preview to show up

[Mcastres]

Yes, it is :)
You need to at least fill the slug field to see the preview button appear. However, there is an issue with the live demo. I'm currently on it but it works locally.

[mfreeman-xtivia]

So i am trying to get it running locally atm but with no luck....

When/where should i expect to see the 'eye' appear for the preview link? in my list view? edit view? both?

And under what conditions (i.e. published vs draft, etc) should i expect to see it?

[Mcastres]

The preview button is located in the content manager :)
More information in this article

[mfreeman-xtivia]

So why doesn't this work for me using V2 OOB?

[Mcastres]

Do you have the necessary env variables in your project?

[mfreeman-xtivia]

Yes. Both files are named "env.development" on both client and server.

[mfreeman-xtivia]

So i pulled the latest as of right now for v2 branch and it does not work on the server. I presume b/c of env file naming and/or contents?

Could you give some idea of what your env files are named on client and server, and what their contents should be?

[vagarwal2023]

I am working alongside @mfreeman-xtivia and we have copied the env variables into .env for backend (strapi) and .env.development for the front-end app (nextjs). I also know that I manually generate a preview URL (http://localhost:3000/api/preview?secret=[MY-SECRET-KEY]&slug=vivek1&lang=en&type=article) and I enter an invalid key, I get an error message "Invalid token". However, if enter the valid key, I simply get a "Internal Server Error". This tells me that the env variables are being read and the secret is being correctly matched. Clearly something else is off here.

[Mcastres]

@vagarwal1968, this is because the URL needs to have more params. The string you just sent doesn't have them. More information here.

You need to create a .env file in the Strapi folder (api) containing:

CLIENT_URL=<url-of-nextjs>
CLIENT_PREVIEW_SECRET=<a-random-token-which-has-to-be-the-same-as-the-one-in-nextjs>

I tested again and this is working fine.

[vagarwal2023]

Thanks for getting back, @Mcastres! Frankly I am at a loss here. The instructions to getting preview to work are dirt simple. So, not sure what we could be doing wrong. We have the .env file in the Strapi folder as you outlined.

However, we have the following situation:

1. The preview link does not appear in the content manager when I create a new draft page and fill in the slug.
2. If I manually construct a preview URL and go visit the preview URL, it doesn't work. I followed the pattern provided in https://strapi.io/blog/create-a-preview-button-in-strapi-v3-for-next-js. I also tried http://localhost:3000/api/preview?secret=MY-SECRET-KEY-HERE&slug=vivek1&locale=en&type=article&apiID=article and http://localhost:3000/api/preview?secret=MY-SECRET-KEY-HERE&slug=pricing2&locale=en&type=page&apiID=page (based on your comment that my URL did not have all the params) and both these URLs simply redirect me to the home page. If I send in the incorrect secret, I get an "invalid token" error which tells me that the passed in secret is going over correctly.

Can you provide a sample preview URL that works for you? Any idea why the preview button would not show up in the content manager?

[vagarwal2023]

Thanks @Mcastres - I have good news! Since both Mike and I had broken our heads against the wall with no success, and you were insisting that it works for you, I decided to do a fresh git clone, and followed the steps that you have above, and voila, preview works!

Now, I am running a diff between the my local install that does not work and the new install that does work. I will let you know what I find.

Thanks once again for your patience but I can swear that I followed very similar steps as you outlined. The only tweak is that I added the properties from .env.example to .env after I had started strapi in my previous install. So, in my first install, I have the ADMIN_JWT_SECRET as the first line. In my new install, I created .env before I started strapi for the first time, and it added ADMIN_JWT_SECRET as the last line. I will share more info once I have it.

[vagarwal2023]

So, I think the issue is that if you do NOT have .env set up with CLIENT_URL and CLIENT_PREVIEW_SECRET before you run yarn && yarn seed && yarn develop, then you are in trouble. Once the data has seen seeded, the .env gets generated with the ADMIN_JWT_SECRET. If you simply update .env with CLIENT_URL and CLIENT_PREVIEW_SECRET, and restart strapi, then preview will not work. You need to clean up your .env to only have CLIENT_URL and CLIENT_PREVIEW_SECRET (no ADMIN_JWT_SECRET), and run yarn && yarn seed && yarn develop, and then things do work. You should probably update the instructions to make this explicit. Thanks for your help, @Mcastres !

[Mcastres]

The .env file must contain CLIENT_URL and CLIENT_PREVIEW_SECRET when Strapi will build (yarn develop).
You can keep the ADMIN_JWT_SECRET in the .env file for the preview to work. The problem is that you need your .env file to have a new line so that the seed command will correctly append the ADMIN_JWT_SECRET in the .env file.

[rhadu]

Encountered the same issue but ran yarn build --clean and then yarn develop and the button appeared as expected