Merge pull request #829 from w3bdesign/develop

Replace nextConfig with .env variables

Author: w3bdesign

.env.example

@@ -1 +1,7 @@
+NEXT_PUBLIC_GRAPHQL_URL="https://wordpress.url.com/graphql"
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME= "algolia"
+NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL="https://res.cloudinary.com/placeholder-337_utsb7h.jpg"
+NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL="https://res.cloudinary.com/placeholder-616-616_beecp5.jpg"
+NEXT_PUBLIC_ALGOLIA_APP_ID = "changeme"
+NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY = "changeme"
 NODE_ENV="development"

.env.local.example

@@ -41,19 +41,18 @@ The current release has been tested and is confirmed working with the following
 
    https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ (Firefox)
 
-   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)   
-
-   Rename .env.example to .env so the Apollo debugger will correctly load. It will not load if the NODE_ENV variable is not correctly set.
+   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)
+ 
 
 3. Make sure WooCommerce has some products already or import some sample products
 
    The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)
 
    Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
 
-4. Clone or fork the repo and modify `nextConfig.js`. 
+4. Clone or fork the repo and modify `.env.example` and rename it to `.env.`
 
-   Then set the environment variables ALGOLIA_APP_ID and ALGOLIA_PUBLIC_API_KEY in Vercel or your preferred hosting solution.
+   Then set the environment variables accordingly in Vercel or your preferred hosting solution.
 
    See https://vercel.com/docs/environment-variables
 

README.md

@@ -2,7 +2,6 @@ import algoliasearch from 'algoliasearch';
 import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 import { useState } from 'react';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
@@ -23,7 +22,7 @@ const AlgoliaSearchBox = () => {
     <div className="hidden mt-2 md:inline xl:inline">
       <div className="">
         <InstantSearch
-          indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
+          indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
           searchClient={searchClient}
         >
           {/*We need to conditionally add a border because the element has position:fixed*/}

components/AlgoliaSearch/AlgoliaSearchBox.component.jsx

@@ -2,7 +2,6 @@ import algoliasearch from 'algoliasearch';
 import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 import { useState } from 'react';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
@@ -19,7 +18,7 @@ const MobileSearch = () => {
   return (
     <div className="inline mt-4">
       <InstantSearch
-        indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
+        indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
         searchClient={searchClient}
       >
         <SearchBox

components/AlgoliaSearch/MobileSearch.component.jsx

@@ -1,8 +1,6 @@
 import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
-
 import { filteredVariantPrice } from 'utils/functions/functions';
 
 /**
@@ -45,7 +43,7 @@ const IndexProducts = ({ products }) => (
                       id="product-image"
                       className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                       alt={name}
-                      src={WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL}
+                      src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
                     />
                   )}
                 </a>

components/Product/IndexProducts.component.jsx

@@ -3,8 +3,6 @@ import { useState, useEffect } from 'react';
 import AddToCartButton from 'components/Cart/AddToCartButton.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
-
 import { filteredVariantPrice } from 'utils/functions/functions';
 
 /**
@@ -55,7 +53,7 @@ const SingleProduct = ({ product }) => {
                 id="product-image"
                 className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
                 alt={name}
-                src={WOO_CONFIG.PLACEHOLDER_LARGE_IMAGE_URL}
+                src={process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL}
               />
             )}
             <div className="ml-8">

components/Product/SingleProduct.component.jsx

@@ -7,8 +7,6 @@ import {
   ApolloLink,
 } from '@apollo/client';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
-
 /**
  * Middleware operation
  * If we have a session token in localStorage, add it to the GraphQL request as a Session header.
@@ -79,7 +77,7 @@ const client = new ApolloClient({
   link: middleware.concat(
     afterware.concat(
       createHttpLink({
-        uri: WOO_CONFIG.GRAPHQL_URL,
+        uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
         fetch,
       })
     )