Adding a app.js file from resource folder not public - javascript

I'm using vue.js for the first time and the files are located in 'Resources/Assets/js/app.js'
How can I import that app.js file into my partials scripts. Currently the assets()points to the public folder and I need it like that.
When I try to move the asset folder into the public I get an error for 'multi'

Are you familiar with any build tools like webpack, grunt, gulp, etc? Those are commonly used to bundle your application resources and move them to the desired destination, i.e. public in your case. I'd suggest reading some intro material to webpack as it is very often used in laravel + vuejs projects.
There are additional scripts in the package.json file that will run mom tasks too.
You will find npm run dev for local development and npm run prod for production.

Try npm run dev
This will compile all your assets and you will get a single app.js file in the public folder.
You can then use that app.js file in your HTML file

Related

Render React code to HTML file with npm

I didn't know how to name this question but here is the thing. I installed React with NPM: npx create-react-app my-app and I start app with npm start. After that localhost:3000 opens. The thing is html file in folder public isn't connected anyhow to the script.
I want to serve the development with package called "serve". The only thing there is nothing to serve, the HTML file in public isn't updated at all while I can't serve App.js or anything like that.
Is it required to use CDN links for this task? Or how else it is possible to connect React to that generated html file?
You need to setup your environment with Webpack. you can follow this tutorial:
https://www.valentinog.com/blog/react-webpack-babel/
Or you can clone a react boilerplate project from github directly.

.js Files Transpiled From .ts Files Don't Run In Browser

I'm trying to use the h264-converter npm package (https://www.npmjs.com/package/h264-converter).
It is written in TypeScript. When I run npm install --save h264-converter I get a folder with the .ts TypeScript files, but it also comes with the .js Javascript files in the same folder already transpiled for you.
However, the .js files it comes with do not run in a browser. They contain Require(...) functions and undefined objects like exports that cause them not to run in a browser. Simply including these .js files with <script> tags causes errors. I did some reading and tried to use the browserify npm package (https://www.npmjs.com/package/browserify) to create .js files that work in a browser from .js files that don't. I ran
browserify "C:\...\h264-converter\dist\index.js" > "C:\...\h264-converter\dist\bundle.js"
like the in the example on the browserfiy main page and it seemed to run without error (their example uses main.js instead of index.js but I think index.js serves the same purpose). It created bundle.js. However, bundle.js still doesn't run in a broswer. bundle.js still has Require(...) functions.
How do I get the .js files that come with h264-converter npm package to run in a browser?
I can post the contents of some of the .js files that the h264-converter npm package comes with if that will help. Thanks.
npm package
To use an npm (node style commonjs) package in the browser you should use a a module bundler like webpack.

Is it possible to set default folder to be published using 'npm publish'

I'm currently developing an Angular library package using ng-packagr. Apparently the built result is generated under './dist' folder and it contains all the files (including package.json, js, and d.ts files) that I want to publish to the npm server and that needs to be the root of my package.
Long story short, I want to be able to publish ./dist folder from the root folder with 'npm publish' command. Is it possible to set the default folder to publish (other than publishing the root folder)? I know we can use npm publish dist, but the thing is my teammates could accidentally do npm publish on the root folder and it makes the whole root folder get published.

Generate JS from .jsx files using Babel

I'm sorry for even posting this, but I don't know how to ask this question otherwise since I'm a total novice on JS/React/Node/Babel/JSX.
How can I convert the react templates from the front directory from this repo into the pure JS/HTML/CSS artifacts found in the public folder?
Is this the correct approach? I've tried running Babel transpiler on the page.jsx file but it didn't generate a file similar to public/script.min.js.
Or another way to put it, is how can I generate public/script.min.js from the assets found in the front directory?
On every repository, you should find a package.json file with script available to build your app. From what I can read in the respository package.json, launch "npm run build" in a command line with the respository as root. Make sure you have nodeJS installed on your computer to launch npm

Using stellar-lib api with Meteor

this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.

Categories

Resources