Is there an easy way to do this? I've googled and none of the answers worked for me. I need to do this to enable a facebook login which only works through HTTPS. I've generated the SSL certificates however I don't know how to configure the server to enable HTTPS.
If you are using the new(er) vue-cli-service then you can run the development server as per https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve
Simply edit your package.json:
"scripts": {
"serve": "vue-cli-service serve --https",
...
}
I was trying to work out how to get Chrome on Android to successfully use the unsafely-treat-insecure-origin-as-secure flag, without any luck. At least this allows me to test my vue aplicat
The solution was instead of running the server with yarn serve, use yarn serve --https
Related
I want to try to React Native / Expo App on my company PC (Windows).
I was following all guides on Proxy setup and settings, but I'm still getting this error.
Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json) from the package "expo" installed in your project.
I've added proxies to .npmrc file, also tried changing URL Server by this command_
export EXPO_PACKAGER_PROXY_URL=http://expo.dev npx expo start
Tried to set up tunneling, but unsuccessfully.
Has anyone encountered similar problems and found solution to it.
Thanks in advance
I deal with this same issue at work. I have discovered a few work-arounds through trial and error.
use yarn to import expo modules. This seems to help with the dependency issues that expo imports often have.
set yarn config to yarn config set strict-ssl false -g if you are receiving SSL errors.
run this command - $Env:NODE_TLS_REJECT_UNAUTHORIZED=0 if you are receiving SELF_SIGNED_CERT_IN_CHAIN errors. <--this is not 100% safe because makes TLS connections and HTTPS requests insecure by disabling certificate verification -- use at your own risk.
The Unable to reach Expo servers... error still renders, but I can just ignore it and continue.
I am trying to run my cypress e2e tests in a Github CI on a Vue 2 SPA using CLI. Locally they work fine when running ./node_modules/.bin/vue-cli-service test:e2e. But navigation inside the testing framework with cy.visit(), e.g. to /login fails inside the CI pipeline with a 404 - requested path not found.
As I am aware, docs state:
Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.
When running the production build manually using npm serve it faces the same struggle. Vue-Routes navigation works as expected, but calling sub-routes fails with a 404. Production with a NginX reverse proxy works as expected.
So:
Why does the dev server work locally when Vue CLI is serving itself?
How to redirect all sub-route requests to index.html for the cypress e2e tests?
Edit: Weird thing is. Running serve ./dist with the silent flag -s fixes the redirection problems completely. Doesn't make sense to me.
Is there a difference between nuxt start + nuxt preview?
And is it correct to start a server with an ssr nuxt app in production mode with:
npm run build (nuxt build)
npm run start (nuxt start) ?
For me, the docs are a little bit confusing, https://v3.nuxtjs.org/api/commands/preview/
"The preview command starts a server to preview your Nuxt application after running the build command."
There are mainly 4 things:
nuxt dev, purely for development purposes
nuxt build for SSR or nuxt generate for SSG
nuxt preview to get a preview locally of what would the final bundle look like
nuxt start what should be running on the actual production server
At the end, Nuxt's team made this simple for us by detecting the platform you're pushing your code too. But at the end, you could have nuxt ship or nuxt yoloooo doing the exact same thing, it all depends of your own preferences.
Most of the defaults are adapting or overriding some possible mistakes by analyzing what are your project's settings and reacting accordingly.
Depending on where you deploy your app, you can get various behaviors as explained in the doc: https://v3.nuxtjs.org/getting-started/deployment
If you want to deploy your app on Heroku (SSR), your nuxt start command will look something like this
"scripts": {
"build": "nuxt build",
"start": "node .output/server/index.mjs"
}
as shown here: https://nitro.unjs.io/deploy/providers/heroku
If you're publishing your code to some SSG platform, it will usually use a "lighter Nginx/Apache server" for free and do basically the same as serve for your static assets (with nuxt start).
The only thing NOT to do is to ship a nuxt dev on production.
I would like to try PWA with create react app version 4.0, i did manage to generate new project as below
npx create-react-app my-app --template cra-template-pwa-typescript
When i try to run npm start i don't see any service-worker.js registered in chrome browser but if i build and serve then it works fine. I would like to register service-worker.js in dev mode, so i followed this article Easy Workbox Integration with create-react-app I have removed the production environment check in serviceWorkerRegistration.ts but no luck.
serviceWorkerRegistration.ts
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
Please advise ?
The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.
from here: https://create-react-app.dev/docs/making-a-progressive-web-app/
I recently started react-native, after installing all dependencies i tried starting my project but when it starts i don"t seem to find the QR code scanner for me to scan with my device anywhere, instead it starts in the browser, it says
web Starting Webpack on port 19006 in development mode.
Expo Webpack █████████████████████████ building (40%) 194/196 modules 2 active
node_modules\invariant\browser.js
i ｢wds｣: Project is running at http://0.0.0.0:19006/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules#expo\webpack-config\web-default
i ｢wds｣: 404s will fallback to /
. I want expo to run on my device not the browser.
Try
Deleting all the metro packages from project_root/node_modules.
Run npm install in project_root.
Now run expo start again and it should work.
This seems to help in most cases
In your app.json you can set wich platforms you want, like this
"platforms": [
"android",
"ios"
]
The problem is :
When you use react-native-web, Metro uses webpack to pack your code to be
available for web.
Something is wrong with the installation (a bug maybe) so metro
cannot pack for running the code on a simulator or on a device.
The simptom is you cannot see the QR Code when npm start wright ?
The Solution : Customize webpack https://docs.expo.io/guides/customizing-webpack/
This procedure creates the file webpack.config.js on the roor directory of your project.
Running the expo customize:web will create webpack.config.js
This action solves the problem. You will see the QR again and
will be able to run your app in a device, simulator and web.
I had this problem after installing some packages, and i did npm install and it worked