Posts

Using JSON as a GraphQL data source in Gatsby

To get JSON data through Gatsby's GraphQL service, use the "gatsby-transformer-json" plugin. Install by running "npm install gatsby-transformer-json --save" then adding the name of the plugin in the gatsby-config.js file: plugins: [ `gatsby-transformer-json`, ] The plugin will find JSON files and add them as a GraphQL source derived from the name of the JSON file. (The file may need to be in a certain place - it's only working for me in the images directory.) Here's an example with a file test-data.json [ {"name" : "Larry"}, {"name" : "Fred"}, {"name" : "Joe"} ] It will have two data sources: testDataJson and allTestDataJson. Here's a query with each and the result: query MyQuery { testDataJson { name } } { "data": { "testDataJson": { "name": "Larry" } } } query MyQuery { allTestDataJson { ed...
Read more

From npm to yarn

Image
Here are some notes from watching Yarn - An npm Alternative by Andrew Mead Install yarn using npm install -g yarn Comparable npm and yarn commands: npm yarn notes npm init yarn init creates package.json file npm install yarn add downloads dependencies yarn uses yarn.lock for build consistency yarn uses a cache to speed up repeat installs npm install -g npm-check-updates; ncu yarn outdated reports on available updates in dependencies yarn upgrade updates dependencies yarn cache clean empites library cache yarn run asks script to run npm install -g pkg yarn global add pkg adds a system wide package (global) See also: Yarn Cheatsheet
Read more

Components in React: "class" and "functional"

If you're creating a non-trivial webpage it might feel like it's getting out of hand.  Changes coming in from different places. CSS files. JavaScript files. HTML files. One "thing" on your page might have code coming from seven different files. This can be confusing, not to mention it and makes reusability and testing difficult. React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components . These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional . Class Components The component method ...
Read more

Serve create-react-app from a subdirectory

If you've tried to deploy create-react-app to a non-root subdirectory (i.e. example.com/app/), then you'll need the following to make it work: Set the homepage in project.json "homepage": "https://example.com/app/" If you are using Router: Set the basename attribute:  <Router basename={'/app'}> Set Route path prefixes <Route path={`${process.env.PUBLIC_URL}/dashboard`} component={Dashboard} /> Update Link tags <Link to={`${process.env.PUBLIC_URL}/dashboard`}> Sources: https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 https://stackoverflow.com/questions/49429906 https://create-react-app.dev/docs/deployment https://medium.com/@wolovim/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af
Read more

Learn JavaScript the fun way: Memory Game

Image
Want to entertain your way into learning JavaScript? This  FreeCodeCamp.org series  might be for you. Here's an playable version of the Memory Game  by ox15 . It's one of the seven projects in the tutorial set.
Read more

Google sign-in with pwa_auth

Do you need one of those universal sign in buttons Google / Facebook / Microsoft ? Take a took a look at pwa-auth , a JavaScript tool to handle the login process for Microsoft, Google and Facebook accounts. We started with npx create-react-app  and changed App.js as follows: This only implements the Google sign-in and nothing for the back-end verification, but it's a start. Also, see this article on Medium.com
Read more