dylanallen / noiiice Goto Github PK

View Code? Open in Web Editor NEW

45.0 6.0 7.0 2.53 MB

a serverless blog built on NuxtJS, AWS, serverless framework, and irrational exuberance.

Home Page: https://noiiice.com

License: MIT License

JavaScript 49.53% Vue 42.31% SCSS 8.16%

nuxt api-gateway aws aws-lambda vue javascript serverless serverless-framework cognito hacktoberfest-accepted

noiiice's Introduction

DylanAllen.net

This is my personal site, built with Next.JS, TypeScript, Firebase Authentication, FireStore DB, & Vercel.

Setup

Download and install

git clone https://github.com/DylanAllen/dylanallen.git
cd dylanallen
npm i

Setup a Firebase project and create a firebase.config.ts file (for authentication and comments)

firebase.config.ts

export const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  };

Setup a Firebase Service account and create a .env.local with the following info (this is for server side comment posting and approval):

project_id=...
private_key=-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n
client_email=...
ga_id=YOUR_GOOLE_ANALYTICS_ID

Run locally:

npm run dev

Deploy

Deploy it to the cloud with Vercel (Documentation).

Install the Vercel CLI if you don't already have it:

npm i -g vercel

Dev deployment:

vercel

Prod deployment:

vercel --prod

noiiice's People

Contributors

Stargazers

Watchers

Forkers

awslab univrs mgehl poeblu rpalmite ehemmerlin airpaio

noiiice's Issues

route53 CNAME for deployment to prod

Hi, maybe I'm missing something here about route53 or routing in general, but when running sls deploy --stage prod with a secrets.json similar to

"prod": {
    "region": "us-east-1",
    "blogCommentsDB": "NoiiceCommentsProd",
    "blogPostDB": "NoiiceBlogPostsProd",
    "userPool": "NoiiceBlogProd",
    "adminUser": "adminuser",
    "adminUserEmail": "[email protected]",
    "mediaBucket": "noiicemediaprod",
    "domain": "example.com",
    "certificateArn":"arn:aws:acm:us-east-1:randomnumber:certificate/randomguid",
    "restrictedStrings": "bad,words",
    "endpointType": "EDGE",
    "googleAnalyticsID": ""
    "certVerificationData": {
      "Name": "randomcertname.example.com.",
      "Type": "CNAME",
      "Value": "randomacmstuff.acm-validations.aws."
    },
    "sesTxtRecord": "randomTxtRecordstuff",
    "cloudFrontCNAME": {
      "Name": "example.com",
      "Type": "CNAME",
      "Value": "randomCloudFrontString.cloudfront.net"
    }
  }

Note that the cloudFrontCNAME was inserted during the deploy process, and the CNAME didn't seem to automatically deploy to Route53.

When trying to manually add the cloudFrontCNAME data to Route53 I will get an error message like

[RRSet of type CNAME with DNS name example.com. is not permitted at apex in zone example.com.]

How do we add this CNAME data with the "naked domain" so that users can simply navigate to "https://example.com" to visit the website?

Everything worked fine with --stage dev and a CNAME like dev.example.com

issue with files in static directory when app is built

When I build and deploy the app with sls deploy --stage prod, it seems that nothing from the static directory is bundled in the .nuxt directory.

For instance I have tried to include my own favicon.ico or even just a my-icon.png in the static/ directory and when I open the app in the browser it shows a 404 for that file when watching the network monitor. I've noticed this on noiiice.com as well (at least with Firefox) where noiiice-icon-trans.png returns a 404.
My nuxt.config.js looks like

link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: 'favicon.ico'
        // href: 'my-icon.png',
        //href: 'noiiice-icon-trans.png',
      },

The browser tab icon or favicon.ico works fine when I just run npm run dev.

Also, Chrome is showing sw.js has a failed status, so that file is not being included in the .nuxt bundle either, although the app seems to work fine without it.

Have you noticed these issues?

Running from a different region

Trying to follow the instructions step by step, while running sls deploy --stage dev, I get:

  Serverless Error ---------------------------------------
 
  An error occurred: ApiGatewayCustomDomain - Invalid certificate ARN: arn:aws:acm:eu-west-1:017316296168:certificate/cf936418-85df-47e8-beb7-338d4751eaad. Certificate must be in 'us-east-1'. (Service: AmazonApiGateway; Status Code: 400; Error Code: BadRequestException; Request ID: 2bd10173-fb7f-43c3-9b8a-f21f6dbc7cfe).

noiice-dev-nuxt fails to serve the app

I was trying a fresh deploy of noiiice from the latest master branch commit 41f2354, and the deployment seems to go through without any errors. However, trying to visit dev.domain.com I get a 502 error.

The Lambda function noiice-dev-nuxt logs the following error:

{
  "errorType": "Runtime.ImportModuleError",
  "errorMessage": "Error: Cannot find module 'serverless-http'\nRequire stack:\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
  "trace": [
    "Runtime.ImportModuleError: Error: Cannot find module 'serverless-http'",
    "Require stack:",
    "- /var/task/index.js",
    "- /var/runtime/UserFunction.js",
    "- /var/runtime/index.js",
    "    at _loadUserApp (/var/runtime/UserFunction.js:100:13)",
    "    at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)",
    "    at Object.<anonymous> (/var/runtime/index.js:43:30)",
    "    at Module._compile (internal/modules/cjs/loader.js:1137:30)",
    "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)",
    "    at Module.load (internal/modules/cjs/loader.js:985:32)",
    "    at Function.Module._load (internal/modules/cjs/loader.js:878:14)",
    "    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)",
    "    at internal/main/run_main_module.js:17:47"
  ]
}

When I inspect the Lambda Layer in this function, it only has the files package.json and package-lock.json. The deploy/build process does build the node_modules directory in layer/nodejs/ but it's not being uploaded in the Lambda Layer.

"sls deploy --stage dev" stops with a Type Error

I am struggling to get this blog framework up and running properly.

This appears that it may be an upstream issue, however I wanted to see if you have faced any similar problem running
sls deploy --stage dev

The CloudFormation stack is in a COMPLETE state, however my S3 media bucket ends up being empty. I have included the command output below that show a Type Error in the serverless framework. Have you faced this issue? I'm curious which versions of node and serverless you have this working on? I am trying this with

$ node -v
v10.16.3

$ sls -v
Framework Core: 1.53.0
Plugin: 3.1.0
SDK: 2.1.1
Components Core: 1.1.1
Components CLI: 1.2.3

...
Serverless: Pulling CF Outputs
Serverless: Checking for API key in Admin user attributes
Serverless: Creating Admin API Key

  Type Error ---------------------------------------------

  TypeError: that.sdk[service] is not a constructor
      at persistentRequest (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:287:28)
      at doCall (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:238:11)
      at BbPromise (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:261:16)
      at Promise._execute (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\debuggability.js:313:9)
      at Promise._resolveFromExecutor (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\promise.js:488:18)
      at new Promise (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\promise.js:79:10)
      at persistentRequest (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:236:7)
      at Object.request.requestQueue.add [as promiseGenerator] (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:283:7)
      at Queue._dequeue (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\promise-queue\lib\index.js:153:30)
      at C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\promise-queue\lib\index.js:109:18
      at Promise._execute (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\debuggability.js:313:9)
      at Promise._resolveFromExecutor (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\promise.js:488:18)
      at new Promise (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\bluebird\js\release\promise.js:79:10)
      at Queue.add (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\node_modules\promise-queue\lib\index.js:94:16)
      at AwsProvider.request (C:\Users\crobi\AppData\Roaming\npm\node_modules\serverless\lib\plugins\aws\provider\awsProvider.js:282:39)
      at module.exports (E:\airpa\noiiice\.serverless_plugins\noiiice-plugin\createAdminAPIKey.js:73:33)

     For debugging logs, run again after setting the "SLS_DEBUG=*" environment variable.

  Get Support --------------------------------------------
     Docs:          docs.serverless.com
     Bugs:          github.com/serverless/serverless/issues
     Issues:        forum.serverless.com

  Your Environment Information ---------------------------
     Operating System:          win32
     Node Version:              10.16.3
     Framework Version:         1.53.0
     Plugin Version:            3.1.0
     SDK Version:               2.1.1
     Components Core Version:   1.1.1
     Components CLI Version:    1.2.3

Request failed with status code 502 when creating a new post

Expected Behavior

As an admin I can create a new post to publish it on the blog.

Current Behavior

As an admin I get an "Uncaught (in promise) Error: Request failed with status code 502" in the console when I create a new post by filling out all the fields of the post form. In CloudWatch, the Lambda postActions fires a "ValidationException: One or more parameter values were invalid: An AttributeValue may not contain an empty string".

Possible Solution

The console shows that the only empty field is the created field :

"title":"My Post", "author":"ehemmerlin", "content":"TG***C4=", "status":"Published", "appclientid":"***", "created":"", "modified":"2019-10-11", "excerpt":"Lorem ipsum", "slug":"mypost", "featuredImage":"https://***.s3.amazonaws.com/full/file.png"

Steps to Reproduce

Install and deploy Noiiice to a REGIONAL endpoint with an external DNS
Login as an admin (after having updated the password) and click on "Create Post"
Upload a file by clicking on "Browse Files"
Fill out all the fields including a "featured image"
Select "Published" and click on "Publish Blog"

License for Noiiice

Hi Dylan, I just realized that you don't have a license for this project. Do you have any plans to include one?
https://choosealicense.com/no-permission/

Missing target domain name for non EDGE deployments not using Amazon Route 53

Expected Behavior

For non EDGE deployments the "Target Domain Name" should be written to the sercrets.json file if the domain is not hosted in Amazon Route 53, because in this case a CNAME record has to be added manually to the DNS records.

Current Behavior

At this time the "Target Domain Name" can be found in the AWS console under API Gateway > Custom Domain Names but is not present in secrets.json file. For EDGE deployments on the other hand a similar information is already written in this file.

Possible Solution

The target domain name for EDGE deployments and REGIONAL deployments return values in different keys.

Steps to Reproduce

Use a domain name not hosted in Amazon Route 53
Install and deploy noiiice like described in the README but in the eur stage (which is a REGIONAL endpoint)
At the end of Deploy the serverless stack the target domain name is not present in secrets.json file like expected

Cannot find module '../../secrets.json'

Interesting project! I found it on twitter a few days ago.
I'm trying to get it up and running on Windows 10.

When running the command
sls createCert --stage dev
I am getting an error...
Error: Cannot find module '../../secrets.json'

I did follow the instructions to rename example-secrets.json to secrets.json, and I am trying to run the sls createCert command in the noiiice directory. I also tried copying the secrets.json file 2 directories back, and it still gives the same error.

Any ideas?

Support for math typesetting

Would you be up for changing the Markdown parser to support math typesetting?

The current parser, markedjs, doesn't provide math typesetting out of the box, and I tried extending marked with this capability, but failed.

However, I did try changing the parser to markdown-it, and using one of markdown-it's third-party plugins, I was able to get some beautiful math typesetting seen in the image below. We still get the same style of Markdown and syntax highlighting with highlightjs that are currently available in Noiiice.

If you would find this valuable to Noiiice, then I can prepare a pull request for it.

Cannot run the app locally

Another issue I'm facing is that when running
npm run dev

nodejs always returns a Microsoft JScript compilation Syntax error. See logs below.

Note that I am running this against your cloned repo with no changes other than runnin npm install.
The only way I have been able to successfully run npm run dev is if I create a new Nuxt app and then move files from your repo into my newly created Nuxt app, but even in this case, the webpages do not properly render.

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\crobi\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: C:\Users\crobi\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\airpa\noiiice\node_modules\.bin;C:\Users\crobi\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\crobi\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;E:\msys64\mingw64\bin;E:\msys64\mingw32\bin;E:\mingw-w64\x86_64-7.3.0-posix-seh-rt_v5-rev0\mingw64\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.1\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.1\libnvvp;C:\Program Files\Microsoft MPI\Bin;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Git\cmd;E:\Go\bin;E:\Qt\Tools\mingw530_32\bin;C:\Program Files\CMake\bin;E:\opencv\build\install\x64\mingw\bin;E:\Tesseract-OCR;C:\Program Files\Glyph & Cog\XpdfReader-win64\xpdf-tools-win-4.00\bin64;C:\WINDOWS\System32\OpenSSH;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\PDFtk\bin;E:\Amazon\AWSCLI\bin;C:\Program Files\nodejs;C:\Users\crobi\AppData\Local\Microsoft\WindowsApps;C:\Users\crobi\Anaconda3;C:\Users\crobi\Anaconda3\Scripts;C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin;C:\Users\crobi\AppData\Local\Google\Cloud SDK\google-cloud-sdk\bin;E:\MongoDB\bin;C:\Users\crobi\AppData\Local\atom\bin;C:\Users\crobi\AppData\Local\Microsoft\WindowsApps;C:\Users\crobi\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
9 verbose lifecycle [email protected]~dev: CWD: E:\airpa\noiiice
10 silly lifecycle [email protected]~dev: Args: [ '/d /s /c', 'nuxt' ]
11 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: `nuxt`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\crobi\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\crobi\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\airpa\noiiice
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\crobi\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
18 verbose node v10.16.3
19 verbose npm  v6.11.3
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: `nuxt`
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

dylanallen / noiiice Goto Github PK

noiiice's Introduction

DylanAllen.net

Setup

Deploy

noiiice's People

Contributors

Stargazers

Watchers

Forkers

noiiice's Issues

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Recommend Projects

Recommend Topics

Recommend Org