I have an angular cli project, which packages, runs, and deploys without issue. My problem is, we need to also provide a static CSS file in a separate directory for our CDN deployment (for people using plain html).
So we created an npm script:
sass --scss --sourcemap=none ./client/src/sass/designsystem/designsystem.scss ./dspackage/dist/css/designsystem.css
The problem is that when I run it, it is trying to use Ruby Sass. I get an error:
/usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory
How can I get it to use node-sass, which is installed correctly both locally and globally?
Before anyone just says to "install ruby sass", I want to compile this css file with the same compiler as the one in our bundle.
This is on OS 10.13.2, angular cli 1.4.4, node-sass#4.7.2
Related
I'm bundling a bunch of components I regularly use in apps I create with Next.js into an npm package to make it easier to reuse them between projects, however I'm having difficulty getting it to work.
The big issue I have is that some of my components need to import/require a configuration file from the project root directory (e.g. project/node_modules/mypackage/index.[js/jsx/tsx] needs to import/require project/config.[js/ts]) so I need to ensure the app is able to import components from the npm package, and the npm package is able to import/require from the app.
I use Typescript to compile the npm package (no Webpack or Babel) but I'm not sure what settings to use for target, lib, module and jsx, or if I'm able to just keep it uncompiled as .tsx and .ts files (I'm using the canary branch of Next.js which has built-in Typescript support).
I can't find any information in the documentation, here on SO or via Google search. Any advice?
I have used meteor build command to create a deployment bundle .tar.gz which is plain Node.js application.
I extract bundle and run following command to run app:
cd programs/server && npm install
But i am not available to run npm install, it is returning message 'SampleApplication module is not defined' and 'sampleapplication' is name of my application.
Given the error you posted, and the limited information available, I assume you're experiencing capitalization sensitivity from whatever OS your deployment server is on. Windows, Linux, OSX all handle capitalization in file paths differently.
Thus, if you develop on OSX which does not care about capitalization and deploy to a windows server which treats file paths as is you can run into issues with required file paths in your program if you are not careful.
Using Cygwin on Windows 10 (64 bits)
Installed babel-cli, react and babel-preset-react on top of Node.js, which was installed via Windows Installer (since there is no support for Cygwin.) I installed those Node packages using yarn, in the global modules folder.
In the django-compressor documentation (https://django-compressor.readthedocs.io/en/latest/reactjs/) they say that a precompiler setting does the trick:
COMPRESS_PRECOMPILERS = (
('text/jsx', 'cat {infile} | babel > {outfile}'),
)
However, babel is not recognizing jsx (throwing errors when encountering virtual dom elements.) It's obvious because I am not passing the react preset to the command. But there is no way I can use that preset because I installed in the global module folder and now I am unable to make babel find and use it.
I need one of these possible solutions:
How can I make babel use a preset globally installed (how should I use babel --presets react in a way that works)?
How do I use a .babelrc file in a Django project?
If I were to install the preset locally (which I seem to dislike a lot) how do I make it live with my Django project without making mess out of my project directory structure?
Okay, I banged my head a few times and found a solution:
There is no way to make babel work with presets installed globally. It is mandatory to install them locally. All react, react-dom, babel-core, babel-loader, babel-preset-react (and perhaps babel-preset-es2015 if latest ECMA syntax is desired) must be installed locally.
There is no place to put a .babelrc file where the precompiler would use it. No use to have a babel section in package.json either. Instead, the precompiler setting should pass the presets in command line like:
COMPRESS_PRECOMPILERS = (
('text/jsx', 'cat {infile} | babel --presets react,es2015 > {outfile}'),
)
Just assume that the folder where manage.py lives is also the root for Nodejs packages. Not tested when deployed and running from a wsgi file but maybe the wsgi should also live next to manage.py.
Also, it looks like all these files and folders: node_modules, package.json and yarn.lock (if installing with yarn as I am,) must be included in version control.
EDITED:
I no loger think node_modules should go into version control.
I started a tutorial on Angular 2.0, the first step in setting up the workspace is installing Node.js and NPM.
Why do we have install Node.js for Angular 2.0?
I don't remember doing this for angular 1.X.
Technically, Node.js and NPM are not needed to do Angular2 work. It does ease things though. Here's the main reasons I speculate are behind this choice:
CLI: Since a while now the de facto way to build and develop new Angular apps is to use the CLI tooling which relies on Node and NPM as well.
TypeScript: Examples are .ts, and you need to run a compiler step to get them into .js, which can be done on-the-fly easily with Node.js and NPM (plus it's a way of easily getting typing files);
Web Server: Serving your Angular SPA from a "real" albeit light web server prevents probably some nasty issues that come with checking your site using file:// links.
The Quickstart guide itself actually continues to mention some more concrete reasons as well:
Here's what these scripts do:
npm start - runs the compiler and a server at the same time, both in "watch mode"
npm run tsc - runs the TypeScript compiler once
npm run tsc:w - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them
npm run lite - runs the lite-server, a light-weight, static file server with excellent support for Angular apps that use routing
npm run typings - runs the typings tool separately
npm run postinstall - called by npm automatically after it successfully completes package installation. This script installs the TypeScript definition files defined in typings.json
You can also have a look at the Quickstart source and further dive into where NPM is needed.
Footnote: there's a similar question about needing Node.js for AngularJS (1.x).
Because Anglar2 is based on Typescript, Web Components and ES6 which need compilation for performance and broader browser support. Typescript is compiled to ES5 JavaScript and the other features require shims for backwards compatibility.
Since Typescript is a superset of JavaScript, and it's compiled to JavaScript anyway, you can write your code in plain JavaScript but it's not recommended.
For a more detailed explanation check out these videos on YouTube
Why Typescript
Instalation steps
NodeJS gives you the tool npm that allows you to download libraries and packages you would use in Angular 2. From the shell you can go to your folder and type npm install to install dependencies you need to have installed to get your angular project going. It will make it easier for you! If you want a complete starter kit go to https://github.com/buckyroberts, you can fork or download the zip with all the starter files to get you going :)
You do not need to use Node anywhere in production to use any front-end JavaScript framework, whether it is jQuery, AngularJS, ReactJS, Angular2, etc.
Angular2 can be used in isolation but to get and feel better development environment, angular2 should be used with nodejs and npm. Some of the nodejs modules helps you in web development.
I am beginner on node.js. Actually my intention are setup portable environment for development node.js on windows. Wingnix are good candidates since it include nginx, mysql, and php.
I install the npm package via -g (global flag), however, it stored in my ${APPDATA}\npm due to the npmrc file on
C:\Winginx\nodejs\node_modules\npm
However, as in the documentation of Winginx for node.js section
As you know, Node.js supports packages (modules). Global packages
folder is \winginx\nodejs\node_modules.
Node.js Package Manager NPM, popular Node.js web framework Express.js
and template engine Jade are included.
That make me confuse, how i install additional global package and manage them? do Winginx provide command shell to manage? Because i set the \winginx\nodejs as Path in environment variables for access through Bash/CMD in windows.
Use this bat file: X:\winginx\nodejs\npm.cmd