Gatsby.js React style static website generator for SAFE Network

react
website
static

#1

Along with the JAMstack approach, Gatsby.js might be a way to build great React style websites on SAFE. Initially as static websites, but later extended to use the SAFE API for dynamic c content (that’s a bit of a hunch, so need investigating).

Be great if someone wants to play with this. There’s a decent https://www.gatsbyjs.org/ website, and here’s a tutorial that might be fun to try. I don’t have time myself, but maybe someone will have a go and report back.


#2

Interesting, I like seeing tools like this, I have been playing with Vuejs with similar goals. It all depends on the site needs, but from the sounds of it Gatsby could be a great tool. I would see it benefiting from being paired with some sort of deployment script so users could manage their content wherever, then run a (node?) script pulling the content/files and uploading/updating the network.


#3

Hey, @happybeing Yeah Gatsby is a great tool for generating progressive static websites, which is good for its performance. While planning for implementing DevHub website we were looking for some tool which should be developer friendly for developing and maintaining a static website and also increases its performance. Among many React-static and Gatsby seems to be good. They support all the latest toolsets like Webpack, React JS, ES6 and many others. We went on with React-static just because to use Gatsby we need to know GraphQL to fetch data whereas React-static just uses a simple XHR request (for example Axios). While considering performance Gatsby stood front. On the other hand, React-static provides inbuild SEO which we don’t need to worry about.
We have been using React-static for DevHub, safenetwork.tech and latest maidsafe.net websites.


#4

Thanks @Shankar_S that’s very helpful to someone like me who hasn’t delved into either of these. Much appreciated.

FYI Ruben Verborgh has been pointing out the differences between SPARQL and GraphQL in a video at the head of this twitter thread (not watched myself yet):


#5

Thanks for the link. I’ll watch it :+1:


#6

Not sure how important this is, but:


#7

Thanks for sharing. That look’s interesting. Let me play with it :+1:


#8

I made a post on the Solid forum looking for more info:


#9

A bit more depth on React-static

  • React-static get started video (5min YouTube)
  • Walkthrough - Installing and creating a new project with Styled Components (20 min YouTube)
  • Introducing React-Static! How it works and why we built it! (80mins YouTube)

React-static looks very promising for building fast static sites for SAFE, and I think it would work well with a local CMS (which could be sync’d to SAFE, eg via SAFE Drive/SAFE git). I wonder if netlifycms.org could be adapted to give a decent CMS experience too.

The last one is very impressive - see ~15 mins onwards for details of how React-static works and why it is so fast. Looks like an ideal way to generate very fast static sites for SAFE.

I made a few notes on the last video above…

Comments: (06:00)
	Next.js - not fast, feels Wordpressy, very popular
	Phenomic - poor dev exp
	Gatsby.js - fast, feels like forces GraphQL which is not needed for blogs etc. Not great dev experience, reliance on plugins to modify anything.
React-static data sources (e.g. Contentful, WordPress, Markdown, JSON etc)
	- Tanner uses Contentful (like WordPress but without front-end)
	- Contentful -> React-static -> HTML + JSON (for every page on the site)
	- uses Netlify to deploy (drag and drop folder), autobuild from github, free for low traffic sites
	- FAST (~15min): 
		HTML loads page with full visual, then react-app loads behind and gives full interactivity/effects etc.
		Navigation only loads JSON (so very fast - uses React Router so no need to load HTML, react-app etc)
		You can preload links to make it even faster
		Offline - entire website can pre-load and browse without internet connection
	Code (31:15 mins)
	static.config.js
		- /public - put static assets in here 
		- getRoutes() - gets the data (e.g. from WordPress etc) returns an array of paths (obj, path key, path to export) <- GOOD
			here you can decide to pre-load, or fetch on load etc.
		Build minifies and excludes anything you aren't using
		- HTML page customisation (39mins) 
	src/index.js
		- sets everything up (probably don't need to touch)
	src/App.js (42mins)
		- defines pages, navigation etc
		- each page is a React component (a JS file)
		- Blog.js more complex defines a 'higher order component' using getRouteProps() (45:20mins)
			getRouteProps() ensures posts is available elsewhere using getProps({posts}) (see static.config.js)
		static.config.js (52:00 mins)
				const { data: { posts } = await axios.get('some url')
		is same as
			const resp = await axios.get('some url')
			const { data } = resp
			const { post } = data
		- customise page title (52:10 mins)
		- SEO sitemap setting (59:15mins)
		- load progress bar NProgress.js (01:03:40)
		- prefetch links (01:04:35)
	web hooks to auto re-build (netlify site) when data on github, Contentful etc change
	Netlify CMS (video 01:18:05)

Latest features in React-static v6: https://medium.com/@tannerlinsley/react-static-v6-8dbe9fd202d4


#10

This Tanner :slight_smile:

As the old-school guy he is referring to I did find this useful also:
medium.com/@tannerlinsley/️-introducing-react-static-a-progressive-static-site-framework-for-react


#11

I’ve used react-static for multiple large, complex, production-ready websites and I highly recommend it. It’s significantly simpler and more flexible compared to big frameworks like Next.js or Gatsby. The new react-static v6 plugins are also a breeze to use and publish for shared SAFE functionality, if desired.

Big frameworks like Gatsby are great for creating an initial website for you, but as soon as you realize you want something even remotely customized, they tend to get in your way rather than helping. Just my two cents.


#12

I stumbled on a couple of neat looking React libraries for data presentation among other things. The github page has animated demos, so worth a visit: