In my laravel 8 vuejs 2.6 I have a js file /resources/js/common.js with OAuth client ID:
import Vue from "vue";
import axios from "axios";
import $ from "jquery";
import { initFbsdk } from "./fb.js";
import { LoaderPlugin } from "vue-google-login";
import "../../public/frontassets/js/mmenu.min.js";
Vue.use(LoaderPlugin, {
client_id:
"NNNNNNN-NNNN.apps.googleusercontent.com"
});
As this OAuth client ID must be different on my local OS and DEV/LIVE server I wonder if there is a way
to read this from laravel's .env file, which is different on any OS?
This /resources/js/common.js is not included in webpack.mix.js file.
Thanks!
Since you're using Laravel, I'll assume you build your Javascript using Mix.
Mix supports reading vales from the .env, as long as you prefix them with MIX_.
For more Information, see the Laravel documentation: https://laravel.com/docs/8.x/mix#environment-variables
If you don't want to prefix your variables with MIX_ there is a webpack plugin which allows you to read the full .env file:
https://github.com/mrsteele/dotenv-webpack
There is also a section on how to include custom webpack configs in the documentation:
https://laravel.com/docs/8.x/mix#custom-webpack-configuration
Related
I currently have firebase and my javascript files, which use firebase loaded through <script>. Clearly, this is not a very good way of doing it.
I want to be able to use webpack with my front end javascript, but I'm facing some issues:
My layout is like this:
user/
index.js
file1.js
file2.js
file1.js and file2.jsare included into index.js but all files use firebase.
My question is do I need to include firebase, and all of my requirements, like firestore, functions and messaging. into every single file, or can I include it once somewhere, to be used throughout all files?
When I include it in every file, I get an error saying that firebase could not be found.
Thanks in advance.
Check out the Firebase package on npm. In the instructions for using webpack, you can simply import the modules you need into file1.js and file2.js.
import * as firebase from 'firebase';
var app = firebase.initializeApp({ ... });
Note that the documentation says to only include the features you need (to not bloat your bundle.js).
// This import loads the firebase namespace along with all its type information.
import * as firebase from 'firebase/app';
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
// In your case, include Firestore in the files you use them in.
import 'firebase/firestore';
I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
I'm trying to import js library to use it in a Vue component.
From CDNs all js imports are working. But i can't use CDN for production.
if i use the way to import it globally i can see that my js file is replaced with html content... i guess it is because of a bad webpack config.
I also used the require('') way directly in my component but no success.
the only JS that is imported is app.js, but i can't find any config file that is calling this js or any webpack config that tells to merge js files in it...
i have a vue.config.js file like this i can't find any other config file for webpack in my project
module.exports = {
// proxy API requests to Valet during development
devServer: {
//proxy: 'http://api.mtm'
},
indexPath: 'public/index.html',
}
to import js file i've tried like this directly in my Vue component just after the export default {..
require('../../public/timer.js');
the error i have looks like that : TypeError: t is undefined
Whenever I rename a local file in VSCode, it re-writes the javascript import of external libraries to be typescript imports for a load of files.
I go from
import localFn from './localFile';
import angular from 'angular';
import { fooBar } from 'misc-package';
to
import localfn from './myLovelyLocalFile';
import angular from '../../../../../.cache/typescript/2.9/node_modules/angular';
import { fooBar } from '../../../../../.cache/typescript/2.9/node_modules/misc-package';
And this is across all package that contain angular, misc-package and anything else it thinks it has in typescript.
Is there a way to prevent this?
It looks like this is an issue 1, 2 on the VSCode github repo.
Add this to your settings in Vs code :
"javascript.updateImportsOnFileMove.enabled": "never",
I am working on an addon for Ember but I can't find the right way to import the config file.
I currently import the config file that way, from my service:
import ENV from '../config/environment';
I am testing the addon from the dummy/app folder, but when I try to use my service, I get the following error:
Uncaught Error: Could not find module
ember-my-addon/config/environment imported from
ember-my-addon/services/my-service
It should grab the config file from the dummy/app/config/environment.js, or the config file of the app that installed the addon.
What would be the best practice to import this file?
You can use the addon ember-get-config
Alternatively, you can use the solution posted here:
http://discuss.emberjs.com/t/best-practices-accessing-app-config-from-addon-code/7006/19?u=gaurav0