I have a Nuxt site hosted in Amplify which displays the following AccessDenied page for certain routes:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>TCHGPECCM8WBEHSM</RequestId>
<HostId>fc9Jmfxb4sc+T/e8bT2wIQ/W5fT5Li868ydiaU04rQ54AQHLGkh+Nx4cLKufjBczDeLBLrvEJwo=</HostId>
</Error>
A route where this occurs is the following: https://ryanachten.com/projects/echo/, but doesn't occur on other pages such as https://ryanachten.com/projects/whosagoodboy/.
For pages where it does occur, accessing the page by the projects index seems to work https://ryanachten.com/projects but then subsequent refreshes of the page result in the same issue.
The Terraform for the Amplify setup can be found here. Of specific relevance is the Amplify app resource declared as follows:
resource "aws_amplify_app" "ryanachten" {
name = "ryanachten"
repository = "https://github.com/ryanachten/site"
access_token = var.github_access_token
build_spec = <<-EOT
version: 0.1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run generate
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
EOT
}
Anyone have any idea why this is occurring?
A second look at the Nuxt generate output indicates what the issue is - only some of the projects are actually being discovered by the Nuxt crawler:
So the real issue is probably why these dynamic routes are not being discovered and outputted for SSG.
Once this is resolved, I'll make sure that the AccessDenied error is fixed by this change and mark this question as solved.
Update
As I suspected, this was caused by routes not being statically generated. Resolved this by ensuring the routes were generated at build time via declaring them in nuxt.config.js. The yaml being requested here already contained the list of routes in question.
generate: {
routes() {
// Crawler doesn't seem to pick up all the projects
// so we need to request them to be generated explicitly
const yamlFile = yaml.load(
fs.readFileSync(`./content/projects/index.yml`, 'utf8')
)
const projects = yamlFile.projects
return projects.map((p) => `/projects/${p.name.toLowerCase()}`)
},
},
Related
Overview
I've been trying to get datadog to work with my lambda functions. We're using serverless framework. Our main objective here is to send some custom metrics to datadog from our lambdas. To do this, we're using the Serverless plugin for datadog (serverless-plugin- datadog), along with datadog-lambda-js Library (Included references in the end). One last thing to include is, we are using webpack to build our services.
Issues and Errors:
Running the serverless-services locally works perfectly fine (we install datadog-lambda-js on dev dependencies). All our metrics are being sent to Datadog.
However when we push it to Lambda, We get errors from all services saying Error: Cannot find module 'datadog-lambda-js. We see this on the lambda logs.
We've used all steps and methods available to fix this, we also know webpack has some issues with datadog, but we've followed steps to handle this also (check this). Also, before deploying it to lambdas, we remove the datadog-lambda-js dependencies package.json, but still no luck.
I'll drop the code blocks below for reference. Please let me know if I've missed anything.
// serverless.yml
plugins:
- serverless-plugin-warmup
- serverless-webpack
- serverless-offline
- serverless-domain-manager
- serverless-step-functions
- serverless-plugin-resource-tagging
- serverless-dynamo-stream-plugin
- serverless-plugin-datadog
custom:
serviceName: <my-service>
datadog:
addExtension: true
addLayers: true
apiKey: <my-dd-key>
# flushMetricsToLogs: false
enabled: true
webpack:
webpackConfig: /webpack.config.js
includeModules: true
forceExclude:
- datadog-lambda-js
packagerOptions:
scripts:
- rm -rf node_modules/datadog-lambda-js
packager: npm
// file that sends distribution metrics
const { datadog, sendDistributionMetric, sendDistributionMetricWithDate } = require('datadog-lambda-js');
exports.hello = async function hello() {
console.log("Running metrics")
sendDistributionMetricWithDate(
<my-metric-name>, // Metric name
1,
new Date(Date.now()), // Metric value
"tag1:T1",
"tag2:T2", // Associated tags
);
console.log("Closing metrics")
return {
statusCode: 200,
body: "hello, dog!",
};
}
Apart from this, We have also excluded datadog-lambda-js from webpack : externals: [nodeExternals(), "datadog-lambda-js"]
Would appreciate any help on this.
References:
Sending Custom Metric
Using Datadog with Node.js Serverless application
Webpack changes to run DD library
You need to add the Datadog lambda layer to your lambda function. This should happen when you install the serverless framework plugin via serverless plugin install --name serverless-plugin-datadog.
Alternately, find the ARN from the docs, then add it to your lambda function. This blog post has more detailed instructions on adding a layer via the AWS console.
I've been experimenting with react three fiber and wanted to publish a project on github pages. I did a build of my project and deployed it on pages. I get an error in the console that it can not load my files:
main.bb26e057.js:1 Failed to load resource: the server responded with a status of 404 ()
Here is a link to the repository: https://github.com/olvard/repossumtory/tree/main/possumtory ,
Here is a link to the pages site: https://olvard.github.io/repossumtory/possumtory/build/
I've tried fiddleing with different filepaths but i don't understand why npm run build would give me incorrect filepaths anyways.
Would be grateful for any help.
Try providing the homepage property in the package.json of the React App.
In your case, https://olvard.github.io/repossumtory/possumtory/build/ is the start url.
So modify include this line in your package.json.
"homepage": "https://olvard.github.io/repossumtory/possumtory/build/",
Edit:
Adding to your comment: The model fails to load at the first attempt because of your model.js on the last line.
It should be useGLTF.preload('opossum.glb') instead of useGLTF.preload('/opossum.glb')
I would recommend using a package called gh-pages. It's a scripted way of uploading your site using the pages functions of GitHub and also supports custom configuration options on commit.
All you need to do is run:
npm install gh-pages --save-dev
Then create a new file. Inside this file simply insert this code:
var ghpages = require('gh-pages');
ghpages.publish('path-of-dir-to-commit', function(err) {
if(err) {
console.log(err);
} else {
console.log("success");
});
You can read more on the npm site for the configuration options such as naming the repo it generates if non is found, etc.
I have a site running Gatsby and Gatsby-Source-Drupal7, it is a plugin that uses Graphql to make an axios get request to https://stagingsupply.htm-mbs.com/restws_resource.json and uses the json data to query. I am able to run it just fine on my computer by going to localhost:8000 and it creates over 200k nodes, but when I try to deploy on any cloud service provider like Gatsby Cloud or Netlify it doesn't fetch any nodes or data at all from the site.
Warning from console
Starting to fetch data from Drupal
warn The gatsby-source-drupal7 plugin has generated no Gatsby nodes. Do you need
it?
Code
code from gatsby config
module.exports = {
siteMetadata: {
title: `new`,
siteUrl: `https://www.yourdomain.tld`,
},
plugins: [
{
resolve: `gatsby-source-drupal7`,
options: {
baseUrl: `https://stagingsupply.htm-mbs.com/`,
apiBase: `restws_resource.json`, // optional, defaults to `restws_resource.json`
},
},
]
}
gatsby-config.js from node_modules/gatsby-source-drupal7
const createNode = actions.createNode; // Default apiBase to `jsonapi`
apiBase = apiBase || `restws_resource.json`; // Fetch articles.
// console.time(`fetch Drupal data`)
console.log(`Starting to fetch data from Drupal`);
const data = yield axios.get(`${baseUrl}/${apiBase}`, {
auth: basicAuth
});
const allData = yield Promise.all(_.map(data.data.list,
Link to repo that works on local computer https://github.com/nicholastorr/gatsby-d7
any and all help will be appreciated
As you pointed out, you've played around with the Node versions using NODE_ENV and engines workarounds. My guess also relies on a mismatching Node version between environments but as Netlify docs suggests, there are only two ways of customizing Node versions to manage dependencies.
Set a NODE_VERSION environment variable.
Add a .node-version or .nvmrc file to the site’s base directory in your repository. This will also tell any other developer using the
repository which version of Node.js it depends on.
Without seeing your Netlify build command (to see the NODE_VERSION) there's no .node-version nor .nvmrc in your repository. I'd try creating it at the root of the project with the v14.17.1 in it and trying a fresh install.
In addition, double-check other server-related conflicts like IP-blocking, etc.
Error was nothing Gatsby or Node related, my site was block the IP of the server :>
I have a React/Node app which i am trying to host on AWS amplify. first try, my app deployed but i saw some pages are not loading due to lack of the environment variables.
i have added them to the AWS console before deploying and it did not work. then i did some search and i saw that i need to modify "amplify.yml" file to:
build:
commands:
- npm run build:$BUILD_ENV
but not only it did not work, also the app is not working anymore.
any ideas?
As this question specifically references React, here are the steps you need to use environment variables in your React based application in AWS Amplify.
In your client-side JS:
const BUILD_ENV = process.env.REACT_APP_BUILD_ENV || "any-default-local-build_env";
The key thing to note here is my pre-fix of REACT_APP_ which is covered the Create-React-App docs: here
Now, in your Amplify console, under App Settings > Environment variables:
Finally, you also need to add this reference under App Settings > Build Settings:
Note: "BUILD_ENV" can be any string you wish. Within the environment variables you can provide the necessary DEV / PROD overrides.
DO NOT store SECRET KEYS using this method, AWS provide a secrets manager for this. This method is for publishable keys, like connecting to Firebase or Stripe and the key is fine to be public.
The Amplify documentation on Environmental Variables has a section on "Accessing Environmental Variables".
Per that documentation, in your Amplify.yml (either in the console or by downloading it to the root of your project), you can use a command to push Amplify Environmental Variables into your .env. If you created an Environmental Variable in Amplify called "REACT_APP_TEST_VARIABLE" you would do...
build:
commands:
- echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
- npm run build
Once in your .env you can access them through process.env...
console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE)
If you are using Create React App, you already have dotenv, or see Adding an .env file to React Project for more info.
Obligatory reminder to add your .env to your .gitignore, and don't store anything in .env that is sensitive.
To get #leandro's answer working I had to wrap the AWS environment variable names in curly braces:
build:
commands:
- npm run build
- VARIABLE_NAME_1=${VARIABLE_NAME_1}
Probably better as a comment but I don't have enough points to post one.
#A Zarqam Hey man, I ran into this issue ans spent a decent amount of time on it. What worked for me was:
On my React code, use process.env.VARIABLE_NAME
On my webpack.config.js use the following plug-in:
new webpack.EnvironmentPlugin(['VARIABLE_NAME_1', 'VARIABLE_NAME_2'])
On the Amplify environment variables put the VARIABLE_NAME_1,etc and then the values, just like in the docs says.
Last on the build settings:
build:
commands:
- npm run build
- VARIABLE_NAME_1=$VARIABLE_NAME_1
(the one with $ is a reference to the one you put in amplify. Also I think you must have no spaces between the = symbol)
Then trigger a build, and cross your fingers.
Just to add to other comments regarding Secret keys, since SO doesn't let me comment until 50 rep... If you're not using those Env Variables in your front-end app such as process.env.<var_name>, and only use them during build time, you're fine. Those files will not be bundled into your front-end app.
I know this question is related to frontend apps but its title appeared in search engines for me even though I was looking for build variables only, so it might be useful for other people too.
An add on to #leandro's for anyone checking for this in the future I just want to simplify what you need to do since I was completely lost on this:
In your code reference all API keys as process.env.EXAMPLE_API_KEY_1
Run this in your root folder terminal npm install react-app-rewired --save-dev
Add config-overrides.js to the project root directory.(NOT ./src)
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
Set your variables in AWS Amplify with your key and variable, pretty self-explanatory.
In your build settings make it look something like this (I personally don't add npm build in here but you can if you need to.)
frontend:
phases:
build:
commands:
- EXAMPLE_API_KEY_1=${EXAMPLE_API_KEY_1}
- EXAMPLE_API_KEY_2=${EXAMPLE_API_KEY_2}
Start or restart your build.
I used #leandro's answer and mixed in an answer from this question to get it to work for me.
This worked for me to deploy React to Amplify
amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
in App.js
const client = new ApolloClient({
uri:
process.env.NODE_ENV !== 'production'
? 'http://localhost:1337/graphql'
: process.env.REACT_APP_ENDPOINT,
cache: new InMemoryCache(),
});
I am quite new to react React workbox. I am trying to make my Electron react App have the ability to cache all images and data to be made available while it is offline.
This is exactly what I am trying to accomplish as in this youtube video. from 14:00 to 21:00 minutes: Building PWAs with React and Workbox, /watch?v=Ok2r1M1jM_M
But this command is giving
"start-sw":"workbox injectManifest workbox-config.js && workbox copylibraries build/ && http-server build/ -c 0"
This error:
C:\Users\rajesh.ram\Desktop\Day\K\demok\client>npm run start-sw
> client#0.1.0 start-sw C:\Users\rajesh.ram\Desktop\Day\K\demok\client
> workbox injectManifest workbox-config.js && workbox copylibraries build/ && http-server build/ -c 0
Using configuration from C:\Users\rajesh.ram\Desktop\Day\K\demok\client\workbox-config.js.
Service worker generation failed:
Unable to find a place to inject the manifest. Please ensure that your service worker file contains the followin
g:/(const precacheManifest =)\[\](;)/
Please help me fix this or suggest alternative packages/repositories/videos to make it possible.
In newer workbox versions including 5.1.3 current at time of this post , the parameter which specifies the injectionPoint for the precacheManifest has changed from regex to string. The name of the parameter has also changed and as far as I can tell this is not backwards compatible...meaning it doesn't work to use the regex anymore.
module.exports = {
"globDirectory": "build/",
"globPatterns": [
"**/*.{json,ico,html,png,js,txt,css,svg}"
],
"swDest": "build/sw.js",
"swSrc": "src/sw.js",
"injectionPoint": "injectionPoint"
}
Changing that parameter as per above worked for me following the rest of the video.
Then several other updates affected how sw.js is written also...
importScripts("workbox-v5.1.3/workbox-sw.js");
workbox.setConfig({ modulePathPrefix: "workbox-v5.1.3/" });
const precacheManifest = [injectionPoint];
workbox.precaching.precacheAndRoute(precacheManifest);
You have to remove the .supressWarnings() command. It has been removed. A good video...needs some updates.
Link to the presentation github which needs an update so...
https://github.com/mikegeyser/building-pwas-with-react
Link to the manual: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build
#MegPhillips91
By changing the parameter of precacheAndRoute as below it worked for me
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
If you're following the video strictly, make sure that the custom sw.js file that you create in the src folder is exactly:
importScripts("workbox-v4.3.1/workbox-sw.js");
workbox.setConfig({ modulePathPrefix: "workbox-v4.3.1/" });
const precacheManifest = [];
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(preCacheManifest);
and workbox-config.js
module.exports = {
globDirectory: "build/",
globPatterns: ["**/*.{json,ico,html,png,js,txt,css}"],
swDest: "build/sw.js",
swSrc: "src/sw.js",
injectionPointRegexp: /(const precacheManifest = )\[\](;)/
};
make sure the workbox version matches the version you have in the video he uses 3.6.3 but now its 4.3.1.....hope this helps.