I came across this weird issue on a create react app being deployed on vercel.
I was looking for my env vars in my production bundle (some of them were listed as "secrets" on an old project and I couldn't see the values of them on vercel dashboard - yes, I am aware there are no secrets in a SPA so I went looking for them in the source) and I noticed that all the env vars are present 11 times in the bundle.
This seems rather wasteful. Has anybody ever experienced this?
Using vercel and react-app-rewired, but it doesn't have any special config.
Related
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
I am unable to see the navigator.virtualKeyboard API present in create-react-app production build, but it is present in local development. What settings do I need to tweak to enable it in production build?
Please head to:
https://w3c.github.io/virtual-keyboard/
I´m not a React User, but I think that´s not your problem here, but this:
maybe your dev/prod systems have different setup.
I am currently working on a project that is in SPA mode of Nuxt and I want to add a package called nuxt-password-protect. This is for security reasons when opening any environment such as dev and staging. I want to provide a password for every access to my staging or dev links. But I am quite confused if it is really necessary to change the mode to SSR/universal? I already changed my mode and it seems working when I also installed the package. Can someone expound some knowledge with this? I am new to nuxt and Vue.
I am heading toward my first Nuxt deployment, of a large internal application. And I’d like to support IE 11, at least for a while. But when I generate the deployment files and attempt to access a staging site with IE, I immediately receive a syntax error from one of the generated js files.
Here’s a start at specifics:
Vue 2.6.12
Nuxt 2.14.6
Vuetify 2.3.2
Nuxt plugins for axios, auth, and a few other plugins.
The application is deployed to IIS, using nuxt generate and copying the dist directory to the server. I have tried using the generate command with and without the modern -m flag. There is no possibility of deploying other than through IIS (client specification), and I’d prefer not to have to run Node there, since the static deployment should work.
I am developing on a Mac and thus have no practical way to run and access the dev version by IE.
The application works properly on modern browsers, but throws an immediate syntax error in IE.
My understanding was that an IE-compatible version would be transpiled during the generate process, but evidently I’ve missed something.
As I say, this is my first Vue/Nuxt deployment, so any advice would be appreciated. I’ll be happy to provide any further specifics.
Thanks in advance for any suggestions on what/how to troubleshoot this.
Please follow these steps
Check if the syntax error is caused due to any dependency. I ran into syntax error when using vue-calendar plugin. This plugin has problem with IE11
Try adding pollyfill.io into your application. Inside your nuxt.config.js try adding inside head
script: [{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' }]
If adding to nuxt.config.js doesn't work , try using the code into your app.html file
Right now I am building a project and using vuejs for the front end. When testing locally, creating a .env.developement and .env.production work fine when in different environments and will show variables correctly. My issue now comes when building in azure devops. I am pointing to the dist folder and this is, obviously, only providing production variables which makes sense.
Is there a way to pass in dev vs prod environment variables to vuejs to build against in a azure devops/vue project?
Seems like there is something "magical" about the way vue is injecting these files into the index.html file and I cant pinpoint how vue is deciding which env variables to use.
Seems to me a question not related with Azure DevOps Pipelines but with Vue compile process.
I don't know a thing about Vue, but if it works similarly to other javascript /typescript frameworks, you should specify the environment in your build tasks.
In my Angular projects I may create a npm task specifying which environment to choose (i.e. npm run build:prod or npm run build:pre). And then, in my Azure Pipelines run the right task depending on the environment I'm going to deploy (you may even store the output in different build artifacts depending on the environment, so you'll have all those artifacts available in your deployment pipeline).
Finally (just a recommendation) I would recommend you to review which values you store in your .env.production file, just to be sure that it's safe to store that file in a repository. If you have some sensitive information, I'd recommend you to use Pipeline Variables instead. Pipeline Variables may be keep hidden, available only for the DevOps Team.
Regards.