In a Gatsby project hosted in Gatsby Cloud I'm passing an API key as an environment variables, but unfortunately it's not available...
The code looks like this:
import React, { useEffect, useState } from 'react';
import Airtable from 'airtable';
Airtable.configure({ apiKey: process.env.AIRTABLE_API_KEY });
const base = Airtable.base('appKjIv7utFmqAkdT');
function Gallery() {...
You can see where I'm inserting the API key.
My gatsby-config.js looks like this (I'm loading dotenv on top):
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
siteMetadata: {
title: `wernergeller.com`,
siteUrl: `https://www.yourdomain.tld`,
},
plugins: [
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: '123',
},
},
'gatsby-plugin-image',
'gatsby-plugin-sitemap',
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: './src/images/',
},
__key: 'images',
},
],
};
Locally (gatsby develop) this is working well.
Any help is highly appreciated!
In Gatsby Cloud variables needs to be added in the dashboard. The URL is something like: https://www.gatsbyjs.com/dashboard/YOUR_ORGANIZATION_UUID/settings/general#env-vars
And visually:
You can add variables individually or in a bulk with key:value pair:
Keep in mind that if you have environment variables that need to be accessed in the browser rather than the server, you'll need to prefix with GATSBY_.
It looks that the Airtable configuration is set on the browser, so you will need to change the key to:
Airtable.configure({ apiKey: process.env.GATSBY_AIRTABLE_API_KEY });
Changing the environment variable accordingly in the process.env and in the Gatsby Cloud dashboard.
Test your site with gatsby build locally before pushing it because gatsby develop it's not a full representation of your built/compiled project.
Related
I'v already migrated from webpack to vite and used vite pwa plugin to register a service worker.
My problem is that when I try to use a custom path for service worker, Vite will work fine in production, but in development cause 404 error.
here is my VitePwa vite.config.js:
VitePWA({
srcDir: 'src',
filename: 'sw.js',
devOptions: {
enabled: true,
},
strategies: 'injectManifest',
injectManifest: {
injectionPoint: undefined
}
}),
I already got that, in the development environment, vite pwa plugin is looking for sw.js in the public directory but I want it to get it from src
I got the solution
First, setting type as module is needed in vitePwaPlugin config in devOptions:
devOptions: {
enabled: true,
type: 'module',
},
and vitePwaPlugin will try to install dev-sw.js?dev-sw file as service worker
Second, for handling registeration I used registerSW from virtual:pwa-register
import { registerSW } from 'virtual:pwa-register';
if ('serviceWorker' in navigator) {
registerSW();
}
I didn't find an example for a react host with and nextjs remote app
My host is working with a react remote app, now that I'm trying to add a nextjs remote app, it's not working:
Ports:
Host 3000
React remote 3001
NextJS Remote 3002
In my host react app I have the following, in the webpack.config.js file
plugins: [
new ModuleFederationPlugin({
name: 'react_container',
filename: 'remoteEntry.js',
remotes: {
remote_react: 'remote_react#http://localhost:3001/remoteEntry.js', // <- This is working
remote_nextjs: 'remote_nextjs#http://localhost:3002/_next/static/chunks/remoteEntry.js', // <- Not working :-(
},
exposes: {
'./react': 'react',
'./react-dom': 'react-dom',
},
shared: {
},
}),
And in the remote nextjs app in the next.config.js file
const { withFederatedSidecar } = require("#module-federation/nextjs-mf");
module.exports = withFederatedSidecar({
name: "remote_nextjs",
filename: "static/chunks/remoteEntry.js",
exposes: {
"./ExposedComponent": "./components/ExposedComponent",
},
shared: {
},
})({
// your original next.config.js export
});
And finally, in the App.jsx of the host , I'm trying to consume the remote components like
import RemoteNav from 'remote_react/Nav'; // <- Working
import ExposedComponent from 'remote_nextjs/ExposedComponent'; // <- Not working
I have repo here
The error I'm getting its 404 from
http://localhost:3000/_next/static/chunks/components_ExposedComponent_js.js
Thanks
From the webpack config of the host, I can see that the next JS app is running on port 3002.
You are getting 404 error for next JS remote bundles when the host is trying to fetch the bundles from next JS server, it is hitting port 3000 instead of 3002. This is because the next.config.js does not have the updated publicPath.
Add the following in the place where it says //your original next.config.js export in the next.config.js file
webpack: (config) => {
config.output.publicPath = "http://localhost:3002/_next/";
return config;
}
This will set the publicPath of your next JS app to port 3002 and fetch the bundles correctly.
Referring to https://webpack.js.org/guides/public-path/ ,
on your remote app's webpack config, set publicPath would fix the path issue.
export default {
output: {
publicPath: 'auto',
},
plugins: [...],
...
}
I have the following structure to use one domain to multiple projects:
A repo that contains a single vercel.json file to configure path to others projects
A repo that contains a home app example
A repo that contains a checkout app example
The vercel.json works pretty great and is deployed in nizen.com.br, here is how is it:
// vercel.json
{
"rewrites": [
{
"source": "/checkout",
"destination": "https://checkout.nizen.com.br/checkout"
},
{
"source": "/",
"destination": "https://home.nizen.com.br"
}
]
}
So if we go to nizen.com.br we get the home app example without styles and a bunch of errors in console trying to get the assets of home.nizen.com.br in nizen.com.br and the same happens to checkout app.
Here is one of the similar errors that appear in console on Home app:
And here is the checkout app:
About the app next.config.js files, only Home app stays untouched and Checkout app has a basePath added with value "/checkout" as follows:
// Checkout app next.config.js
module.exports = {
reactStrictMode: true,
basePath: "/checkout",
};
I have tried to use the Next rewrites in hope that will solve the problem but it didn't work.
// example of rewrite that I did
module.exports = {
async rewrites() {
return [
{
source: "/",
destination: "https://home.nizen.com.br",
},
];
},
};
I tried to pass :path* and :path in source and destination, as well use fallback and even change the destination to checkout app to see if something change and none of that worked.
If I got to https://home.nizen.com.br the app runs perfect and same to checkout. What am I doing wrong?
I have solved this question changing the strategy. Instead of using a repo with vercel.json to route the micro-frontends, I'm using the home app as the project hosted in nizen.com.br and it's next.config.js file is the one who makes the magic happen!
//Home App next.config.js file
module.exports = {
reactStrictMode: true,
async rewrites() {
return {
fallback: [
{
source: "/checkout",
destination: "https://checkout.nizen.com.br/checkout",
},
{
source: "/checkout/:path*",
destination: "https://checkout.nizen.com.br/checkout/:path*",
},
],
};
},
};
Both the source and destination must point to the same sub-path (/checkout) and both fallback blocks are necessary. I'm using Next version 12 by the time I'm writing this.
I have created two dynamic page but error displayed:
exporting a Next.js application via next export disables API routes.
This command is meant for static-only hosts, and is not necessary to
make your application static. Pages in your application without
server-side data dependencies will be automatically statically
exported by next build, including pages powered by getStaticProps.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export
I followed exportPathMap method using next.config.js but could not solve. Could you please check my config code below solve this issue?
Page Root: pages/category/[list]/[id].js and pages/store/[list]/[id].js
next.config.js
module.exports = {
images: {
domains: ["dl8mjowvdz1rh.cloudfront.net", "app.ae"],
},
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/': { page: '/' },
'/category/:list/:id': { page: '/category/:list/:id', query: { title: 'Category Page' } },
'/store/:list/:id': { page: '/store/:list/:id', query: { title: 'Store Page' } },
}
},
};
I need to know about the configuration file. Why we use it to react project.
with next.js, you can write your environment variables in ".env.local" but those environment variables will be for server-side. if you want to add environment variables for your client, you add it to next.config.js
If you want to add a new webpack plugin
If you want to convert your app to progresive web app
module.exports = {
webpack: (config) => {
// adding a webpack pugin
config.plugins.push(new MonacoWebpackPlugin());
return config;
},
// this will pass the env variable to the client side
env: {
AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
BASE_URL: process.env.BASE_URL,
EMAILJS_SERVICE_ID: process.env.EMAILJS_SERVICE_ID,
EMAILJS_TEMPLATE_ID: process.env.EMAILJS_TEMPLATE_ID,
EMAILJS_USER_ID: process.env.EMAILJS_USER_ID,
BASE_URL: process.env.BASE_URL,
},
// set up for progressive app
pwa: {
dest: "public",
// runtimeCaching,
swSrc: "service-worker.js",
},
};
You need to add configuration file in next js project for custom advanced behavior of Next.js. The file next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build