I have SASS installed via NPM (SASS version 1.32.13 compiled with dart2js 2.12.4) and this setup in package.json:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded _assets/scss:wwwroot/dist/css",
"sass-prod": "sass --no-source-map --style=compressed _assets/scss:wwwroot/dist/css"
},
I would like my setup to add vendor prefixes to the generated css. How can this be done best? Autoprefixer, I guess, but how?
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
npm i autoprefixer
I just start using Stenciljs. I have polyfills related question.
Code below works at Chrome but it does not work on on Edge or IE11 browser which are two browsers that I need polyfills.
<script type="module">
import { applyPolyfills, defineCustomElements } from 'https://unpkg.com/<my-component>/loader/index.mjs';
applyPolyfills().then(() => {
defineCustomElements(window);
});
</script>
I am using
"#stencil/core": "^1.0.7"
Does anyone know how to make polyfills work?
Thanks.
Try to use the following command to run the Stenciljs application:
Enabling ES5 builds during development:
npm run dev --es5
For stencil-component-starter, use:
npm start --es5
Enabling full production builds during development:
npm run dev --prod
For stencil-component-starter, use:
npm start --prod
If still not working, add the following tag in the header of the index.html page:
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
I've got continuous deployment setup with Netlify and a git repo but so far no matter what I do, Netlify isn't npm-installing anything. There's no node_modules folder when I download a zip of the deploy, my site can't access node_modules, it's just not there. I've started with a random npm package (lodash) to try to get it to install but I've got nothing so far.
Netlify says that it automatically runs npm install. I've tried having no build commands and I've tried adding npm install as a build command with no results from either.
package.json:
{
"name": "netlify-test",
"version": "1.0.0",
"description": "stuff",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electrovir/netlify-test.git"
},
"author": "electrovir",
"license": "MIT",
"bugs": {
"url": "https://github.com/electrovir/netlify-test/issues"
},
"homepage": "https://github.com/electrovir/netlify-test#readme",
"dependencies": {
"lodash": "^4.17.11"
}
}
HTML:
<!doctype html>
<html>
<head>
<title>
hi
</title>
<script src="node_modules/lodash/_apply.js"></script>
</head>
<body>
Why can't this find node_modules??
</body>
</html>
It took a while to figure this out but I discovered that Netlify does npm install into your repo root or Base directory when you have a package.json. This can be seen by changing the Build command to something like ls and reading the deploy console output (there will be a node_modules folder listed).
However, at some point after running the Build command and before deploying, this node_modules is deleted. Hence, if you use something similar to the following as a Build command, node_modules can be copied to your Publish directory:
rm -rf dist && mkdir dist && rsync -rv * dist --exclude ./dist
This copies the Base directory contents into dist, which I have set as my Publish directory, ignoring ./dist itself (it can't be copied into itself). It'd be even better if this were added as an npm script in package.json with npm run <script name> for your Build command.
Note that Base directory, Build command, and Publish directory are all under Deploys > Deploy settings or Settings > Build & deploy in Netlify.
Thanks to lastmjs for help with figuring this out.
It would be odd if node_modules WERE there. Netlify's continuous deployment does run npm install for you, if and only if there is a package.json in the root of your repository (or instead in the base directory if you set one in netlify.toml. However, it also uses a custom npm directory that is outside of the deployment directory (see how it is setup here: https://github.com/netlify/build-image/blob/master/run-build-functions.sh#L34), since deploying your node_modules shouldn't be needed for a static site at browse time - only at build time.
The intended path for a Netlify deploy is:
you have your dependency manager configuration checked into your git repo at the root of the repo (if no base directory is set in the UI or in the toml file) or in the base directory if set. This could be any/all of Gemfile.lock, package.json, yarn.lock, or requirements.txt as explained in this article about the build settings at Netlify
you do not store your node_modules in the repo. Many of those will be specific to the architecture of the build environment - and your local machine is almost certainly different than Netlify's. You'll want those generated at build time.
your build is intended to USE those modules DURING BUILD. So you use for instance dotenv to read your .env file while building, or you use gulp-cli to process your Gulpfile.js
your build completes, and you've used all the modules during build to generate standalone html/js/css/images, so you're done with them - your static html and other assets are generated in your publish directory, where the build process has intentionally not put your node modules, and thus they are not deployed. Your static website should not need the modules at runtime, so deploying the (thousands!) of files in there is not efficient or needed.
You could have a situation that requires some/one of them - e.g. a function or you could need a file from one of them even on your static site - and that's fine, feel free to copy it into the publish directory explicitly. But that is not the norm :)
I installed node.js, run apache via xampp, and configured my apache server so that I can use www.example.com as my practice server domain on my local machine.
I started my command prompt as admin and typed the following lines but and they all ran successfully:
install vue-cli
$ npm install --global vue-cli
create a new project using the "webpack" template
$ vue init webpack my-project
install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
I followed the cli installation section on https://v2.vuejs.org/v2/guide/installation.html
When I go to my folders, all the vue.js files are installed inside 'my-project', but when I go to my apache server at www.example.com or www.example.com/my-project, a blank page shows. And if I got into my index.html file in the 'my-project' folder and edit it to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>project3</title>
</head>
<body>
<div id="app">sdfsf</div>
<!-- built files will be auto injected -->
</body>
</html>
I just get a blank page with the text sdfsf. What am I doing wrong? why isn't vue.js hello install screen page loading?
When you run:
npm run dev
It starts a Node JS server. The exact command can be found in package.json, and you can see the result by going to http://localhost:8080/.
We use to download folders and files and while on the Visual studio we started to use the nuget. Now when I am working on the angular js, I am seeing bower and npm. I want to ask are the equivalent to download? If it is, what benefits they give us? Or they worked after the download?
For example see the below extract from the website.
via bower:
$ bower install angular-loading-bar
via npm:
$ npm install angular-loading-bar
via CDN:
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>