{"componentChunkName":"component---src-templates-single-blogpost-js","path":"/blog/gatsby-env-variables","result":{"data":{"contentfulBlogPost":{"title":"Gatsby .env variables","slug":"gatsby-env-variables","id":"d7a55f61-1fcd-5775-a255-d35ec2bfd36c","createdAt":"13. März 2020","category":[{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28","blog_post":[{"title":"Gatsby blog with Contentful","slug":"gatsby-blog-with-contentful","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/4Joi19CFYut4ELjuW2IWWh/15747b57ff62334f588f562983070117/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg?w=800&q=50"}},"id":"4913bd1f-e26f-5532-b413-537104c7b156","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies In order to use Contentful as a CMS, the first step is to install the…"}}},{"title":"Protected Routes in Gatsby with @reach router","slug":"protected-routes-in-gatsby-with-reach-router","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/1u4g6T8nqZJVOpuBQzLPYD/fe986d21e63c2d4554a3f3d3686475d5/apple-laptop-notebook-office-39284.jpg?w=800&q=50"}},"id":"c78e7029-9bbc-5638-9bd0-24e10ccb3b0b","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Default props in React and Gatsby","slug":"default-props-in-react-and-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"dd733cf4-96d4-5258-8465-8424a9245301","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"props.children\nprops.data\nprops.pageContext (props)\n({data})\n(children)"}}},{"title":"Pagination in Gatsby","slug":"pagination-in-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/2l0S9S1tN4bZ6yNpESrHJp/4ee2c2d0852bdf66ec52fa211b2f8ecc/office-freelancer-computer-business-38547.jpeg_cs_srgb_dl_coffee-apple-iphone-smartphone-38547.jpg_fm_jpg?w=800&q=50"}},"id":"47c94369-be89-585d-957a-717b74b9bc27","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Design and Create a Website Using Adobe XD / JAMStack / CSS / React / Gatsby / Contentful / Netlify","slug":"design-and-create-a-website-using-adobe-xd-jamstack-css-react-gatsby-contentful-netlify","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/2K2zDzcVRSEKQJgKhcWRMm/08bcaae5aab53a1d68b3ddd02ea7eb96/fashion-art-coffee-macbook-pro-57690.jpg?w=800&q=50"}},"id":"9467e107-a0bb-55de-8264-508ab99e0a30","createdAt":"23. Februar 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"This web development course offers detailed step-by-step instructions on how to design and build a…"}}},{"title":"Gatsby .env variables","slug":"gatsby-env-variables","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/6qDqC1LGYCDammzZ04iofw/d9964648daeed720f472c470ea025ae8/macbook-laptop-smartphone-apple-7358.jpg?w=800&q=50"}},"id":"d7a55f61-1fcd-5775-a255-d35ec2bfd36c","createdAt":"13. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"create 2 files in root folder .env.development\n.env.production Gatsby automatically detects in which…"}}},{"title":"Gatsby with Material UI and styled-components","slug":"gatsby-with-material-ui-and-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"1946258b-09cc-532f-a795-41d0f0ced3c1","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies 2. Update gatsby-config.js"}}},{"title":"Edit the default Theme in Material UI","slug":"edit-the-default-theme-in-material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"c3f5d0b2-3680-5bdf-8c40-4e8955faffc8","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Create a Theme object 2. Pass Theme object to the ThemeProvider 3. Create Layout Component and…"}}}]}],"content":{"childMarkdownRemark":{"html":"<pre><code class=\"language-javascript\">// gatsby-config.js\n\nrequire(\"dotenv\").config({\n  path: `.env.${process.env.NODE_ENV}`,\n})\n</code></pre>\n<p>create 2 files in root folder</p>\n<p>.env.development\n.env.production</p>\n<p>Gatsby automatically detects in which environment the website is running.\nSo it automatically extracts the .env variables from either the .env.development or .env.production file.</p>\n<p>Example .env key-value-pair\nCONTENTFUL<em>ACCESS</em>TOKEN=yourrandomkey</p>","timeToRead":1}}},"allContentfulCategory":{"nodes":[{"title":"Google Tag Manager","slug":"google-tag-manager","id":"d0a285b4-b818-5612-8fdc-5f325aa48eb4"},{"title":"Axios","slug":"axios","id":"36071d22-d950-5e0e-8832-52a4f31016bf"},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512"},{"title":"Express","slug":"express","id":"eff898c7-be39-553c-a199-a8b67af03038"},{"title":"Node.js","slug":"node-js","id":"0c5ec24f-7db8-5e3c-bf01-d8dc8b8c4273"},{"title":"Git","slug":"git","id":"995d33c2-1a26-52b1-81b1-a7c5dfefbb4c"},{"title":"HTML","slug":"html","id":"368ff1b9-f81e-5748-8ea5-5c257ed913f9"},{"title":"GraphQL","slug":"graphql","id":"8101a2c8-2d15-5297-bfd1-d213d77b9ce8"},{"title":"Javascript","slug":"javascript","id":"c5c3bf5b-ef37-5b26-af84-dfb083fecabf"},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268"},{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8"},{"title":"CSS","slug":"css","id":"334376eb-4c45-5412-8b19-80f1a16d19e5"},{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28"},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b"}]}},"pageContext":{"slug":"gatsby-env-variables","title":"Gatsby .env variables"}}}