I've been trying to get live preview in Sanity to work for several days now, without luck.
It works like a charm when I follow this tutorial:
how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms.
But when I create a starter blog like this one: sanity-template-gatsby-blog, it does not work at all.
I've followed three tutorials, but it always fails, even if I do exactly the same.
This is my gatsby-config:
module.exports = {
plugins: [
"gatsby-plugin-postcss",
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-sanity",
options: {
projectId:"nt51j1jx",
dataset:"production",
token: "ABC123", //this is a dummy for this post
watchMode: true,
overlayDrafts: true
},
},
],
};
When I create a new post and click "web preview", I get a 404
It does not help to click publish, and I can't see any changes on the local host.
Changes to existing posts are also not visible.
I have to restart the server every time I want to see the changes. That's not the case with the first template I mentioned, but that one crashes when I try to install Sanitys code-input plugin, which I need.
Thanks in advance!
I finally solved it by following this post: https://www.frontendstumbles.com/gatsby-and-sanity-cms-tutorial/
A nice step by step guide that creates a Gatsby and Sanity starter that works with watch mode and drafts mode.
The preview environment must be rebuilt when you create a new page.
That's a new static html file to be built. This is different from live preview updates, which amend the page data client-side.
UPDATE: Sanity + Gatsby Cloud Live Preview is a known bug at the moment. I guess we join the Slack channel to hear when they fix it?
Related
I'm preparing to deploy my first Static app from a Nuxt.js 2 project.
While the static routes are generated fine, my dynamic routes are not. Once I remembered they were hidden in my dropdown menu - duhh - I created a /generate page which renders all my dynamic routes using the nuxt-link component. My assumption was that the crawler should find the /generate/index.vue page and thus the links on it, and crawl those.
It didn't.
Then I noticed a comment from Sebastien Chopin mentioning that SSR should be enabled when generating Static apps. Ok. So I re-enabled SSR and I've hit nothing but errors. A couple I've figured out but this latest one has got me stumped.
Some googling has not revealed a clue that appeared relevant - or at least I didn't recognise them as relevant - so I need the 'worldwide developers' team help.
Does this error suggest there's an issue in Vue itself? I don't use 'self' anywhere in my app code soooo... hmmm?
Cheers,
Jeremy
Well it's generating now (has been for a few weeks, been a busy time!)... however the generated pages are not outputting with content, but I think that's a different issue.
My configuration currently is;
target: 'static',
ssr: false,
generate: {
minify: false, // Nuxt 2.15.4 > Deprecated next major version > Use build.html.minify instead!
routes: dynamicRoutes
}
I'll keep working on it.
I have a SSR page build on Nuxt (Vue). There is a simple code which runs in the browser.
methods: {
submitGeneralForm() {
alert("submit");
console.log('teeeeeeeeeeeeeeeeeeeeest')
},
SSR means that site it rendered on the server and then send to the browser. This piece of code should run in the browser. It is related to the button click. Alert works fine but I dont see any console.log() in the browser. Dont understand it. What is wrong with that?
EDIT:
Here is the example Github repository. Run yarn install + yarn dev to reproduce the issue. Node version v14.17.6 npm version 6.14.15 and yarn version 1.22.11 You will see alert() on page load from /layouts/default.vue which contains this code
export default {
mounted() {
alert('11111111111111');
console.log('22222222222222');
alert('33333333333333');
}
};
This is screenshot of console.log() in console.
Make sure you don't have anything in the console's filter input field.
For example, in the following image you can see the word "status" is masking the console.log() log lines:
I'm not sure why your code is not printing the console.log() since it's something basic and does not require any specific configuration.
I've tested your repro and it's working perfectly fine on both Chrome and Firefox. Maybe try another browser, factory reset it or ask a buddy to try on their side.
This is something on your machine IMO.
Also, be aware of the filter on top of the console, be sure that nothing is present here, otherwise it could filter the things you see in the actual console.
In your Browser you have a Console Output Section, where you also have some settings. There you can set the log levels, which should be in your output (Verbose, Info, Warnings and Errors). Console.logs are logged under the level Verbose, so you have to make sure this option is checked. By default this option is unchecked in some cases.
You have a filter, "status". It will filter anything which does not contain "status" keyword in it.
I recently updated from Angular 7 to Angular 8 using ng update. After following the expected migration path with no issues I built and deployed. Everything worked great until I started checking other browser versions and realized some were getting 401 unauthorized from the server in requesting the js files.
The issue is, the differential loading is done like this:
<script src="main-es2015.1234.js" type="module"></script>
It seems that some browsers, some of the time, don't want to pass auth info for <script type="module" .... It strikes me that there are several ways to work around this:
I can work around this by adding crossorigin="use-credentials" to the script tag but I haven't been able to find how to do that in ng build.
I can tweak the auth settings to somehow allow anonymous requests through to my JS files but I haven't been able to find the dotnet core method of doing this without a lot of complexity. Right now the entire app only allows windows auth. If I allow anonymous I don't want to have to worry somehow that I've left a controller open.
I'm thinking the former option is the cleaner solution but I'm open to alternatives.
Since the posting of the accepted answer the option to handle this in the first way McAden suggests by adding crossorigin="use-credentials" has been added to the Angular CLI options.
Original feature request
Angular CLI documentation
In your angular.json add
{
...,
"build": {
"builder": ...,
"options": {
...
"crossOrigin": "use-credentials"
}
}
}
I modified angular.json and used an explicit deployUrl under projects -> main -> architect -> build -> options:
"deployUrl": "/ClientApp/dist/",
That alters the script tags:
<script src="/ClientApp/dist/main-es2015.1234.js" type="module">
So it no longer goes through the dotnet core application to pull the js file. Then in IIS I set that folder to allow anonymous.
After checking out the source from: https://github.com/RallyApps/app-catalog
I attempted to build the Portfolio Item cumulative flow diagram src/apps/charts/rpm/cfd locally using
rally-app-builder build which shows no errors
Launching App-debug.html allows me to input the relevant settings, but once I click 'save', nothing renders and there are no errors logged to the JS console either, making debugging challenging.
I attempted to copy the build output into a custom html app inside rally, which displayed the same behaviour.
Is this a bug with the example app? Or have I missed some crucial configuration step?
EDIT:
Extra info - I tried running via the rally-app-builder to no avail (think it's related to this issue: https://github.com/RallyApps/rally-app-builder/issues/45). I attempted to flatten the structure and the result of that was a cross-origin request error.
Running from file resulted in a 403 for the SDK
Sorry about that- that Rally App Builder issue is definitely the problem you're running into. Just as a test I downloaded the built html output for that app from the app catalog release: https://github.com/RallyApps/app-catalog/releases/download/2.1/2.1.zip
It worked when installed on a custom html app on my dashboard once I edited the app settings and configured a portfolio item.
If you're looking to tweak this app from source you'll probably have to copy all those files referenced in config.json that live in parent directories into the main app directory and fix the paths in config.json. Then you should be able to build and run the app normally using Rally App Builder.
It seems this app was really not designed to be run externally, so I added a little code to ease the issues I ran into:
In PortfolioChartAppBase.js, _loadSavedPortfolioItem function:
scope: this,
fetch: ['Name', 'ObjectID'] //this is new
And I added some default settings as a top level config object in CumulativeFlowChartApp.js (since the code to force into settings mode doesn't seem to work correctly when running externally):
config: {
defaultSettings: {
portfolioItemPicker: '/portfolioitem/feature/52725935318', //insert a valid oid here
startDate: 'actualstartdate',
endDate: 'actualenddate',
chartAggregationType: 'storycount'
}
},
The error is not in my regular console, it's in my tail -f console. It won't run the tests at all. In my localhost:3000 velocity sidebar it also says chimp server error. I am not sure how to fix this, I am very new to velocity and cucumber so it could be a stupid mistake, but I couldn't find any information on this error anywhere.
could you provide us with the whole meteor log and also cucumber log? If possible - please do meteor reset first (be aware though that this will clean up your local mongodb, if you want to avoid that, at least clean the cucumber log - echo '' > filePath will work )
I ran into the same problem yesterday while trying to follow Josh Owen's now outdated cucumber tutorial. The error was coming from with the step definition file while not wrapping module.exports in a function like this:
(function() {
module.exports = function() {
// ...
}
});
It could also be that your test directory and files aren't structured correctly in your app.
It should look like this:
app/
tests/
cucumber/
features/
step_definitions/
my_steps.js
my_feature.feature
fixtures/
my_fixture.js
Let me know if that makes a difference. Also, this is a good place to start with velocity/cucumber: http://www.mhurwi.com/a-basic-cucumber-meteor-tutorial/
It's very basic but there isn't much out there for learning testing with Meteor.