Commit graph

111 commits

Author SHA1 Message Date
9753cbe173 /api/assetImage fixes in production
Now that we're not on Vercel's AWS Lambda deployment, we can switch to something a bit more standard!

I also tweaked up our version of Playwright, because, hey, why not?

Getting the package list was a bit tricky, but we got there! Left a comment to explain where it's from.
2021-11-12 21:39:35 -08:00
9310a250d6 Fix some bugs running deploy-setup from scratch
As an exercise, I've wiped the box clean, and I'm reinstalling from the scripts! :3

I added the SSH hardening rules to the playbook instead of doing them by hand this time.

I made a mistake with creating `/srv/impress-2020`, right, you need to *say* what it should be created *as* for the creation step to work!

I also guess my recent pm2 changes made it not actually be willing to start the app anymore, because `/srv/impress-2020/current` doesn't exist or have `node_modules` yet. I'm doing a cute thing where I create a placeholder app during setup, so there's always something to run, without introducing the complexities of a real deploy to the setup process.

And right, of course, we need to install nginx before running certbot! But we need to add certbot config *after* running certbot!

And then just some misc cleanups for consistency and correctness!
2021-11-03 23:11:50 -07:00
d17263139e Fix pm2 monitoring
Okay huh, while digging a bit into another issue, I found what was wrong with our config and pm2's built-in monitoring! You can't use `yarn start`, because the wrapper script breaks its ability to look inside and see what's happening.

I also removed the compiler flag thing from the `start` script in `package.json`, because I think it's redundant? There's no compilation to be done in a live server.

I think I might remove monit after this? It's nice extra resilience in a sense, but it feels like extra complexity when it's doing the job `pm2` is supposed to do. (And tbh I've almost never heard of nginx crashing, and if it does it's probably a scenario worth investigating by hand.)
2021-11-03 16:46:35 -07:00
edd983c97a Refactor deploy to build locally, not remotely 2021-11-02 18:47:13 -07:00
dde8cee1e3 Add deploy playbook: pulls git and installs deps 2021-11-02 16:36:39 -07:00
537aeb4118 Ansible tasks to set up web user, install Node 2021-11-02 16:01:30 -07:00
a915bc4b49 Start of an Ansible playbook
Yep yep, we're getting deploy tasks set up! :3
2021-11-02 14:45:05 -07:00
36c32cdd70 Install Sharp for production
Oh neat, when trying `yarn build && yarn start` locally, I got a message about installing Sharp for better image optimization performance in production.

It mentions that this isn't relevant for Vercel, where it's auto-added. But it's good to get on it now anyway!
2021-11-02 01:00:52 -07:00
589c48beda [WIP] Fix eslint for Next.js
Tweaked some of the default Next.js rules, fixed lint-staged for `next lint`, made a few small easy lint fixes. Feels good!

Note that using the `dirs` option in `next.config.js` was causing `lint-staged` to lint _everything_. That's why I edited `yarn lint` to specify the dirs instead: that way, that command will lint all those dirs, but they won't get included in invocations with `--file`.

There are still a few lint errors left after this commit, because our <img> tags aren't working (@next/next/no-img-element). I'll fix those when we figure out what's wrong with images!
2021-11-01 22:07:46 -07:00
567e333f9e [WIP] Run cra-to-next codemod to be on Nextjs
I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable.

I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822

The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next!

Note that this commit was forced through despite failing lint checks. We'll need to fix that up too!

Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
2021-11-01 21:49:23 -07:00
b6b99d899f Update @apollo/client
I was hoping this would fix a cache merge ambiguity, but nope :p but hey, good to be on latest!
2021-09-30 18:37:09 -07:00
dependabot[bot]
f5b159b808
Bump immer from 8.0.1 to 9.0.6
Bumps [immer](https://github.com/immerjs/immer) from 8.0.1 to 9.0.6.
- [Release notes](https://github.com/immerjs/immer/releases)
- [Commits](https://github.com/immerjs/immer/compare/v8.0.1...v9.0.6)

---
updated-dependencies:
- dependency-name: immer
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
2021-09-03 01:34:24 +00:00
adf70dc25f Use chrome-aws-lambda for assetImage
Okay cool, this one worked! We use this special Chrome package with AWS Lambda support, and then we use normal Playright in dev, and then we exclude `playwright` from the deployment (even though it got auto-detected by `require("playwright")`) to just barely sneak in under the 50MB limit for this function. Phew!

The preview deploys for this seem to be, actually working? So that's exciting!
2021-08-19 16:27:22 -07:00
a1243ad08f Merge branch 'main' of https://github.com/matchu/impress-2020 into main 2021-08-17 01:22:08 -07:00
9ec917e4d3 Use playwright-aws-lambda
So, just using normal playwright was crashing with this error: https://github.com/microsoft/playwright/issues/5862

I didn't understand why everyone was using playwright-core until I read the comments more carefully, and saw that it was because folks were using playwright-aws-lambda, because that's where Vercel functions run. (It has some special compat stuff.)

So I'm figuring that maybe the special case in Vercel's builder that fixes this for playwright-core maybe doesn't apply to normal playwright? But that people don't actually run into that issue in practice, because they're all using playwright-core for playwright-aws-lambda instead?

Idk, let's see how it goes! My hope is that this both fixes the immediate crasher about browsers.json being missing, _and_ fixes a problem we were _gonna_ have down the line about normal playwright not working in an AWS Lambda setting.
2021-08-17 01:01:09 -07:00
0cf97ef612 Try updating honeycomb-beeline?
In production we're suddenly getting errors in module wrapping in honeycomb-beeline. I wonder if it's like, an incompatibility with Vercel's version of Node?

Well, this new version seems to still be playing nice on dev, so hopefully that's all it is and this fixes it! I give it like a 35% chance lol :p
2021-08-07 23:13:52 -07:00
4e31a4bec7 /internal/assetImage can render movies
This is a new page, that I'm gonna use a headless browser to navigate to and screenshot the asset!
2021-07-02 14:36:08 -07:00
be3a162a8a Virtualize item list scrolling
This helps the render time by a lot!
2021-06-19 12:36:19 -07:00
70a31c794e Fix dependencies for prod
Hmm, prod builds weren't happy with how I specified the version here

…do prod builds not listen to the lockfile? Suspicious :p
2021-06-16 18:28:40 -07:00
75ceeba6e2 Bundle CreateJS, instead of loading async
So I finally started looking into the race condition that makes item previews sometimes fail to load, and as expected, it was that we were trying to load the movie before CreateJS had necessarily loaded. Usually the timing worked out, esp after a reload, but not under certain circumstances!

Anyway, I've been wanting for a while to just bundle them instead. That'll help us more eagerly load them when we need them, and not depend on external CDNs, and remove a bunch of loading state!

So yeah, I had to learn how the `easeljs` and `tweenjs` NPM packages did their bundling, and how to use `imports-loader` to let them just register straight onto `window`! But we got there and it's pretty nice tbh!
2021-06-16 18:00:25 -07:00
cf30b25be0 First draft of UserItemListPage
A lot is missing! No descriptions, no support for the "Not in a list" case, no scroll performance windowing, no editing!

But it's a start :3
2021-06-12 04:45:23 -07:00
8f83ac412c Add sharing meta tags to outfit pages
Meta tags are a bit tricky in apps built with `create-react-app`! While some bots like Google are able to render the full page when crawling, not all bots are. Most will just see the empty-ish index.html that would normally load up the application.

But we want outfit sharing to work! And be cool! And use our new outfit thumbnails!

In this change, we add a new server-side rendering API route to handle `/outfits/:id`.

It's very weak server-side rendering: it just loads index.html, and makes a few small tweaks inside the `<head>` tag. But it should be enough for sharing to work in clients that support the basics of Open Graph, which I think most major providers respect! (I know Twitter has their own tags, but it also respects the basics of OG, so let's see whether there's anything we end up _wanting_ to tweak or not!)
2021-05-14 19:51:48 -07:00
fddeeecbdb More eslint fixes
Oh oops, my no-unused-vars changes affected more than I realized! It caused builds to break.

I've now fixed it to pass on our existing codebase!
2021-05-13 18:11:44 -07:00
8c8e845dc5 Fix eslint for /api
Oops, I didn't notice this when bulk-fixing eslint stuff in src!
2021-05-13 01:13:21 -07:00
8da664227f Add a pre-commit lint hook
I've got it in my IDE too, but I want more safeguards lol, I'm tired of goofing up the pushes :p

I don't allow warnings here, but still have them as warnings not errors; because I don't want them to block build, but I _do_ want them to block commit.
2021-05-04 18:50:47 -07:00
a69bc8184a Upgrade Cypress
I was hoping it would fix a bug I'm having in a new test, and it didn't. But it didn't seem to break anything either so!
2021-05-04 16:07:00 -07:00
7d9e83a0c1 Switch console.log to a lint warning, not error
Didn't realize lint errors blocked compilation lol

I just want it to be annoyed enough at me to draw my attention back to it lol
2021-05-04 14:26:44 -07:00
03acbb9757 Add Cypress env to eslint 2021-05-04 12:33:13 -07:00
ec3aa1747d Lint against console.log
and replace `console.log` instances in the codebase with better alternatives!
2021-05-03 15:01:49 -07:00
ee0185a846 Upgrade Chakra to 1.6.0
Need this for an upcoming bug fix!
2021-04-30 12:48:03 -07:00
71215fe599 LRU caches to speed up outfit layer preload
The layer preloader already takes advantage of, and primes, the HTTP cache.

But we still do duplicate work, on every OutfitPreview render, to re-execute movie clip libraries, and create a movie clip to test for animations. The former is nontrivial cost, and the latter is often large cost. This can make even basic outfit changes slow, when there's no change to the movie clip layers and the player is paused!

Here, we add an LRU cache for movie clip libraries, and for the question of "is it animated?". This should speed up a number of places where we would reload the movie (including between toggling the item), and various changes that were triggering full movie clip rebuilds unnecessarily.

We _aren't_ solving here for the fact that toggling an animated item requires rebuilding the movie clip, which could conceivably be cached—but with some state management trickiness, because ideally it should be a separate clip for each context where it's being shown. Imo not yet worth the effort! (esp because I think users understand that toggling an animated item can be slow, whereas this was affecting _other_ actions way too much)
2021-04-16 20:16:56 -07:00
405e35a546 Basic outfit state Cypress tests 2021-04-16 04:27:19 -07:00
06ec0b0b52 Add disabled save UI 2021-03-29 19:46:21 -07:00
197c623426 delete-user.js script
I already had a script for this lying around, and adapted it a tiny bit to the repository!

Part of me thought about building it in as a support tool. I might've if:
- this CLI didn't already exist
- we already had tighter permissioning, this is pretty high stakes!!
2021-03-10 05:19:51 -08:00
281fdccb89 Upgrade Chakra, remove tooltip flicker workaround 2021-02-22 19:00:47 -08:00
d0e759d12a Oh, actually add TS_NODE_COMPILER to yarn start!
I wrote about this in the commit message, but forgot to do it!
2021-02-07 00:23:19 -08:00
1bb52e9f49 Use typescript-cached-transpile
I have this in the scripts, but the dev command is the big deal: it saves me ~2sec locally per GraphQL request :3

But the dev command requires an upstream change, I have a local fork working with it, but I'm gonna try to get a PR upstream!
2021-02-07 00:08:21 -08:00
c7b063313d Upgrade vercel package 2021-02-06 22:45:35 -08:00
957f345620 Fix tsconfig.json error
Oops, we had a trailing comma, I feel like this might be why some tools seemed to respect these settings and other tools didn't!

This change seems to enable us to remove our weird hacks that made `vercel dev` run…
2021-02-06 22:45:28 -08:00
c36fb38d42 Skip type checking in ts-node scripts 2021-02-06 22:44:34 -08:00
7997be3386 Install Cypress for e2e testing
It's my first time using it, but it feels great already, I'm excited!

Getting it set up in WSL OpenSUSE was a bit tricky, but we got there! Had to install a lot of deps, a font package, and add some basic config to ~/.bashrc.

This guide gave us most of it, but we had to do a couple other little things, too! None of them were too nasty though, just some Googling and trying things. https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress
2021-02-04 22:19:10 -08:00
1dda0d4edb Fix dev command for TS support
Gosh, I'm really down this rabbit hole, huh? :p Anyway, turns out the `vercel dev` command contains a _fork_ of ts-node that doesn't respect the `ts-node` override key in `tsconfig.json`. But it does respect the env var!

So I've now set up `yarn start` to invoke `vercel dev` with the new env, which in turn invokes `yarn dev` to start the create-react-app dev server. Whew! (Probably a better dev experience tbh.)
2021-02-02 22:25:54 -08:00
b58db4a629 Finally finish TS setup, build works!
`yarn build` was crashing on my `build-cached-data` script, because we were trying to run the Typescript file uncompiled!

Now, we run it with `ts-node`, which transparently compiles Typescript files before execution. Phew!

`react-scripts build` made some automated changes to `tsconfig.json` for compatibility with `create-react-app`, and I also added a `ts-node` section to override one of them so we can compile to CommonJS for `ts-node` script execution!
2021-02-02 21:38:57 -08:00
d3b9f72e67 Add stale-while-revalidate cache headers
Oh yay, I'm pleased with this! I hope it works out well!

stale-while-revalidate is an HTTP caching feature that gives us the ability to still serve relatively static content like item pages ASAP, while also making sure users generally see updates quickly.

The trick is that we declare a period of time where, you can still serve the data from the cache, but you should _then_ go re-fetch the latest data in the background for next time. This works on end users and on the CDN!

I've scanned the basic wardrobe and homepage stuff and brought them up-to-date, and gave particular attention to the item page, which I hope can be very very snappy now! :3

Note to self: Vercel says we can manually clear out a stale-while-revalidate resource by requesting it with `Pragma: no-cache`. I'm not sure it will listen to us for _fresh_ resources, though, so I'm not sure we can actually use that to flush things out in the way I had been hoping until writing this sentence lol :p
2021-02-02 19:07:48 -08:00
cbe519c59f Update to latest Chakra UI
I found a bug, and just wanted to make sure the latest version didn't have it! So hey, update time!
2021-02-02 16:00:49 -08:00
9ef73d5cd7 Upgrade @apollo/client to 3.3.7
So, I ran into some weird Apollo behavior, and was hoping it was a bug that the upgrade would fix. It didn't! But it seems to still run the site fine, so, okay, new version, neat!

Idly wondering if it's time to start adding some basic e2e tests, to validate updates like this...
2021-01-22 14:37:06 -08:00
dependabot[bot]
d9c89cef39
Bump immer from 6.0.8 to 8.0.1
Bumps [immer](https://github.com/immerjs/immer) from 6.0.8 to 8.0.1.
- [Release notes](https://github.com/immerjs/immer/releases)
- [Commits](https://github.com/immerjs/immer/compare/v6.0.8...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>
2021-01-21 07:31:25 +00:00
ffe411c0b1 Add Sentry error logging + privacy statement
My main reason for adding this now is that I'm getting some scattered reports of things not displaying correctly, and I want to start gathering some browser data on that...

I recently confirmed that animations work on iOS (at least one did!), which was going to be my guess of what was breaking...
2021-01-16 10:59:54 -08:00
8567f9d4b8 Try a grid-based view for item lists
I took out virtualization for now too, I wanna see how this non-Chakra UI version, with fewer nodes and no tooltips etc, performs on large lists in production.
2021-01-14 04:58:40 -08:00
4a352e04e0 simulate login with IMPRESS_LOG_IN_AS flag 2021-01-05 23:22:03 -08:00