Sean Richards
June 23 2020
To stand out in the global competition, wholesale and retail companies need to tap into process and customer data and think about the value they can extract from analytics.
For manufacturers, true digital transformation starts by envisioning where in the value chain can data be applied to make a difference.
All public sector services should be designed to serve citizens first. Digital solutions and applications must be easy to use, despite physical and cognitive disabilities.
Digital processes and data-led services help energy and utility sector companies develop a stable energy offering with transparent, customer-centric services.
Shared platforms offer fast entry to new markets, cost-efficiently and scalably. But lasting value add comes from cross-industry collaboration and linking products with complimentary services.
Digitally disrupted, the companies in the banking, finance and insurance sector must actively innovate new approaches to build omnichannel customer experiences that fully utilize data.
While medical device software is strictly regulated, there's room for innovations that make life easier for patients and caregivers. Stable and secure data flow is a must.
June 23 2020
Gatsby is a free, open-source framework for building websites and applications. It’s extremely developer-friendly and streamlines the setup and configuration of your build.
gatsby-plugin-typescript
is automatically included in Gatsby. Only explicitly use this plugin if you need to configure its options.gatsby-cli
(gatsby new gatsby-site) or one of the many flavored starters, create a Git repo and push all local changes to remote. Then follow the instructions to link your repo in Netlify Console after you have authorized Netlify through Github account (or other platform of your choosing). One thing worth noting is that Netlify allows you to deploy multiple branches. This comes useful when you have both production
and staging
environment.master
, set up as staging branch) and deployed to branchname--yoursitename.netlify.app
.gatsby develop
spins up browser for you, meaning you can make reference to the window object without triggering any error. Running gatsby build
will generate optimized assets, however, the browser does not exist in build time so using "browser globals" like window or ducument object without first checking its existence will trigger a build error. To fix this, either check if the browser globals are defined; or, if the code is in render function of a React JS component, move that code to a componentDidMount() lifecycle method / useEffect hook.gatsby-source-filesystem
plugin), Databases (gatsby-source-mongodb
plugin), Headless CMS (gatsby-source-datocms
, which we will be using in the example), and so on.gatsby-config.js
file:gatsby-node.js
file using pageQuery
component, StaticQuery
component, or useStaticQuery
hook. However, you cannot mix page queries and static queries in the same file, or have multiple page queries/static queries.
ReactDOM.hydrate()
is called internally by Gatsby from ReactDOM
. The method is the same as render()
but is used to hydrate HTML contents initially rendered by ReactDOMServer
. This allows for React to pick up whatever is left after static site generation, then you can do your dynamic data fetching at runtime.src/pages
createPage
APIreact-router
or @reach-router
(@reach-router is what Gatsby uses behind the scene, so no need to install it), you can create page by exporting a component inside pages directory, or import a router and set up routes yourself.netlify.toml
file at the root of your repositorygatsby build
must be run before netlify-lambda build src/functions
or else the Netlify function builds will fail.
/src/functions
(path specified in netlify.toml
file), then access from your Gatsby app like this: fetch('/.netlify/functions/[YOUR_FILE_NAME]').then(() => ())
netlify.toml
file/dashboard
will be handled by client-side app
5. Wrap with the Provider
Unlike create-react-app
application, Gatsby does not come with App.tsx
file but we can wrap our CustomContext.Provider
and ThemeProvider
using wrapRootElement(). Then we export wrapRootElement() in both gatsby-browser.js
and gatsby-ssr.js
. Without wrapping the root element in both files there will be mismatch betwee client and server side output.
context
object.user
object is present if function request has Authorization header like below:Authorization: Bearer <access_token>
Ready to build something great? Our 15 years of experience mean we can handle any idea, big or small.