Laravel mix with PHP helpers - javascript

In my homepage I have defined a section to forward variables to JS side in a way that I call PHP helper methods, for example:
<script>
var base_url = "{{ url('/') }}";
</script>
This works within blade template, however if I put that to a script and try to minify through Laravel mix, it just gets compressed as a string literal. How could I force resolving this before somehow? Or keep it working within a minified file?

According to Laravel Docs we may inject environment variables into Mix by prefixing a key in your .env file with MIX_ After the variable has been defined in your .env file, you may access via the process.env object. if you using Vue you can use This Package A Simple plugin for loading an environment file.

Related

how to use properties file in vueJs?

hi is there any way to store most usable values and properties in a file like yml - property file and ...
and use them in vueJs components
in java we have spring and it helps us using yml and property file properties in project
is there any thing same in vueJs
In vueJs you can use .env files easily.
In you .env file you can define properties starting with VUE_APP_ and them will be available for you in the whole app.
Ex: .env
VUE_APP_API_URL=http://localhost:5000
To read this property just do it.
process.env.VUE_APP_API_URL
More info here.
you can build an object in a .js file and import that obj as your configuration.
no file system exists in pure front-end
or you can get your configuration from a backend api
You can create a normal JS file and import in the Vue.
Or you might need to read about .env file because between those 2 files you gonna need for constants

Passing Symfony Translation to Symfony Webpack Encore

With Symfony, I use translation, Twig and Webpack encore components.
I can translate in frontend Twig with :
'my_key'|trans
I use command yarn encore dev for generate my app.js, but PHP translation component it's not accessible in Javascript.
I have a lot of things to translate in javascript.
Unfortunately since JS is not handled by PHP and by extension also not by Symfony, you will not have access to Symfony's Translation component inside your js files.
A workaround that could work when you don't have too many translations you need to pass is create a JS data object inside your twig template as part of your Symfony application and then access it from your js files. So roughly like this:
# inside your twig template, e.g. index.html.twig
{% block javascripts %}
<script type="text/javascript">
const TRANSLATION_MAP = {
'my_key': "{{ 'some_key '|trans }}",
'my_other_key': "{{ 'other_key '|trans }}"
};
</script>
{{ parent() }} # This loads all your js files which can then access the translation map defined above
{% endblock %}
The downside to this solution is, that you have to decide which keys to put in your translation map without really knowing whether they are used, so this might become a bit inefficient and hard to follow. Also you have to be careful that your translated content is valid json. You can apply (custom) escaping/filtering to ensure that, but still makes it a bit fragile.
All in all, this might not be the best solution but can be a decent workaround for smaller projects until you find it becomes more of a nuisance and you have to find something more sophisticated.
You have to use BazingaJsTranslationBundle which allows you to access translations you have exposed through javascript:
Translator.trans('key', {}, 'DOMAIN_NAME');
Translator.transChoice('key', 1, {}, 'DOMAIN_NAME');
You could transform translations yaml to json with webpack or a task manager (gulp | grunt).
Put built json translation files to assets.
Require them inside js script.
Emit locale value to frontend to choose proper translation json object inside js script.
Note: in webpack case you should run 2 steps consequently:
first step will build translations to assets to be required in js scripts.
second step will compile js scripts afterwards.
Here is a part of webpack encore config which transforms translations *.yaml files to json with 'js-yaml' and puts them into assets directory:
.addPlugin(new CopyWebpackPlugin(
{
patterns: [
{
from: './translations/*.yaml',
to: './[name].json',
transform(content) {
return Buffer.from(
JSON.stringify(
yaml.safeLoad(content.toString('utf8'), {schema: yaml.JSON_SCHEMA})
),
'utf8'
)
}
}
],
}));

Including external (hosted) javascript files in Angular2

I'm trying to add an external js file into my Angular2 project by adding the record to my angular-cli.json file.
I've added a file to the [scripts] array as below:
"scripts": ["https://as-identitydemo--c.na50.visual.force.com/resource/1495420277000/salesforce_login_widget_js"],
all the other posts that i've read refer to using this format for something that's either hosted locally, or installed in the node_modules etc..
How can I include an external js library and utilize that in my project?
You should import the library in your index.html in the head tag.
Second you have to make the library visible to your Angular project. That means you need the typings. You can either search https://github.com/DefinitelyTyped
for already existing types or add the types to the typings.d.ts file.
Example:
In your page (outside of the Angular app) you might have a javascript global variable:
var testVar = 'testvalue';
Then in the typings.d.ts you can make this variable globally accessible by adding
declare var testVar:string;
Then you can access this variable in the whole Angular project like that:
console.log(testVar);
The same you can do with functions in external libraries.
Here is a Plunk that shows that (without having a typings file). Hope this helps.

Webpack reference require module in Html

I'm trying to convert a requirejs project to use webpack. In the Index page, before the webpacked bundle.js script is called, a requirejs module is defined inline that uses some Razor directives to set some js variables from the c# controller. This requirejs module is then referenced a few places in other js files.
When I try webpacking my js files, obviously webpack can't find this module, and I can't separate it into its own js file because it contains Razor statements.
I can't think of a way around this, but perhaps there is? Help, please...

How to be able to "require" a config file using browserify but not have this file included in the bundle

I have an angular application which uses browserify to modularise the Javascript components.
I have a config file which holds environment specific information which I also have as a module, so I can require it to get access to this information. For example another module can just var config = require("./config) and then use this config object to access the configuration information
However I do not want this file to be added to the bundle.js since I want it to be easily editable and no compilation to be required if the information inside it is changed.
Is there a way I can still access it using require but not have it added to the bundle?
You can parse a json file and read its contents with this: https://nodejs.org/api/fs.html

Categories

Resources