|
Plank Walker posted:What is the standard way to test a front end app hosted at https://localhost that needs to call a production API and get around CORS? All online resources point to "just disable cors" and I could allow access from any origin to my backend, but I'd rather not. Testing a frontend shouldn't involve the backend at all. Mock data on the frontend which matches what the backend is sending and you should be good. Testing relying on an outside system is kind of doomed to fail or at least be such a pain in the rear end that the return vs the level of effort isn't worth it.
|
#
?
Jun 9, 2021 15:20
|
|
|
|
| # ? May 19, 2024 06:58 |
|
|
You can allow localhost specifically in the CORS headers, or run Chrome with the --disable-web-security flag. Generally however it's a bad idea to test a dev front end with a live server. I'd look into cloning the production database on a dev environment if your backend infrastructure isn't too complex.
|
|
#
?
Jun 9, 2021 15:50
|
|
|
CORS is enforced by the client. If your API call is happening on the browser side, you can just install a "disable cors" extension of some sort, and not worry about it. You'll need the proper CORS headers when serving it in prod, because the user's browser will enforce it.
|
|
#
?
Jun 9, 2021 16:01
|
|
|
go play outside Skyler posted:Generally however it's a bad idea to test a dev front end with a live server. I'd look into cloning the production database on a dev environment if your backend infrastructure isn't too complex. Yeah that's how we did it at my old company. You couldn't even connect to prod as a developer (unless you had the golden credentials like I did, but I digress). Just install the full application suite locally, set up a local DB from a backup of dev/QA/prod and you're good to go.
|
|
#
?
Jun 9, 2021 16:09
|
|
|
Those are all reasonable takes and one should follow the advice, but sometimes you use an API as read only, and it's on an ancient stack, and these hacks help not waste time on spinning up a virtual Windows Server 2003 instance on your local machine.
|
|
#
?
Jun 9, 2021 18:00
|
|
|
HaB posted:If you're gonna do that list of classes for every button, then pluck it out and create a class in your css file using @apply with all those classes. That's my understanding of it too, and that sounds simple in theory. The more little sites I do, the more I'm using utility classes, and I might just hold my nose and dive in and embrace Tailwind fully. I really, really like writing CSS though, so I like the freedom to write my own classes if I don't want to make a button that's just a bunch of utility classes. I ended up swiping a bunch of utility classes from various frameworks for my own starter CSS file that I use on projects, things like "mb-0" for margin-bottom: 0 is quick and easy, but if I need more than like four classes I'm going to write a separate class for it - first to avoid utility class soup, and two to make it reusable and globally changeable without finding every instance of where those dozens of classes were used to style an li element or something. I'm stuck in Wordpress land unless I can convince an entire company to change the way they do things, so no reusable <Button /> components for me here. I'm teaching myself React/Gatsby in my spare time, which is a lot of fun. I'm catching onto React fine, but I'm a bit overwhelmed by the build, deploy, Github, graphql, etc. process. What does everyone suggest for contact forms? I was considering formspree.io, but I think Netlify has a free form service?
|
|
#
?
Jun 10, 2021 22:52
|
|
|
Plank Walker posted:What is the standard way to test a front end app hosted at https://localhost that needs to call a production API and get around CORS? All online resources point to "just disable cors" and I could allow access from any origin to my backend, but I'd rather not. I always just build a little proxy server and set the headers manually, which then sends the request to the real API on behalf of the client. Is this a good way? gently caress if I know, but it works.
|
|
#
?
Jun 14, 2021 00:15
|
|
|
Vincent Valentine posted:I always just build a little proxy server and set the headers manually, which then sends the request to the real API on behalf of the client. It's highly questionable to do this to access a production API the way OP wanted, but using a proxy on localhost is useful even when you're accessing a test environment API. For instance, if the API and the frontend are deployed on the same origin under normal circumstances, using a proxy is a good way to simulate that setup in development. If you're using webpack-dev-server, there's a highly configurable built-in proxy: https://sdk.gooddata.com/gooddata-ui/docs/4.1.1/ht_configure_webpack_proxy.html. It takes care of a lot of subtleties related to headers, cookies, paths, etc.
|
|
#
?
Jun 14, 2021 11:02
|
|
|
In Vue 2, I know I can make an input component using v-on:change="$emit('input', $event.target.value)", then I can use v-model. I also know that vee-validate is a thing. However when I try to use vee-validate on said custom input, nothing appears in it when I type! What am I doing wrong? Should I just write my own validator since it's for a custom input anyway?
|
|
#
?
Jun 15, 2021 14:29
|
|
|
I tried creating a react project like normal using npx, and after downloading it did the usual spiel of "there are a bunch of security issues. type in npm audit --fix" or something like that. That's happend a bunch in the past, but typically after doing the npm audit fix it took care of all issues so there were 0 left. Yesterday or the day before, the same thing happened and I tried npm audit fix and out of 80+ medium/high risk issues, 40 were left and they were all high risk. I'm the only programmer in my entire big company and don't have anyone senior or otherwise to ask. What exactly do I do here? Am I just supposed to wait it out till facebook fixes the vulnerabilities? Someone was saying that the packages in question aren't even being used by react.
|
|
#
?
Jun 16, 2021 01:53
|
|
|
UtahIsNotAState posted:I tried creating a react project like normal using npx, and after downloading it did the usual spiel of "there are a bunch of security issues. type in npm audit --fix" or something like that. That's happend a bunch in the past, but typically after doing the npm audit fix it took care of all issues so there were 0 left. Yesterday or the day before, the same thing happened and I tried npm audit fix and out of 80+ medium/high risk issues, 40 were left and they were all high risk. I'm the only programmer in my entire big company and don't have anyone senior or otherwise to ask. Same thing happened to me when I installed Gatsby last week. I hadn't really touched npm or React in months. I updated npm and other stuff that I wish I could help you by remembering the names of but I'm too inexperienced. Either way, it worked. I think it ended up with three warnings, but no big red errors.
|
|
#
?
Jun 16, 2021 02:16
|
|
|
LifeLynx posted:Same thing happened to me when I installed Gatsby last week. I hadn't really touched npm or React in months. I updated npm and other stuff that I wish I could help you by remembering the names of but I'm too inexperienced. Either way, it worked. I think it ended up with three warnings, but no big red errors. It wouldn't have happened last week. It literally started a day or two ago. Try creating a react app with just npx now(not npm, you have to do "npx create-react-app app-name". It'll have the security issues that can't be fixed. Their github issues has a few posts about it. https://github.com/facebook/create-react-app/issues/11109
|
|
#
?
Jun 16, 2021 02:26
|
|
|
Sorry for double posting, but I wanted to update if anyone else runs into this problem. Since CRA has the security issues, the only other option was to create my own boilerplate. If anyone remembers how things were before CRA came out, setting up a react project was a pretty involved process. Thankfully, that's no longer the case. It's actually pretty simple and I think i'll be doing that instead of using CRA from now on. Here is an example of a tutorial I found: https://lhuria94.github.io/creating-own-react-boilerplate/ Anyway, I go through the process of setting it up like that tutorial and run into some problems. webpack-dev-server has a security vulnerability too! I got around it through the github issues: https://github.com/webpack/webpack-dev-server/issues/3444 When you are going through setting up your package.json you may run into some issue with setting a development or production mode. When you try launching it'll show. Just add --mode development or --mode production to start and build in scripts property in package.json It's absolutely insane how many security vulnerabilities there were in such important tools.
|
|
#
?
Jun 17, 2021 16:06
|
|
|
New job uses react. I’ve only done react on my own projects and i use next.js lately too. This is a lot different from how i develop projects though, it looks like stuff ive heard people complain about in regards to react. Components that contain no view, i got chastised for writing a hook for analytics and instead was told to rewrite it as a provider for global state. It seems absurd to me to architect something this way. Maybe ive been doing it wrong the whole time previously?
|
|
#
?
Jun 18, 2021 14:42
|
|
|
barkbell posted:New job uses react. I’ve only done react on my own projects and i use next.js lately too. This is a lot different from how i develop projects though, it looks like stuff ive heard people complain about in regards to react. Components that contain no view, i got chastised for writing a hook for analytics and instead was told to rewrite it as a provider for global state. It seems absurd to me to architect something this way. Maybe ive been doing it wrong the whole time previously? Sounds like classic people-trying-to-use-react-like-they-use-everything-else
|
|
#
?
Jun 18, 2021 14:57
|
|
|
barkbell posted:New job uses react. I’ve only done react on my own projects and i use next.js lately too. This is a lot different from how i develop projects though, it looks like stuff ive heard people complain about in regards to react. Components that contain no view, i got chastised for writing a hook for analytics and instead was told to rewrite it as a provider for global state. It seems absurd to me to architect something this way. Maybe ive been doing it wrong the whole time previously? You're talking analytics like "google analytics" right, just reporting back info on what page user actually viewed in the app? That makes perfect sense as a hook because you can just call the analytics api as the path changes, not sure why you'd use provider for global state for that.
|
|
#
?
Jun 18, 2021 15:14
|
|
|
barkbell posted:New job uses react. I’ve only done react on my own projects and i use next.js lately too. This is a lot different from how i develop projects though, it looks like stuff ive heard people complain about in regards to react. Components that contain no view, i got chastised for writing a hook for analytics and instead was told to rewrite it as a provider for global state. It seems absurd to me to architect something this way. Maybe ive been doing it wrong the whole time previously? You now know why so many people don't like "React".
|
|
#
?
Jun 18, 2021 15:20
|
|
|
barkbell posted:New job uses react. I’ve only done react on my own projects and i use next.js lately too. This is a lot different from how i develop projects though, it looks like stuff ive heard people complain about in regards to react. Components that contain no view, i got chastised for writing a hook for analytics and instead was told to rewrite it as a provider for global state. It seems absurd to me to architect something this way. Maybe ive been doing it wrong the whole time previously? Or, they have a lot more experience in that domain / their app than you and you should wait a bit before saying they are doing wrong. Components with no view can make complete sense in the right contexts. That said, they are probably doing it all wrong, because everybody does.
|
|
#
?
Jun 18, 2021 15:23
|
|
|
^ i was posting for my own sanity checkBruegels Fuckbooks posted:You're talking analytics like "google analytics" right, just reporting back info on what page user actually viewed in the app? That makes perfect sense as a hook because you can just call the analytics api as the path changes, not sure why you'd use provider for global state for that. Yeah Google Analytics, it would initialize the gtag scripts and tracked page views by listening to route changes from react router. Speaking of react router all the routes are contained in some top level routes component. My first PR after starting a couple months ago contained nested routes specific to the feature i developed and it surprised everyone that you could do that. its just full of weird decisions and dare i say antipatterns.
|
|
#
?
Jun 18, 2021 15:54
|
|
|
barkbell posted:^ i was posting for my own sanity check yeah global state provider over hook in that case seems unconventional, but maybe my thinking is too narrow. did he give a rationale at least for why not to use the hook (which is pretty much what everyone does)?
|
|
#
?
Jun 18, 2021 17:14
|
|
|
not really. it seems like they shove everything into global state: the routes, screen width, etc
|
|
#
?
Jun 18, 2021 19:08
|
|
|
barkbell posted:not really. it seems like they shove everything into global state: the routes, screen width, etc ahh i see, let's purposely make the site less modular and the components more difficult to reuse just because we can. what a great review comment, gently caress that guy.
|
|
#
?
Jun 18, 2021 19:47
|
|
|
Sounds like the analytics thing was done more out of personal preference than best practice, but there are pretty good use cases where you'd want the screen width or current route in a global state.
|
|
#
?
Jun 19, 2021 16:53
|
|
|
fsif posted:Sounds like the analytics thing was done more out of personal preference than best practice, but there are pretty good use cases where you'd want the screen width or current route in a global state. I mean, your URL and screen size are about as global as it gets. “The screen is only a size when this component is mounted, otherwise it is an infinitesimally small area” You could make a hook to access it, sure, but if you have a global state container anyway, having that live there seems fine.
|
|
#
?
Jun 21, 2021 01:42
|
|
|
UtahIsNotAState posted:I tried creating a react project like normal using npx, and after downloading it did the usual spiel of "there are a bunch of security issues. type in npm audit --fix" or something like that. That's happend a bunch in the past, but typically after doing the npm audit fix it took care of all issues so there were 0 left. Yesterday or the day before, the same thing happened and I tried npm audit fix and out of 80+ medium/high risk issues, 40 were left and they were all high risk. I'm the only programmer in my entire big company and don't have anyone senior or otherwise to ask. It's really stupid, but ignore those alerts. Most of the CVEs listed in those audit reports are for stuff like "potential DOS attack surface" in something that only runs in development on your machine. They're worse than useless. That said, the best way to keep your application secure is to keep your dependencies up to date, so stay on top of that (monthly-ish?) and you're doing alright. UtahIsNotAState posted:It's actually pretty simple and I think i'll be doing that instead of using CRA from now on. This is the way! Creat-react-app was a mistake.
|
|
#
?
Jun 21, 2021 15:24
|
|
|
Yes, we've had a lot of those tediously unexpoitable "vulnerabilities" in development code come up. We use better-npm-audit which allows us to maintain an exclusion list. Also, we set an automated check for a date a few months in the future, at which point the exclusions all revert. This means we don't just blindly ignore the exclusions forever, we actually check in on it now and then to see if they actually need renewing, or can be removed.
|
|
#
?
Jun 21, 2021 19:22
|
|
|
How does one go about testing the "files" key in package.json? Installing a package through Github SSH puts the entire repo in the node modules folder, so I'm trying to figure out a way to figure out I'm publishing the files I need to npm without actually having to publish
|
|
#
?
Jun 24, 2021 16:10
|
|
|
Grump posted:How does one go about testing the "files" key in package.json? Installing a package through Github SSH puts the entire repo in the node modules folder, so I'm trying to figure out a way to figure out I'm publishing the files I need to npm without actually having to publish Is npm publish --dry-run insufficient?
|
|
#
?
Jun 24, 2021 16:56
|
|
|
that's exactly what i want thank you!
|
|
#
?
Jun 24, 2021 17:38
|
|
|
sorry i have another question. looking for some opinions: say theoretically you're making an sdk and you want to include a sample app in the repo to test that the sdk works. Would creating a yarn workspaces with the sdk as 1 package and the sample app as another package be over-engineering the whole thing, or would you just have the sample app as a standalone directory that installs the sdk from NPM? I'd love to be able to just work on both in parallel and get hot reloading so yarn workspaces sounds enticing, but I don't see me adding any more packages to the monorepo any time soon teen phone cutie fucked around with this message at 18:50 on Jun 25, 2021 |
|
#
?
Jun 25, 2021 18:43
|
|
|
Chenghiz posted:
Monthly? We're just getting around to updating things after literal years so what we're updating to is still out of date. 
|
|
#
?
Jun 26, 2021 00:31
|
|
|
Grump posted:sorry i have another question. looking for some Put your SDK in the root directory. Nest your example project in a example/ subdirectory. Inside the example directory, include a package.json with a file dependency pointing at the parent directory: code:
|
|
#
?
Jun 26, 2021 01:21
|
|
|
fireraiser posted:I think lerna or yarn-workspaces is over-kill if all you want to do is include an example app. oooh cool nice didn't know you could do this. And if my example app is using webpack dev server, will it still hot reload this way if changes happen in the package.json dependency location? Do you have any examples where I could see an example of this setup?
|
|
#
?
Jun 26, 2021 01:31
|
|
|
Grump posted:And if my example app is using webpack dev server, will it still hot reload this way if changes happen in the package.json dependency location? If your SDK has a build step, you'll need to rebuild it in order for the example project to pick up the changes.
|
|
#
?
Jun 26, 2021 01:44
|
|
|
The Merkinman posted:Monthly? We're just getting around to updating things after literal years so what we're updating to is still out of date. I know that feel bruh. The project I'm on at work is on Ember 0.9 beta, if you can believe that. A version so old, documentation for it doesn't exist anymore. No upgrade path to 3.0 or whatever the current version is as far as anyone knows. We have this issue as a dev shop on the whole, but it's something each team is trying to slowly remedy. Thankfully I personally don't have to mess with Ember much as I am tasked with slowly converting things over to Vue. So far we have learned: don't try and make Ember and Vue interact with each other. If you can do an ember page that's JUST an iframe with Vue in it - perfect. Anything that requires more complex interoperability will be a gigantic pain in the rear end.
|
|
#
?
Jun 26, 2021 14:29
|
|
|
Please recommend me something better than Cypress. A couple years ago I had to use Selenium and it was the worst thing ever, but Cypress is not much better. I can't believe the docs still talk about adding a polyfill for promises in 2021.
|
|
#
?
Jun 28, 2021 07:06
|
|
|
M31 posted:Please recommend me something better than Cypress. A couple years ago I had to use Selenium and it was the worst thing ever, but Cypress is not much better. I can't believe the docs still talk about adding a polyfill for promises in 2021. Cypress is kind of as good as it gets, bud.
|
|
#
?
Jun 29, 2021 09:22
|
|
|
Yup. Sorry.
|
|
#
?
Jun 29, 2021 11:31
|
|
|
Would you guys consider it bad practice to import/export closure functions? Something like this where I want to set up an interceptor for HTTP requests to use an access token on the header of every request: JavaScript code:JavaScript code:JavaScript code:JavaScript code:
|
|
#
?
Jun 29, 2021 18:28
|
|
|
|
| # ? May 19, 2024 06:58 |
|
|
Grump posted:Would you guys consider it bad practice to import/export closure functions? If you're only initializing it once, you probably don't need a closure, nor your init.js, and can just leave interceptor as a local variable in module scope and export setNewToken directly. Since you mentioned intercepting HTTP requests, are you using any http framework, like express/koa/hapi/fastify/etc? Those have their own established patterns for adding middleware to an HTTP server.
|
|
#
?
Jun 30, 2021 01:16
|
|