menu

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

Channels
Team

Reading local files for React-static is beyond me at the moment

March 8, 2019 at 11:09pm

Reading local files for React-static is beyond me at the moment

March 8, 2019 at 11:09pm (Edited 4 months ago)

After listening to Tanner's impassioned youtube video about react-static, I was excited to try it. I get the various concepts at play and have gotten closer. The part that is still over my head is about reading data from a local source. I found the code snippet (below below) and I get it...but it just still a bit over my head. Perhaps I need more pure node experience. If I were to try to adapt this to my data (not posts), I would get lost. Anyway, React-static seems like a really cool project but I'd suggest that you give a few more examples for things like this. Perhaps this is all netlifyCMS' fault, ha.

Either way, pretty sure it's worth it (for someone like me) to simply learn GraphQL and use a Gatsby starter than to have to wade through fairly challenging promise/async/await/readFileSync etc. code like below. Basically, trying to figure code challenges like below and all the random setup tasks, is just beyond me. I just want to get something working sooner and get into some kind of feedback loop.

function getPosts () {
const items = []
// Walk ("klaw") through posts directory and push file paths into items array //
const getFiles = () => new Promise(resolve => {
// Check if posts directory exists //
if (fs.existsSync('./src/posts')) {
klaw('./src/posts')
.on('data', item => {
// Filter function to retrieve .md files //
if (path.extname(item.path) === '.md') {
// If markdown file, read contents //
const data = fs.readFileSync(item.path, 'utf8')
// Convert to frontmatter object and markdown content //
const dataObj = matter(data)
// Create slug for URL //
dataObj.data.slug = dataObj.data.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '')
// Remove unused key //
delete dataObj.orig
// Push object into items array //
items.push(dataObj)
}
})
.on('error', e => {
console.log(e)
})
.on('end', () => {
// Resolve promise for async getRoutes request //
// posts = items for below routes //
resolve(items)
})
} else {
// If src/posts directory doesn't exist, return items as empty array //
resolve(items)
}
})
return getFiles()
}

March 9, 2019 at 2:27am

hey Kyle, thanks for posting this. i have need for just such a piece of code, so all be experimenting with this shortly, and will post findings.

like-fill
1
  • reply
  • like

i suggest using the glob package instead, it's much easier. you can see how I do it here. https://gitlab.com/ziinc/barebones-static/blob/master/src/utils/readContentDir.js

like-fill
1
  • reply
  • like

March 9, 2019 at 6:14pm

@ziinc Thanks for sharing. That actually does make a lot more sense.

  • reply
  • like

March 12, 2019 at 6:24pm

Yep, sorry. Converted to gatsby. Good luck React-static!

  • reply
  • like

April 2, 2019 at 5:12pm

No worries! This is where Gatsby shines vs React Static

  • reply
  • like

Some day we will also have plugins that do this for you (we're very very close, and already have a filesystem source plugin now)

  • reply
  • like

Good thread though

  • reply
  • like