I'm using a Gatsby setup hosted on Netlify.
I'm building some sort of recipe website where users can register, login and add recipes to their own cookbook page. To add a new recipe a user can fill in a form with some data (like recipe name, ingredients etc.). On submit the data will be stored inside a database. I then also want a dynamic page to be created for that specific recipe. (This is where you come in).
I know I can add pages via the gatsby-node.js file but I would prefer if this page can be added on the client side and exists instantly after the form submit without rebuilding the project. Is this possible in Gatsby and if so... how?
If this is not possible my best option would be calling the Netlify webhook to rebuild the project after the form submit and simply wait for the build to be completed before I can show the recipe detail page? Any thoughts on this?
Hope one of you coders can help me out here!
The way I would approach this is first show a dynamic version of the new recipe page (directly after submitting), which will only be visible to the authenticated user (based on its user ID and post ID). Maybe make this clear for the author with a note on that page. Something like: "This is a preview. Your recipe is being cooked up right now and will be ready in a few minutes."
At the same time, an incremental build would be triggered using a webhook from the backend. Both gatsby cloud and netlify support this now, so theoretically the build should be fast.
Triggering the webhook depends on your backend solution which you didn't mention. But when using for example Drupal you can use the build_hooks module. This can be configured to trigger a build when a recipe is posted back to Drupal.
I'm sure there would be a number of technical challenges but I think it should be possible. The trick would be not to generate too many dependencies in your new content, so the incremental build stays as small as possible.
Okay so I figured out there isn't a way in Gatsby to create the page directly in the client side. I decided to go with Albert's idea of first showing a dynamic page including a message saying this is a temporary page and the real recipe is "being cooked up".
On form submit I also just simply call the webhook to trigger Netlify deploy. This triggers a new deploy and in the gatsby-node.js I will create the new page based on the data I saved in my database on the form submit.
Related
I write my first Gatsby Page. I also use Laravel as backend server.
In my project i have many slug pages. I used createPages and api connection to create them. User can add files like images, audio files and pdf. When it happen, page should change a bit content and show this file on specify address. Develop version works fine (i bind button to start npm run refresh). I used gatsby refresh endpoint and add to scripts:
"refresh": "curl -X POST http://localhost:8000/__refresh"
And it's work fine. But i don't know how change this to use it properly on production build. Can anyone help me? Thanks
The ENABLE_GATSBY_REFRESH_ENDPOINT environment variable is only working on development. According to the documentation:
During local development, it can be useful to refresh sourced content
without restarting the development server. To facilitate this, Gatsby
exposes an environment variable called ENABLE_GATSBY_REFRESH_ENDPOINT.
What you need is called a webhook. Basically, a webhook is a way for an application to trigger a change that happens in real-time in a CMS.
Each CMS has its own way of implementing webhooks, but the idea is to trigger a build process once a change in your CMS occurs.
We have a ExtJS7 app, that for special requests like reset password, that always opens a new tab via email reset link, get loaded in full. We would like to load only few pages that are needed to load for these kind of request
Is there a way in ExtJS that would only load a particular page and its dependencies
I have not seen tutorials on this subject in official documentation. Myself did the following - just created another app (or bundle) for logging. The backend is responsible for the logic of what to display (loginapp or mainapp) - in the absence of a session, the user receives the app login
Absolutely. You can make another app - each app is a page, and will have its own packaged dependencies.
That's the easiest approach. A more complicated approach is to break your application into several ExtJS packages. You can then configure the app.json to exclude all of the packages from the micro loader. You then need to load these packages dynamically, presumably after logging in.
Doing this, though, is extremely complicated, and almost certainly not worth doing.
I currently have a GatsbyJS app that is using Netlify CMS (NCMS) for content management and Netlify via GitHub for hosting/deployment.
I would like to build a very simple order form system, but I would like to use JSON files and NCMS collections to represent the data because I will have very minimal data requirements and I would like the ability to have the data administered entirely through NCMS.
For example, I have a Products collection and an Orders collection. Products is using a JSON extension and contains JSON files that represent each product. Everything is looking good there. For Orders, I want to be able to create new entries from NCMS OR from an order form in my app.
Creating Orders entries in NCMS should be simple enough using the relation widget to incorporate a Products entry into each order. What I'm trying to figure out is how I can create JSON files in my filesystem (repo) upon form submission. I assume this is possible in some way with GitHub webhooks because NCMS is doing this when you create files in their system.
Can I, using some combination of Netlify's Forms API, Netlify Functions and/or GitHub webhooks, create a file in my GitHub repository when a user submits a Netlify Form in my app?
If this isn't possible, my follow up strategy would be to save Orders data in a MongoDB database. I do not have any experience yet with Mongo, but I know it's based around a "flat" data format using a JSON like syntax. Could I possibly save my order data in a Mongo collection upon submission via a Netlify Lambda function, then trigger a build via Netlify, and in my app pull in Mongo data at build time, and somehow create a file for each order object, perhaps via Gatsby's API?
My last resort would be to set up an admin area of my app where orders could be viewed, modified, and deleted. I'd prefer to avoid this because a) I do not have Netlify Pro services and thus do not have access to password protected site access (though I'm not sure how NCMS utilizes Identity and is able to avoid the premium plan?), and b) I would like all data administration to occur through the same platform (Netlify CMS).
You can definitely do this with Netlify Form, Function & Github API. I've done something similar for one of my gatsby sites, where form data is submitted directly to a Netlify function.
If you'd like to take advantage of Netlify Form's features like spam prevention & email notification, I think it'll look something like this:
Set up your Netlify Form
Set up a Netlify function that listens to the submission-created event. In the body of the request, you'll find a payload object that contains the form data, as well as info about your site (in case you have a bunch of them).
Netlify has a package that really ease up the development process.
Trigger a call to Github API to either create a file for that submission or update an existing file that contains all submissions.
At this point, you can set up netlifyCMS to read the content of that folder / file & allow admin to review / modify the submissions.
Hope it helps!
I am thinking to build my own like system, as a way of learning various technologies including Javascript; and to gain a better understanding of authentication and XSS.
Use-case:
Unique ID generated atop a little bit of Javascript code, for embedding in any website
When unique user presses this like button, a +1 is triggered to the 'score' of that UID
On unique user's profile, display what they like'd
I'm unsure as where to start... how would I go about building this system?
Building such system is easy. Securing it properly, making it flow nice and be easy to integrate is the hardest part. You should ignore the latter 3 for now. I would start with a JS file that searches the DOM for any elements with the ID of "mylike" (for example) which inserts a button on to said page. Once a user clicks the button it simply does an AJAX post back to your server containing information like the page title and page URL. I think it may be best for your backend to generate the ID, maybe an algorithm based on the title + URL.
To include user data to know what user liked what I'd suggest a persistent cookie that has a session variable to link to a user in your back end. Simply pull the cookie out using JavaScript and send the cookie along with the AJAX request.
I would want to do this to run post installation setup process like adding custom data that is required for the application to run.
One option I am aware of is to Write Installation and Setup instructions for users. Create visualforce page and include a button on this page. Redirect user to this page as the process of Installation and ask the user to click the button.
I only wanted to know If there was a more elegant way to solve the problem and if there is a way to call a method during the installation process.
Salesforce has recently implemented the ability to execute scripts (as Apex) during package Install / Uninstall:
http://www.salesforce.com/us/developer/docs/apexcode/Content/apex_install_handler.htm
No, we can't have a post installation script for the app. What you are saying is best solution, just keep a custom setting to flag, if initial setup is not done, then redirect to the setup page first, other wise do the normal work.
My question would be revolving around why you need custom data for the app to run? One of the things Salesforce look for when doing a security review of your code and the unit tests you have is to check to see if you are requiring data in your org as this is bad practice. Note that if your app is requiring specific data to run then it cannot be tested properly as the data will not be in the org when running the tests on install.
What is the data you are requiring? Could it be stored in an xml like static resource file or something similar for you to load and parse as it is needed?
Paul