What are
/r/gatsbyjs'
favorite Products & Services?
From 3.5 billion Reddit comments
The most popular Services mentioned in /r/gatsbyjs:
Netlify
React
Prismic
Next.js
CodeSandbox
PageSpeed Insights
Tailwind CSS
Snipcart
Auth0
Egghead
Sanity.io
Node.js
Strapi
Webpack
DEV Community
The most popular reviews in /r/gatsbyjs:
Tailwindcss is a utility-first css framework. Component based approaches tend to produce Uis that all look very similar (e.g. your typical bootstrap site). Utility-first approach gives a lot more power to designers. Their website does a good job explaining the advantages of this approach.
It's a class component but with some extra code at the bottom to render it on codepen.
If you're new to class components the docs can help.
For the code that's rendering it in codepen, check out the comments starting at lines 395. It explains that you can safely remove everything below 394 but make sure to include that export.
Line 419 gives you a nice example of how to use the component.
I think this is an issue with your code not the fact that it's using Gatsby. I have tested this code in both a React app and Gatsby and it crashes both, I think code sandbox may just be handling event pooling in an artificial way.
Ok, you are having a problem with event pooling in your onChange function line 44, see here for information
onChange={(event) => setFilters((previousFilters) => { return { ...previousFilters, [filterName]: event.target.value, }; }) }
In your above code, the event.target.value will return null as you are trying to access the objects properties after the event handler has run.
To fix this just change your arrow function so it is not an implicit return and add event.persist()
onChange={(event) => {
event.persist();
setFilters((previousFilters) => {
return {
...previousFilters,
[filterName]: event.target.value,
};
})
}
}
I have tested this on a gatsby site and it works fine.
Using the Linux subsystem for Windows!
Either through the terminal directly: https://docs.microsoft.com/en-us/windows/wsl/about
And/or right into VSCode: https://code.visualstudio.com/docs/remote/wsl
Next can build static, just like gatsby. But again, if the SEO is coming async, google, link previews in iMessage, etc won’t like that.
I don’t know your serverless function, but it should be pretty cheap to serve this information and use nextjs getServerSideProps
https://nextjs.org/docs/basic-features/pages
With what your looking for the dream is incremental builds (single pages built by Netlify)
My understanding is that the offline plugin utilizes a service worker that reads from the cache unless the requested file is not available, in which case it retrieves it from the network. There is a great article about it here https://www.freecodecamp.org/news/how-to-enable-offline-mode-for-gatsby-site/
> I need user accounts and user management, as the database content is user-driven
Entirely possible with Gatsby. You set up auth guards the same as you would with any other app. Auth0 blog is a pretty good starting point.
>I would like to have a comment system as well, and maybe even a rating system (eventually)
Also entirely doable, you'll just need to write the same backend as you would for any other app to CRUD these. (I'm a fan of Nest personally, but it's more Angular than React...). Long story short: user gets token, maybe from Auth0, user token is sent to your backend and associated records are returned.
jamstack deployments plugin recommended in this tutorial
Yo Pussyrich, my guess would be start with Treeshaking. https://webpack.js.org/guides/tree-shaking/
It basically gets rid of stuff JS libraries etc you’re not using from what I understand. I haven’t used it on a project yet myself.
That being said a great place to start is to ensure you’re using all the libraries you’re importing. Then from there check if there’s any Netlify plug-ins that can help you. Because some of them are absolutely rad.
There is an easier method with FaunaDB and netlify functions. FaunaDB will provide Graphql interface for free. The free tier is like 50MB/day(remember it's json only so kind of doesn't take much data). https://www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/
I am actually creating my user profiles using these two. Much easier.
Hey, before trying what you suggested, that I think is a valid approach, I would suggest trying this to improve your build times: https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/
Your in luck, Netlify has environment variable built in
https://www.netlify.com/docs/continuous-deployment/#environment-variables ✨
Good advice. Just want to add that Netlify and Vercel also support serverless functions. Netlify even supports Gatsby Functions built right into your Gatsby project codebase.
Have you already reviewed the documentation about Gatsby Functions?
You should also review the documentation for your specific host to find any details and special instructions about how Gatsby functions can be deployed and accessed. For example, check this guide for Netlify (but note other hosts will have a different way).
Is this for Stripe’s redirect to checkout button? If so you’ll have to update the lineItems quantity with the current select value in the stripe.RedirectToCheckout function. This will then provide you with the specified quantity on Stripe’s website.
This page from the docs is what I referenced when implementing it myself Stripe Docs
I'd say you are correct. E-commerce is a very tricky problem that practically requires a back-end server of some sort due to private API keys. Other than platforms like Snipcart which bring their own backend, there isn't really a standard enough long-standing way to go about this to warrant the development of a plugin.
Stripe's Client-Only Checkout is relatively new, probably to compete with Snipcart, but it's probably the only alternative situation that can viably offer improvements over what you currently have since you basically replace the current middleman, Snipcart, with Stripe instead of a self-hosted payment middleman like with Magento.
That said, the only big difference between a Gatsby plugin and a React plugin most of the time is sourcing data from GraphQL. If you find a good React cart that works with Stripe, you're already most of the way there.
I think this is up to the individual providers to support. Gatsby isn’t exactly closed-source in any way, so anyone could peruse the source code and adapt a build service accordingly.
Looks like Netlify has support, for example: https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/
No doubt, if incremental builds ever become more optimized, or change in some way, Gatsby cloud would probably have the jump on other providers.
https://codesandbox.io/s/modern-wildflower-emmfd?file=/src/pages/index.js
​
I made this, hopefully, this helps.
Did you try to use the useLayoutEffect hook to solve this problem? I don't tested it, but it's similar to the componentWillMount in class components and runs before The component is mounted.
https://reactjs.org/docs/hooks-reference.html#uselayouteffect
"...Updates scheduled inside
useLayoutEffect
will be flushed synchronously, before the browser has a chance to paint...."
It's fairly straightforward, you just need to manage the state of open vs closed. I suggest reading this on useState.
Your solution looks something like:`const [navOpen, setNavOpen] = useState(false);`
Where you'll use the state to determine the menu's visibility and `setNavOpen` on whatever element's click event.
Thanks!
Animation on scroll? Or are you talking about the down-pointing button on my home page that scrolls the page down? To do that, I created a React Ref and attached a listener to scroll to it.
Like
<hr ref={this.separator} />
button onClick={scrollToContent}
scrollToContent = e => {
this.separator.current.scrollIntoView({ block: "start", behavior: "smooth" });
};
​
Hope that helps.
It depends on what you’re hoping to achieve. Nextjs is a full framework for websites powered by React. Just keep in mind you’ll have to run it on a server if you want to host it anywhere. If you’re just doing a simple project you might just be able to set up Node/Express server and React yourself without needing the whole framework.
https://buttercms.com/blog/nextjs-vs-gatsbyjs-picking-the-right-support-react-framework
>gatsby-wordpress-starter
Thanks for suggestion. But comparing that to how easily you can setup a website with wordpress.com it is hard for average user who wants quickly without any coding or configuration a site up and running with working CMS
It's not thousands, but my own portfolio has 42 pages and has a 99/98 desktop/mobile: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmortstock.com&tab=mobile
I'm curious about what others here have to say about larger-scale sites with Gatsby as I'd like to use it for more client sites.
Hello!
Can you try to disable a Disqus for rechecking the Page Speed score? I'm now looking Page Speed in Google Lighthouse. And Page Score for mobile is 35, it's a poor result. And a big bad impact coming from Disqus scripts. Here is a link to Google Page Speed: https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fwww.faesel.com%2Fblog%2Fgatsby-tech-blog-starter
Please, can you disable a Disqus? I want to see, hou much will be Page Speed score without Disqus scripts..
Have you restarted the development server in between or made sure that you don't have a typo anywhere? I set this codesandbox up by copy/pasting the code and it works without problems: https://codesandbox.io/s/gatsby-tutorial-part-6-oxob2
Maybe comparing to that helps finding the typo?
<ListLink/> is just a React component that you created. props.children is a special prop that represents whatever you put in between the tags of your react component. see https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx for more details. Remember Gatsby is a library built on react, so you might want to prefer React documentation for information on how components work and syntax surrounding that and JSX
Awesome stack and awesome work. I'd recommend this host over netlify so you don't get hit with hidden build time charges like foolish me.
I'd love to see the code! I'm working on a similar project for a client (contentful + Gatsby + Paypal).
Mostly ecommerce & ERP/accounting - but I've come to be very frustrated with all SaaS that isn't open-source for the effective "until death do us part" data and migration-costs lockin.
Wordpress & Advanced Custom Fields was the closest I could get to a FOSS Rapid DB Dev tool but overkill for a lot of things and doesn't support Custom Tables without a lot of risks. In fact I've ended up doing a lot of scoping with GSheets for the sake of speed.
Directus looks perfect for quickly designing and iterating relational DB structures to either use with it as the interface as well or use the SQL in another app.
Prob the first thing I'll do is a quick Bookmark Manager tool and prob an HR app as a couple of quick wins for relatively simple data that is often collaborated on among our team.
The whole JAMstack movement is very interesting, so be looking at marrying Directus with maybe Gatsby/Hugo/Jekyll. Strapi looks worth a further look as well but all the similar-but-slightly-different abundance of choice there now seems to be does mean a lot more up-front research before making choices.
Sponsoring a dev to build a Cloudron package for Directus as well to quickly fire up and play with instances and then look at building some more of the common JAMstack packages on Cloudron - because frankly, time is precious and you can't save more time than with a one-button containerised build (& destroy).
Contentful user here.
I recently evaluated Strapi as an alternative to Contentful in our stack. It is extremely extensible, but unfortunately it was unsuitable for a few reasons:
- No HA model
- Restart required every time you change the content model
- No SSO for admin portal
- Deployment not ideal (ie, the Docker deployment requires persistent storage)
I also evaluated Prismic, which is a viable alternative except for one thing. They have no write API ( https://prismic.io/docs/rest-api/basics/does-prismic-have-a-write-api )
In the end, we are staying with Contentful. Although expensive, it does everything we need it to out of the box.
Hey! This is great. Have you considered using the gatsby-image package for lazy loading image assets? I think it might improve the UI a bit more.
You should try playing around with Prismic.io , the slices feature is quite cool. I'm not a huge fan of the UX in contentful - it's quite clunky
I like to use Prismic as their "Slices" feature works really well with Gatsby. Take this blogpost as an example: The info box, the code boxes with titles, labels, images - they are all slices in Prismic. You can have a look at my github to see the source.
There's also an e-commerce recipe to quickly integrate Snipcart into a Gatsby site. It's detailed on Snipcart"s blog: https://snipcart.com/blog/gatsby-recipes-ecommerce
I like using Snipcart as a drop-in with Gatsby. Supports downloads out of the box. You can source product data from wherever you want. Static files, other CMS, whatever.
​
There are some tools to mitigate this, its main problem is that npm projects dont share dependencies. You can try https://pnpm.js.org/ where all your dependencies are linked from one place in filesystem. Or some experimental feature of yarn (not tried myself yet) https://www.freecodecamp.org/news/getting-rid-of-node-modules-with-yarn-plugn-play-a490e5e747d7/
Aside from this... gatsby needs a lot of tools to build your page, and they are all in node_modules
You could try something like https://cloudinary.com where they do all the heavy lifting for you. Just upload the main image and access different transformations on the fly by passing URL parameters. However this might work out a bit expensive in the end.
I'd look into hosting on AWS S3 (super cheap) and using something free like Cyberduck to reduce friction when uploading images. Since you're using Gatsby you could just deploy your entire site on S3 for pennies per month
You could build something custom or you can use a widget library.
Have you looked at Webix components?
They have an opensource version that contains all kinds of wodgets for filtering sorting and presenting different data in different ways.
Or something like this?
Right?! It's even more painful on mobile when you can only see one sentence of the recipe between the ads.
At the moment I'm just using markdown files but the next phase of this will definitely include some sort of CMS backend (I've been looking into CraftCMS). I personally don't mind managing the markdown files but I know that building this out in a CMS will just make it easier to add content as we keep adding recipes.
An alternative I went for and it working out quite nicely. I'm developing the project as a monorepo which means I can have a package for all my frontend components shared between the backend and the frontend. I then connect to the sanity realtime API and simply pass the data into the page component.
If the components aren’t starters and are truly shared between the sites, make a Gatsby plugin. There’s a boilerplate on their website to get you started. Then follow this Tailwind guide, but instead of doing it in your theme, do it inside the plugin. Plugins in Gatsby can include everything (Gatsby-wise) a normal project does - gatsby-node.js, gatsby-browser.js, etc., which gives you a lot of control. Then, install the plugin with NPM/Yarn (a local path), and add it to your gatsby-config. Then you’re good to go.
If you just want to gtd https://tailwindcss.com/ can do a lot of the heavy lifting for you. Documentation is great and once you understand the basics you can be productive fairly quickly. Speaking as a back end developer with the design skills of an impaired monkey.
Yeah, I was looking at adding something that covers continuous development. Like you said, you would need to run something like Jenkins. I was looking at using https://drone.io, it seems like it’s a lot lighter weight than Jenkins if you self host.
To my knowledge Next doesn’t really have a cms plugin library in the way that Gatsby does, but it gives you a robust set of tools so you can easily write your own data fetcher/processor for static site generation. They have a couple of examples here for some of the more popular CMS’s
Hmmm, I'm going though this tutorial, no real issues. Maybe 1 minor warning.
https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby
just in case anyone else is viewing this thread and having same issue... getting this to work was ultra confusing (the gatsby doc page is bad!) but I ended up loosely following this tutorial and that worked great for me https://egghead.io/lessons/gatsby-add-a-tags-page-and-display-all-tags-in-a-gatsby-js-v1-blog
This looks good! Too many images though. Slowing it down. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcalifornia.gatsbytemplates.io%2F&tab=desktop
(Cross posted from /r/reactjs) We've also posted to Dev.to! https://dev.to/narative/understanding-gatsbys-lifecycle-4g5l If you're having a hard time picking up some concepts, let us know! We'd love to continue this series.
no it doesn't work, I still can't import it like usual,
it still said error in ./static/Monster.glb ⠀ Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
i cant find the solution on google.
yes, you need to rebuild, that's how static site generator works, you can trigger the rebuild via webhook from wordpress on most hosting like netllify, vercel, heroku, gatbsycloud; or you can use tools like deployHQ or circleCI.
some host, like gatsby cloud and netlify (https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/) also support incremental build (a faster way to build)
Netlify Dev has a CLI that lets you build locally.
From the site
>Run our entire platform right on your laptop.
Preview it all – site generation, functions, and edge logic.
I use it to test development builds for gatsby or CRA sites locally
Well there are couple of options to perhaps reduce the build time, which can depend on your bundle size, the size of the API. I would recommend trying Gatsby Cloud, there is a free trial you might want to check to see if it decreases your build time. Also if you use Netlify, there is a plugin and some techniques to activate cache in order to reduce build time. Check here.
Hey there again! Glad you were able to get the build and hosting situation sorted out. I remember your thread well as I believe I replied in it.
I recently read about this solution https://www.netlify.com/blog/2020/02/25/gatsby-build-speed-improvements-with-parallel-image-processing/
It does require some extra infrastructure but in the example they talk about, they use the free tier of Google Cloud and I can attest to how powerful Google Clouds free tier is myself.
A word of caution though, they do mention it is experimental so maybe try it out in a staging environment first before deploying to production.
I should also mention its not the end of the world if you can't use gatsby-img. The optimization is nice but in the end you have to decide whats more important. There are ways of doing similar things that gatsby-img does without a lot of setup. Take a look at that article and see how you feel about it. If you wanna brain storm some other solutions reach out to me and i'd be glad to help.
It seems like you’re looking for a way to keep it all within the project. There’s a few things you can do:
run a separate node server on your host
use a host like Netlify that handles all the form stuff for you - see https://www.netlify.com/docs/form-handling/
use a lambda with another service (Netlify, AWS) to accommodate a serverless form setup
use a service that accepts form submissions and process them in this way that you - see https://thepowerofserverless.info/services.html#web-forms
Good luck!
Not perfect yet (some bugs) but already ready to use is https://strapi.io/. I used it for my private resume website using different "Post-Types" and dynamic components which are easy to configure. It's a lightweight node.js cms and for common use you don't event have to touch the code. Here's a nice tutorial for using it with Gatsby: https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi
Couple of thoughts based on my experience: * Both Prismic and Contentful are basically free if you’re using them smaller projects like personal projects. What you’re paying for in both is more API requests, support, and additional seats for more users. * There are a couple of other options that are self-hosted including Sanity (https://sanity.io) which is pretty excellent, and Strapi (https://strapi.io) which is open source. Self-hosted meaning they can both run on a managed hosting platform like Netlify or a basic droplet on DigitalOcean.
I’m personally a big fan of Prismic for a hosted solution, and Sanity for a self-hosted solution. Both are very developer focused and offer a variety of nice features are super stable since they’re being used with a static site generator.
More and more governments push privacy focused laws (which as a consumer, I really appreciate). If you really do need it, I think the best option is an opt-i n.
Since we're on that topic, I didn't check your site for Google Analytics. Great alternatives include Matomo (still needs opt-in per GDPR) and Fathom (supposedly doesn't need opt-in, haven't tried it myself yet but eager to do so on the next project).