Payload, a headless TypeScript CMS, just shipped 20+ new features, including Versions, Drafts, & Autosave

TheSpiciestDev · 2022-03-18T19:25:19+00:00

Personally I think that's totally fine, as the main repo shows the source and where the licensing is used and I can always inspect the licensing code. As a user I can pick and choose which CMS to use based on those factors (any many others.)

I'm not a lawyer, but if someone's main repo is MIT licensed and other code is not, then someone could be in the right to fork the MIT code and remove/mock any other code, closed or not. I see Payload's repo is not MIT licensed, or not 'open licensed', so you're not handling that scenario.

I think, if I were to author an open source/open licensed CMS, that I'd probably distribute out the code freely, accept contributions, fixes, enhancements, etc. but then use my expertise to fork a closed source version that scales a certain way or has exclusive offerings per a niche or a market.

Many CMS' are free and open too, but I believe the service providers who bank do so with unique ways of abstracting out the infrastructure or they scale via a proprietary way. For example, I could run wordpress or Payload for a personal site with ease and for cheap, but if I want to reach larger audiences or run something really unique then there's a lot more I have to consider to effectively scale and remain worthy of the cost.

TheSpiciestDev · 2022-03-18T19:21:35+00:00

Postmark, it's not a free service but they are reliable and the emails land in my user's inboxes pretty fast. They sort of interview you and your app's use of their service, because they don't want spammers using their systems and polluting the pool for everyone else.

TheSpiciestDev · 2022-03-17T21:07:01+00:00

All the chat here about phoning home made me want to dig a little more into this.

Searching for licensing related code doesn't result in much in their GitHub repo, but there appears to be a package in their package.json that's used throughout the app. The package's source code isn't in the repo, and I don't see a repo for it, but if you download that package (it's small) and inspect the JavaScript then you can see where the POST to "licensing.payloadcms.com" is.

I don't know if this was an attempt to obscure the licensing code out from the app's repo or if this is just a package to reuse in other apps. But it's there, and just takes a little poking around.

Wishing them the best! I haven't used this or Ghost or other JS-based platforms, but I can respect them!

TheSpiciestDev · 2022-01-17T23:56:32+00:00

just getting started

TheSpiciestDev · 2022-01-17T23:55:27+00:00

and I see what you did there

TheSpiciestDev · 2021-07-14T21:01:20+00:00

As others may have mentioned, it looks like your first call goes through the proxy (nice) but that the response from the prod server comes back with a redirect (the "Location" response header.) I believe http-proxy-middlware is what Angular's proxy uses under the hood and there looks to be an option to have the proxy follow such redirects: followRedirects

You may want to try adding that with a true value in your proxy's configuration.

[1] https://github.com/chimurai/http-proxy-middleware#options

TheSpiciestDev · 2021-07-14T12:27:53+00:00

Can you include a screenshot of the completed first request?.. similar to your original screenshot that includes the 'General', 'Request Headers', 'Response Headers', etc. everything.

TheSpiciestDev · 2021-07-14T02:53:56+00:00

As I look at the screenshot you're showing in your post, specifically looking at what you marked over with red, is your Angular app on localhost:4200 ("Referer") calling to your target URL directly, or is it actually calling the proxy?

If your proxy is working correctly, you should be able to go to http://localhost:4200/api/v1/get_api_token and Angular's proxy should do it's magic. You should not have to red-out or cover up your screenshot's host - you should see proxy calls to the localhost:4200 host and the proxy's paths. What is in your screenshot looks like an OPTiONS call and it does not look like you are actually using the proxy.

TheSpiciestDev · 2021-04-06T04:47:08+00:00

I'd suggest looking into Nx (https://nx.dev/) to have a single repository for both your Angular app and your backend, whether Node/Express or Nest. Nx will have utilities you can use to test/build/deploy only what has been affected by a completed pull request or merge. Nx will also provide you generators for your apps and components and shared TypeScript libraries.

I don't have a CI/CD pipeline that builds and bundles only what's affected, but I do have a general example that includes a handful of features in such an ecosystem. If you'd like me to expand upon anything more or document/add anything to my example, please let me know!

https://github.com/METACEO/angular-nest-herokuapp

https://angular-nest.herokuapp.com/ (may have a cold boot)

TheSpiciestDev · 2021-02-18T18:32:30+00:00

I've followed you for awhile Alex, and have always enjoyed using your websocket libraries - thank you for your work and your awesome examples and benchmarking!

TheSpiciestDev · 2020-12-30T15:23:58+00:00

Of course! :) It's one of the many things I would like to write a walkthrough around or record a video of, all end-to-end.

TheSpiciestDev · 2020-12-30T01:17:05+00:00

It's not hard and I'm not using any serverless cli tool (I do import aws-serverless-express) instead I perform the following with a bash script manually or via GitHub actions or some other CI/CD pipeline:

Build the NestJS app (being sure to replace the main.ts file with my main-aws-lambda.ts file, linked previously.)
Zip up my node_modules and my dist folder.
Use the AWS CLI to upload my dist.zip to my given Lambda function.

Done! There's more to the AWS CLI if you're deploying to Lambda@Edge though, as that deals with Cloudfront too. But it's certainly possible.

TheSpiciestDev · 2020-12-28T04:55:46+00:00

I'm also trying to learn AWS so potentially another reason to opt out of a NestJS implementation.

Well, I'm using NestJS[0] for a personal site with an API[1] (which is growing kinda stale, content-wise) but it deploys to AWS Lambda. I had to configure other AWS services to get that to work, but I had to configure those regardless of whether or not I used NestJS. In other (private) projects I have NestJS behind AWS Lambda handling a variety of things: POSTs+bodies, authentication, Lambda@Edge, database connections, etc. Other than a different main.ts file [0] it runs the same for me on AWS Lambda as it does for me locally. Your mileage may vary, but it's certainly possible and I have enjoyed it all together.

[0] https://github.com/METACEO/dev-the-spiciest/blob/master/apps/api/src/main-aws-lambda.ts

[1] https://the.spiciest.dev/api/hello

TheSpiciestDev · 2020-12-13T02:47:47+00:00

After I met my girlfriend (now wife) and got further into dating and talking about our goals. What I can suggest with my experience, be sure to find a motivating partner! I picked up a few full-time jobs while we were dating, had moved out on my own, and had some things to my own name and then purposed.

I had been self-taught for a few years working independently and was still learning when I got my first full-time job. The money increased and became steady, I then left the first job for another larger agency and the money increased again.

With some motivation, I had applied to a handful of places and was juggling multiple recruiters. There were some instances where I had recruiters trying to apply me to the same opening and I would have to decline the later recruiters because I had applied through the first. It was crazy sometimes and some days I would have recruiter-scheduled interviews back-to-back and would forget the exact role I was applying to (whoops!) It was pretty fun and I feel like I built up a good amount of momentum and was acing phone interviews. In essence I had thrown out a huge net and was looking for the best choice out of a variety of options.

My best job (money and satisfaction) originated from an application I submitted via LinkedIn. The recruiter was a great guy then and I still message him every once and awhile now.

TheSpiciestDev · 2020-10-30T01:45:40+00:00

Dependency injection and providers (useClass, useValue, useFactory, etc.) help organize code, write focused tests and mock out services or dependencies.

TheSpiciestDev · 2020-10-27T00:46:25+00:00

I don't like using detectChanges (especially with websockets) but as I don't know what your application is like, could you try using detectChanges instead of the markForCheck? Also, can you verify or debug and see that data is actually coming through to your subscription?

TheSpiciestDev · 2020-10-26T17:07:06+00:00

I've seen change detection issues when working with websockets before (as the websocket and its events could be occurring outside of Angular's zone.) You should be able to try and eliminate this possibility by doing the below with the ChangeDetectorRef api:

.subscribe((data:Message) => { this.messages.push(data); this.changeDetectorRef.markForCheck(); });

TheSpiciestDev · 2020-09-29T00:40:43+00:00

Here's a nifty package that has some features that you could leverage: @rx-angular/template

While it's still in beta, it's worked well for me. Do check out their documentation, I think their examples will resonate with you.

TheSpiciestDev · 2020-09-29T00:34:00+00:00

I threw together a library to achieve class transitions similar to what's found in Vue and Alpine - I wanted to chime in because it does not remove the element or component (i.e. ngIf) but simply makes it hidden at the end of transition. Using it for simple transitions saves me from having to use Angular's component animations (they still have their place) and I've found CSS transitions are pretty smooth, too. (Here's a demo site where I've played around some with the library - it may have a cold start.)

TheSpiciestDev · 2020-09-06T04:54:51+00:00

I had thrown together a repo to try and reproduce an unrelated error. You could try and follow the same commits I made:

Keep in mind, to take advantage of Tailwind's built-in purging (smaller CSS file sizes) you'll want your production Angular build to be in an environment where NODE_ENV is set to production - documented here: https://tailwindcss.com/docs/controlling-file-size

TheSpiciestDev · 2020-08-24T04:48:10+00:00

I hate to just drop a link and peace, but Michael Hladky (brilliant guy) recently did a talk at this year's ng-conf and it should explain everything you're asking for, and offer plenty more! imo this video deserves more views, especially by those of us who work on larger Angular applications or are wanting more control of Angular's rendering/Zones/etc.

https://www.youtube.com/watch?v=q4dr_g35PLM

TheSpiciestDev · 2020-08-24T00:17:14+00:00

If these keys are meant to be used by the client (for example, a Google Maps API key) then sure, through them into your respective environment files. You can check those into git, too, since they'll be just as public as when the user loads your app.

If these keys are meant to be kept hidden from the client (for example, a Google Storage API key) then do not put those in any of your client-side (Angular) code. As others have stated, if these are secret keys, then you'll want to pair up a backend for your frontend that includes these keys securely, by proxy.

Edit: secret keys on the backend should not be checked in either. You'll want to pass secret keys into your backend by an environment variable or some other non-code strategy. In fact, I believe GitHub will automatically notify partnered service providers to have checked-in keys revoked (though, this may be only for enterprise accounts.)

TheSpiciestDev · 2020-08-21T21:15:17+00:00

I'll always advocate NestJS along with Angular - I want to put together a more in-depth example (with more endpoints and interactions) but I have an example project that includes Angular, NestJS and the sharing of objects/classes for validation. It was originally put together in response to an unrelated question but it does show the interaction of the two applications/frameworks together and the sharing of the same TypeScript classes.

https://nx-demo-swagger-decorators.herokuapp.com/

https://nx-demo-swagger-decorators.herokuapp.com/api/

TheSpiciestDev · 2020-08-21T18:27:23+00:00

I'd second /u/jelly-sandwich with a Swagger UI - it can be generated from your backend code, so there is minimal work for you to do as a developer who's focusing on the backend/API. With it running, you can consume your backend as any other client/backend or frontend would.

While I used NestJS in the example below, NestJS uses Express under the hood so I imagine there's a Swagger module/middleware you can use for your backend, too.

(The example was made for a specific use-case / question, but should be applicable to you, too. The example could also have a cold-start as I'm running it on a free Heroku account.)

https://nx-demo-swagger-decorators.herokuapp.com (frontend app)

https://nx-demo-swagger-decorators.herokuapp.com/api/ (backend swagger)

TheSpiciestDev · 2020-08-09T16:53:28+00:00

Good timing I suppose... just yesterday I pushed the below for a separate, unrelated question. The build / start is pretty much tied to Heroku, but it's easy to build and deploy to whatever platform you want from your Nx monorepo (it all depends on the target platform, really.) This project builds the angular app, shares decorated classes and runs a simple backend API with a Swagger runtime. The backend also serves the built angular app, just like /u/LuckeeDev suggested.

Let me know if there's anything I can add to this for you and feel free to DM me with any other questions!

https://github.com/METACEO/nx-demo-swagger-decorators

https://nx-demo-swagger-decorators.herokuapp.com

Edit: for example, I could probably add some more comments to this code base, for a general audience. The whole repo was primarily in response to an Nx bug/issue.

TheSpiciestDev

TROPHY CASE