arabold / serverless-react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

235.0 235.0 87.0 3.22 MB

React web application running on AWS Lambda using the Serverless Framework

License: MIT License

JavaScript 51.72% CSS 3.40% TypeScript 44.87%

serverless-react-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

shayaun-nejad victorchanghk rguerra712 zebraflesh jcuffe eburin2 shalomtalker chillchill-seok adic26 denjpeters wernken-ng ipongrani matthausen hc1dcross tomspeed ddayporter aaronbalcerzak dhinojosac bobs-bits duckatgit abirlal-influxiq pomsense ericsunil malickrehman ganesankar codentacos m0ai psenger thomasbabuj revit08 igorjs kantharia chanm003 monichre venu-yara dappcenter shehanp12 itumor sebbestune makhlab dozr13 michaelvangelovski emortlock thomaskelm muaaztausif93 dilven daolaf abhim1509 aotdevops garethmcc bobbrez brandonktran iguzelofficial alanhobbart seongjinseo ghdmsrkd jeevakl manojdotwork alanc14 dav1nx1 manunoly davidwells baileywickham some-forks malikfaik dinamickadevelopment cwolfenberger michaelrivet jezd-axyl erikfortune franznoel thanhnx-rk richardyoungdev matthew-hogains nav-shah notchraiser michaelwong919 conveyorlabs codew47 aymensakouhi thebassplayer markovcode rohithdiya makavelli3145

serverless-react-boilerplate's Issues

Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I have an issue with cors access control allow origin error messages.

My understanding is that the cors headers need to be configured in the lambda headers, and I have done that as below in the handler.ts file:

headers: {
        "Content-Security-Policy": "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';",
        "Access-Control-Allow-Origin": "*", // Allow any origin to access the API
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Content-Type": "text/html",
      },

I set the most open CSP I could find to help rule out this as an issue.

Ive also attached a cors policy to the apig in case that was an issue, and that also has not helped:

ions:
  serve:
    # Any web request regardless of path or method will be handled by a single Lambda function
    handler: handler.serve
    events:
      - http:
          path: /
          method: any
          cors:
            origin: '*'
            headers:
              - Content-Type
              - Access-Control-Allow-Orign
            allowCredentials: true
      - http:
          path: /{any+}
          method: any
          cors:
            origin: '*'
            headers:
              - Content-Type
              - Access-Control-Allow-Orign
            allowCredentials: true

I have set the allow * against the buckets cors configuration:

DistBucket:
      Type: AWS::S3::Bucket
      DeletionPolicy: Delete
      Properties:
        CorsConfiguration:
          CorsRules:
            - AllowedHeaders:
                - "*"
              AllowedMethods:
                - "GET"
              AllowedOrigins:
                - "*"
                - Fn::Join:
                    - ""
                    - - https://
                      - Ref: ApiGatewayRestApi
                      - .execute-api.
                      - Ref: AWS::Region
                      - .amazonaws.com
              MaxAge: 3000

I have tried all kinds of configurations, but I seem to be missing something here, I cant see what. I am getting a handful of error messages on the browser console about Access-Control-Allow-Origin cors header missing.

However, if I curl the address I can see there is the header present. I dont get it?

curl -i https://my.monitoring.hamer.cloud/
HTTP/2 200 
content-type: text/html
content-length: 1956
date: Sat, 18 Feb 2023 04:06:50 GMT
x-amzn-requestid: 4283dc69-a91e-4e51-902e-b09fee0dd3ed
access-control-allow-origin: *
access-control-allow-headers: Content-Type
content-security-policy: default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';
x-amz-apigw-id: AhFCKEC_ywMFfjw=
access-control-allow-methods: GET, POST, PUT, DELETE
x-amzn-trace-id: Root=1-63f04eda-5f847a8175ea63257295e739
x-cache: Miss from cloudfront
via: 1.1 fd2442d18add87f1fea3351cec311828.cloudfront.net (CloudFront)
x-amz-cf-pop: SYD1-C1
x-amz-cf-id: XUTu_uCqYZ9caCszjnf1FBIkHNNIlG94mSaMzgQZ4jT4AomSBWmUbg==

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      <meta name="theme-color" content="#00FF00" />
      <title>Monitoring Service</title>
      <link rel="manifest" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/manifest.json" />
      <link rel="shortcut icon" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/favicon.ico" />
      <link rel="stylesheet" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/main.4a854c81.css" />
      <style id="jss-server-side"></style>
      <script id="config-server-side">
        window.__CONFIG__ = {"app":{"TITLE":"Monitoring Service","THEME_COLOR":"#00FF00","URL":"https://sy0udottn3.execute-api.ap-southeast-2.amazonaws.com/production","DIST_URL":"https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf","PUBLIC_URL":"https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf"}};
      </script>
    </head>
    <body>
      <div id="root"><div class="App"><header class="App-header"><h1 class="App-title">Welcome to <!-- -->Monitoring Service</h1></header><p class="App-intro">To get started, edit <code>src/App.tsx</code> and save to reload.</p></div></div>
      <script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/main.19ce0928.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/runtime.3553f038.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/vendor.ae97a551.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/components.bc92458d.js" crossorigin></script>
    </body>
  </html>

No static content deploying to a region other than us-east-1

This is a Bug Report

What went wrong?

When you initially clone the repository, then after running npm install, then npm run build:client, then run serverless deploy --region us-east-2 or any region other than us-east-1, the output API Gateway url for the lambda does not render any static content,, with an error (in chrome) that the CORS headers are missing.

What did you expect should have happened?

The same behavior for us-east-1 should have occurred, largely the static content should have been accessible.

What was the config you used?

The default configuration from a fresh clone.

Additional data

Serverless Framework version: 1.36.0
Operating System: Windows
Browser: Chrome

connect redux wrapper

i think there is some issue when im try to connect app with connect react-redux...

Deployment Error: Access Denied

I am following the guidelines at https://www.serverless.com/blog/react-js-on-aws-lambda. npx sls deploy command creates the Cloudformation stack successfully but the command returns Access Denied error.

(base) bcd07414e341:ServerlessReact mustafa$ npx sls deploy

Deploying serverless-react-boilerplate to stage dev (us-east-1)

> [email protected] build:browser
> webpack --config webpack.browser.config.js --mode production

assets by info 291 KiB [immutable]
  assets by chunk 4.87 KiB (name: main)
    asset main.f73cf1e4.js 4.38 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
    asset main.4a854c81.css 499 bytes [emitted] [immutable] (name: main) 1 related asset
  asset vendor.ae97a551.js 284 KiB [emitted] [immutable] [minimized] [big] (name: vendor) (id hint: vendor) 2 related assets
  asset runtime.3553f038.js 1.22 KiB [emitted] [immutable] [minimized] (name: runtime) 1 related asset
  asset components.bc92458d.js 424 bytes [emitted] [immutable] [minimized] (name: components) (id hint: components) 1 related asset
assets by path *.json 457 bytes
  asset manifest.json 286 bytes [emitted] [from: public/manifest.json] [copied]
  asset stats.json 171 bytes [emitted]
asset favicon.ico 3.78 KiB [emitted] [from: public/favicon.ico] [copied]
Entrypoint main [big] 291 KiB (488 KiB) = runtime.3553f038.js 1.22 KiB vendor.ae97a551.js 284 KiB components.bc92458d.js 424 bytes main.4a854c81.css 499 bytes main.f73cf1e4.js 4.38 KiB 5 auxiliary assets
orphan modules 9.06 KiB (javascript) 1.83 KiB (runtime) [orphan] 16 modules
runtime modules 3.02 KiB 5 modules
modules by path ./node_modules/core-js/ 503 KiB 479 modules
modules by path ./src/ 5.52 KiB (javascript) 452 bytes (css/mini-extract) 5 modules
modules by path ./node_modules/react/ 6.48 KiB
  ./node_modules/react/index.js 190 bytes [built] [code generated]
  ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/react-dom/ 119 KiB
  ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
  ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
modules by path ./node_modules/scheduler/ 4.91 KiB
  ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
  ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24.3 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.72.0 compiled successfully in 2921 ms
Environment: darwin, node 16.15.0, framework 3.14.0 (local), plugin 6.2.1, SDK 4.3.2
Credentials: Local, "default" profile
Docs:        docs.serverless.com
Support:     forum.serverless.com
Bugs:        github.com/serverless/serverless/issues

Error:
Access Denied

2 deprecations found: run 'serverless doctor' for more details

✖ Stack serverless-react-boilerplate-dev failed to deploy (145s)
Environment: darwin, node 16.15.0, framework 3.14.0 (local), plugin 6.2.1, SDK 4.3.2
Credentials: Local, "default" profile
Docs:        docs.serverless.com
Support:     forum.serverless.com
Bugs:        github.com/serverless/serverless/issues

Error:
Error: Command failed: npx sls s3deploy --stage dev
    at checkExecSyncError (node:child_process:828:11)
    at execSync (node:child_process:899:15)
    at /Users/mustafa/workspace/ServerlessReact/node_modules/cli-progress-footer/lib/private/cli-progress-footer/disable-props.js:86:41
    at handleSubProcessSync (/Users/mustafa/workspace/ServerlessReact/node_modules/cli-progress-footer/lib/private/cli-progress-footer/disable-props.js:32:15)
    at childProcess.execSync (/Users/mustafa/workspace/ServerlessReact/node_modules/cli-progress-footer/lib/private/cli-progress-footer/disable-props.js:85:11)
    at Scripts.execute (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless-plugin-scripts/lib/index.js:113:35)
    at Scripts.runHook (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless-plugin-scripts/lib/index.js:108:12)
    at PluginManager.runHooks (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless/lib/classes/plugin-manager.js:530:15)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async PluginManager.invoke (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless/lib/classes/plugin-manager.js:564:9)
    at async PluginManager.run (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless/lib/classes/plugin-manager.js:604:7)
    at async Serverless.run (/Users/mustafa/workspace/ServerlessReact/node_modules/serverless/lib/serverless.js:174:5)
    at async /Users/mustafa/workspace/ServerlessReact/node_modules/serverless/scripts/serverless.js:765:9

2 deprecations found: run 'serverless doctor' for more details

There is a broken link in the Readme

The plain javascript version link in the readme just links to the same repo. I'm guessing by plain JS we meant typescript free?
If you want me to send a pull request to remove the link I can, just wanted to to be sure such a resource doesn't/won't exist.

Thanks

Looking for the plain JavaScript version of this boilerplate?

how to apply tailwindcss?

I read your article and implemented the project.
It worked normally, but when I tried to apply tailwindcss, it didn't work properly.
May I know which one should I watch?

anyway thanks for your article and this project.
it is so good for me
thank you!

Module not found: Error: Can't resolve '../../dist/stats.json'

WARNING in ./src/server/render.tsx
@ ./src/server/render.tsx
@ ./handler.ts

Fails to render both on local host, also on aws.

CORS error in offline

When you npm start and run using serverless offline, there's a CORS error from the manifest.json. This is the same issue as #1, but it only applies to serverless offline.

The solution is apply the CORS headers to the webpack dev server. PR incoming.

FAIL: src/browser/App.test.tsx

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

  at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
  at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
  at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:157:18)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1180:18)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:563:23)
  at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:543:21)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:527:17)
  at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:343:23)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:308:23)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:263:21)

Suggested solution (by the error message) does not solve the error.

.

Would you be able to show an example/fork with routing?

I'm new to Serverless and also to serverside rendering

Everything I have tried to do to get a Router working is met with failure...

Does this prevent reuploading of files to S3 if they didn't change?

Or on every deployment the files would get reuploaded?

Where should I inject secrets?

Thank you for this boilerplate.
It got me going way faster that I had imagined.

My React site needs to do some API calls to our backend. I need an app-secret and an app-id for those calls. Where should I inject those secrets in order to keep them secret?

I tried to put them in the config object via environment variables, but this ends up being fully visible in the site source in the browser.

AWS Policy required to deploy the repo

Does anyone has the required aws policy needed to deploy this project when you run the

sls deploy

I have the following policies added but i am still getting an error

IAMFullAccess
AmazonS3FullAccess
AmazonAPIGatewayPushToCloudWatchLogs
AmazonEventBridgeFullAccess
AWSCloudFormationFullAccess
AWSLambda_FullAccess
CloudWatchFullAccess
CloudFrontFullAccess
AmazonAPIGatewayAdministrator

Error:

  An error occurred: myDistribution - Resource handler returned message: "Access denied for operation 'CloudFront cannot access the specified Amazon S3 bucket using the specified origin access identity. (Service: CloudFront, Status Code: 403, Request ID: ad102e5a-efe5-41df-a1e0-6f7ba24af4f9)'." (RequestToken: 6816893e-0c0c-484a-f469-04cc78ebc3c5, HandlerErrorCode: AccessDenied).

CORS Policy error

This is a Bug Report

What went wrong?

When you initially clone the repository, then after running npm install, then npm run build:client, then npm run deploy the deploy works just fine, however, on the page that is output, the following error can be found in the console:
Access to resource at '<s3url>/manifest.json' from origin '<lambda>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Which looks related to the configuration for the S3 Bucket.

What did you expect should have happened?

S3 should be configured for CORS.

What was the config you used?

The default configuration from a fresh clone.

Additional data

Serverless Framework version: 1.36.0
Operating System: Windows

arabold / serverless-react-boilerplate Goto Github PK

serverless-react-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

serverless-react-boilerplate's Issues

This is a Bug Report

What went wrong?

What did you expect should have happened?

What was the config you used?

Additional data

This is a Bug Report

What went wrong?

What did you expect should have happened?

What was the config you used?

Additional data

Recommend Projects

Recommend Topics

Recommend Org