How I can change paths to my bundle files from /myBundleFile.js to /static/myBundleFile.js in script src in index.html that I get from building my React project with Nx?
I'm using the default React plugin for Nrwl Nx.
You need to use the deployUrl property in the project.json for that project.
https://nx.dev/packages/web/executors/webpack#deployurl
Related
I was trying to create a angular library and I have created one. Now I want to add my react project in it.
Then I am exporting my files in public-api.ts file so that I can use it in my library But file with js extention is giving me a error.All with .ts extention alone is taking.How can I resolve this
I am expecting I can bundle my react project in angular library.
I have a question about linking static images with vuejs in electron.
After I have started the app, it gives me following response:
My project folder is as follows:
to-do-desktop:
|
|-.electron-vue
|-build
|-dist
|-node_modules
|-src --> Here is the sourcecode and the index.ejs
|-static --> Here are the images and index.css
|-.babelrc
|-.env
|-.eslintignore
|-.gitignore
|-.travis.yml
|-appveyor.yml
|-package
|-package-lock
|-README.md
|-vue.config
My question is now, how can I paste the whole static folder
to the desired destination in the browser. I am using this
relative path in my vue-File:
static/weiss.png
I build the app with the following tutorial:
https://auth0.com/blog/electron-tutorial-building-modern-desktop-apps-with-vue-js/
I built it with following command:
npm run build
What relative path should I use and what conifg settings do I have to do?
Thank you for your help.
What I did to fix the problem when I experienced it was to go into the files after the build and convert the paths to relative by adding dots(.), that is:
/static/css/randomstring.css
/static/js/randomstring.js
to
./static/css/randomstring.css
./static/js/randomstring.js
this solved the problem without having to change any configs or get new libraries installed.
I want to use a component created using StencilJS in a regular basic HTML file. I followed these steps:
I have created a stencil component to create the basic my-component example:
npm init stencil
I want to use this component in an HTML file, so I ran
npm run build
I then created an html project with the following structure:
And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the component.js file like this:
<script src="script/{component_name}/{component_name}.js"></script>
And I used the component in the html like this:
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
But my component isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of compiling my stencil component to be using in a basic HTML project?
Stencil bundles your dist into modules and lazy-loads only the required code based on the components you are actually using in your HTML. So you should serve the whole dist folder along with your website.
The recommended way is to have the following two script tags in your html file:
<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>
(where [namespace] is whatever is set in your stencil.config.ts)
This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.
If my-component is the only component that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about component interdependencies and how to lazy-load them accordingly.
There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored compiler (which is available using the --next flag, after installing #stencil/core#next) (Stencil 2 has been out for a while now).
New to react and was following a tutorial creating this component. (https://github.com/owenchak/react-weather). I'm using gulp to test everything locally. How do I use my component in an actual website I'm trying to create? I instructed gulp to create a style.css (containing all the sass files), main.js containing the interpretable jsx and index.html that contains all these files.
I have done this before. If you take the bundled js (and) and css and attach it to your html and you've created an element where react will be rendered (e,g <div id="app"></div>) it will work.
I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.
Firstly generate new component and you can use this component to design your own template and to add own CSS
as follow:-
firstly generate new component ng g component mycomponent
new component will be created like below :-
mycomponent
mytest.component.css
mytest.component.html
mytest.component.spec.ts
mytest.component.ts
then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file
you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name
when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code.
Next, you have these options:
Import the static files of your html theme one by one on the index.html in this way:
and so on..
In your angular-cli.json file:
"scripts": ["../src/assets/js/jquery.min.js"],
and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.
Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:
<img src="../src/assets/images/logo.png" alt=""></a>
so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.