Running the development server for real time updates and full stack development.
Make sure You have the WordPress backend correctly configured first before running the local server.
Note: Works well with the new Woocommerce product editor found in: settings => advanced => features => Experimental features => New product editor => Try the new product editor (Beta)
1. Navigate to the Frontend Directory
Open your terminal and move to the project folder:
cd superfunky-space
2. Install Dependencies
Run one of the following commands based on your package manager:
yarn install
or
pnpm install
or
npm install
3. Configure Environment Variables
Create and configure the .env.development file with the required environment variables:
WORDPRESS_SITE_URL=http://admin.yoursite.com
GATSBY_SITE_URL=https://yoursite.com
GOOGLE_TAGMANAGER_ID=GTM-XXXXXX
PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_XXX
STRIPE_SECRET_KEY=sk_test_XXX
STRIPE_WEBHOOK_SECRET=whsec_XXX
STRIPE_ID=acct_XXX
MG_API_KEY=XXX
Make sure you never expose sensitive credentials like API keys in frontend-accessible .env files.
When on server, use the netlify .env option to set the .env variables. Learn more here
4. Start the Development Server
Run the following command:
gatsby develop
5. Access your development site
Once the server starts, access the site and GraphQL schema – learn more in your browser:
- 🌐 Frontend:
http://localhost:8000 - 🛠 GraphQL Playground:
http://localhost:8000/__graphql
This setup ensures fast, real-time development with Gatsby’s hot-reloading capabilities. 🚀
6. Use gatsby clean and gatsby build Commands
Clean the cache
If you encounter unexpected issues, clear Gatsby’s cache and restart the server:
gatsby clean
This removes all cached files and ensures Gatsby rebuilds everything from scratch.
7. Build the Production-Ready Site
To generate an optimized version of your site for deployment, run:
gatsby build
This command creates static files in the /public directory, ready to be deployed to Netlify, Vercel, or any static hosting provider.
8. Add Custom Node.js Packages
You can install additional Node.js packages to extend functionality. Use the preferred package manager:
Install a Package
yarn add package-name
or
pnpm add package-name
or
npm install package-name
Install a Package as a Dev Dependency
For packages only needed in development (e.g., linters, testing tools), use:
yarn add package-name --dev
or
pnpm add package-name --save-dev
or
npm install package-name --save-dev
Example: Adding Axios for API Calls
yarn add axios
Then, you can use it in your Gatsby project:
import axios from "axios";
axios.get("https://yourwordpresssite.com/graphql").then(response => {
console.log(response.data);
});
