Comments (17)
Do you have a repository I can check?
Steps I did to test the preview system:
- git clone https://github.com/strapi/foodadvisor.git
- cd foodadvisor
- git checkout v2
- cd api
- cp .env.example .env (add a newline at the end of the file)
- yarn && yarn seed && yarn develop
- Sign up -> Create a new page -> Fill the slug
Preview button appears above the Edit the fields
external link on the bottom right.
from foodadvisor.
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?
from foodadvisor.
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
from foodadvisor.
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.
from foodadvisor.
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?
from foodadvisor.
The preview button is located in the content manager :)
More information in this article
from foodadvisor.
So why doesn't this work for me using V2 OOB?
from foodadvisor.
Do you have the necessary env variables in your project?
from foodadvisor.
Yes. Both files are named "env.development" on both client and server.
from foodadvisor.
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?
from foodadvisor.
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.
from foodadvisor.
@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.
from foodadvisor.
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:
- The preview link does not appear in the content manager when I create a new draft page and fill in the slug.
- 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?
from foodadvisor.
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.
from foodadvisor.
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 !
from foodadvisor.
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.
from foodadvisor.
Encountered the same issue but ran yarn build --clean
and then yarn develop
and the button appeared as expected
from foodadvisor.
Related Issues (20)
- There is an Internal Server Error while uploading an image in strapi on localhost HOT 1
- Upgrade Frontend to Tailwind v3. HOT 1
- Page not Found error in client while run on localhost HOT 3
- Preview Mode provide a example url HOT 2
- seed.js: ADMIN_JWT_SECRET appended to existing line and yarn seed not copying images HOT 2
- Global > Footer includes Shared > FooterColumns but is not selectable HOT 1
- Start foodadvisor strapi project with "npm run develop" HOT 1
- Update https://foodadvisor.strapi.io/ to the new frontend HOT 1
- PageNotFound error on client HOT 1
- error: select "t0".* from "scheduler_scheduler" as "t0" where ("t0"."uid" = $1 and "t0"."content_id" = $2) - invalid input syntax for type bigint: "null"
- Node.js 18 - Error fetching localhost HOT 1
- MYSQL - "Identifier name 'components_restaurant_related_restaurants_restaurants_links_inv_fk' is too long" HOT 2
- Size of the repo is enormous HOT 3
- NodeJS 16 is EOL HOT 1
- The engine "node" is incompatible with this module. Expected version ">=14.x.x <=16.x.x". Got "18.18.2" HOT 1
- Remove populate deep plugin HOT 4
- How to access the strapi public url after deployment
- Please update this starter with the latest Strapi, plugin and dependency versions HOT 1
- ENAMETOOLONG when trying to seed project HOT 3
- Update Readme to include requirement that this project currently works with Node version 16.x.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from foodadvisor.