Firebase Hosting: Function not working with ServerMiddleware (Vue/ Nuxt) - firebase

I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!

Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module

Related

using .env.local with playwright

I'm setting up some first playwright tests for my nextjs project. I already have environment variables in my .env.local and I'd like to pull them into my test env.
I'm looking at the documentation and I see that I can add require("dotenv").config(); to my playwright.config.js but nothing is happening when I do that (the scripts are erroring out because of undefined.
I tried both calling process.env.foo directly within the script, and also adding a use: {foo: process.env.FOO} clause to the playwright.config.js and moving my variables to .env file instead of .env.local but nothing worked.
Help would be much appreciated! thank you.
After reading using dotenv path with JEST I found the solution is to configure the require statement:
install the dotenv package (the one that comes with next.js isn't loaded)
npm install --save-dev dotenv
In .env.local - set the vars
FOO=bar
In playwright.config.js - set which env file to use
require("dotenv").config({ path: "./.env.local" });
console.log(process.env.FOO); // prints "bar"
In a spec
test("env", async ({ page }) => {
console.log(process.env.FOO); // also prints "bar"
})

Env vars are undefined in Nextjs v12.0.8

I created a .env.local file and tried to console process.env.TEST (test env var) but I'm getting undefined. It seems process.env is always empty.
I restarted the server but I still don't see the env vars. I even tried to start a new empty project and process.env is still empty.
Am I missing something? All the other posts I see seem to have figured it out but I still can't.
My .env.local file is on the root level. I also tried to append the var with NEXT_PUBLIC, but that didn't help.
By convention, React env variables must be prefixed with REACT_APP_ in order to be used with process.env. In the case of Next.js, you can put them in the .env.local, but they would only be available in the Node.js environment. If you need to make them available in the browser, you need to prefix them with NEXT_PUBLIC_.
Refer to the documentation for more details.
Another way (more old school Next.js) would be to have a next.config.js file.
A possible config would be:
const conf = {
env: {
myVar: process.env.MY_VAR,
},
};
module.exports = conf;
Then you could simply use process.env.myVar inside your code. See this page for more information.

Unable to build project that includes a custom worker file

I'm facing a very strange issue with next-pwa. Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:
info - Creating an optimized production build ..buffer.js:333
throw new ERR_INVALID_ARG_TYPE(
^
TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
at Function.from (buffer.js:333:9)
at writeOut (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56716:26)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56735:7
at arrayIterator (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14270)
at timesSync (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:5037)
at Object.eachLimit (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\neo-async\async.js:1:14216)
at emitFiles (C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:56617:13)
at C:\Users\sdqui\Desktop\next-pwa\examples\custom-worker\node_modules\next\dist\compiled\webpack\bundle4.js:36508:26
at FSReqCallback.oncomplete (fs.js:184:5) {
code: 'ERR_INVALID_ARG_TYPE'
}
I have tried several things so far to fix this issue:
Clone the repo and updated all dependencies (i thought the issue might be webpack related)
Building the project without a custom worker file (works fine)
Downgrade to Node 10, 12, 14, 15, and re-install dependencies.
I've also tried the to use the code provided in the /example folder of the repo, but the same issue occurs there as well.
I'm not the only one facing this issue so i would appreciate help.
You can test it yourself using Gitpod, just open this link and navigate to the example, install dependencies and try yarn build.
Are you using webpack 5 or 4.x? I faced the same issue with webpack > 5 and fixed the same by passing the future object to withPWA " future: { webpack5: true }".
module.exports = withPWA({ future: { webpack5: true },
pwa: {
disable: false,
dest: "public",
//register: false,
skipWaiting: false,
runtimeCaching
}
})

Dynamic firebase.json file

It is quite difficult to keep track of the CSP rules in the firebase.json file, therefore I decided to add a script that constructs the proper rules. Now I need to manually update the firebase.json file every time I am changing something in the CSP configuration. Is there any way to dynamically configure firebase? I was hoping to achieve it with a simple renaming as it worked for many services grunt.json -> grunt.js I guess I can use some sort of templating but I wonder if there's a built-in mode to dynamically construct headers, rules etc for firebase.
There isn't a built-in way to generate firebase.json on command. I would recommend creating a script, e.g. npm run deploy that first generates your firebase.json content and then runs firebase deploy. That way you can make sure it's always regenerated before deployment.
// configureFirebase.js
const fs = require('fs');
const config = {
hosting: {
// ...
}
}
fs.writeFileSync(__dirname + '/firebase.json', JSON.stringify(config));
// package.json
{
"scripts": {
"deploy": "node configureFirebase.js && firebase deploy"
}
}

Where to put secret keys in Netlify? [duplicate]

I'm trying to set an environment variable for an API key that I don't want in my code. My source javascript looks something like this :
.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)
I'm using webpack and the package dotenv-webpack https://www.npmjs.com/package/dotenv-webpack to set API_KEY in a gitignored .env file and it's all running fine on my local. I'd like to also be able to set that variable when deploying through Netlify, I've tried adding it through to GUI to the 'build environment variables', and also to set it directly in the build command, but without success.
Any idea what might be the issue ?
WARNING: If this is a secret key, you will not want to expose this environment variable value in any bundle that gets returned to the client. It should only be used by your build scripts to be used to create your content during build.
Issue
dotenv-webpack expects there to be a .env file to load in your variables during the webpack build of your bundle. When the repository is checked out by Netlify, the .env does not exist because for good reason it is in .gitignore.
Solution
Store your API_KEY in the Netlify build environment variables and build the .env using a script prior to running the build command.
scripts/create-env.js
const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)
Run the script as part of your build
node ./scripts/create-env.js && <your_existing_webpack_build_command>
Caveats & Recommendations
Do not use this method with a public facing repository [open] because any PR or branch deploy could create a simple script into your code to expose the API_KEY
The example script above is for simplicity so, make any script you use be able to error out with a code other than 0 so if the script fails the deploy will fail.
You can set Dotenv-webpack to load system environment variables as well as those you have declared in your .env file by doing the following:
plugins: [
new Dotenv({
systemvars: true
})
]
I.e Setting the systemvars attribute of your webpack dotenv plugin to true.
Note that system environment variables with the same name will overwrite those defined in your .env file.
Source: https://www.npmjs.com/package/dotenv-webpack#properties
if you go to corresponding site's settings in Netlify, under build&deploy you can find a section called environment variables you can easily add your environment variables from there. if you add MY_API_KEY variable to environment variables you will be able to access it inside your project via process.env.MY_API_KEY.
If you're using Nuxt JS there is a more "straight forward" approach.
Just edit the nuxt.config.js like so:
module.exports = {
env: {
GOOGLE_API_KEY: process.env.GOOGLE_API_KEY
},
// ...
Then add the GOOGLE_API_KEY to Netlify through the build environment variables as usual.
Credit goes to yann-linn and his answer on github.
What you can also do is also to define a global constant in Webpack. Netlify environment variables defined in UI will work with it. You don't need dotenv or dotenv-webpack.
webpack.config.js
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.DefinePlugin({
"process.env.API_KEY": JSON.stringify(process.env.API_KEY)
}),
]
}
However again, of course you shouldn't do it just inputting enviornmental variables in the frontend if your API key is confidential and project public. The API key will appear in the source code of the website and will be easily accessible for everyone visiting it. Lambda function would be a better option.
You can use the Netlify's config file also ...
You can find documentation here.
Also i wanted to have the same ENV variables with with different values per branch/environment.
This workaround worked for me:
Create a netlify.toml file like:
[build]
NUXT_ENV_BASE_API = "/api"
NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"
[context.branch-deploy]
environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }
[context.production]
environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }
And deploy in Netlify ...

Resources