I have a project with a structure.scss as main entry point and then each platform a second entry point. Folder Structure:
scss/
|
|-- components/ # Modular Component Files
| |-- login.scss # Structure file for Login Module
|
|-- platforms/
| |-- globals/
| |-- components/
| |-- login.scss
| |-- global-imports.scss
| |-- base.scss
| |-- platform1.scss # Entrypoint for Platform 1
| |-- platform2.scss # Entrypoint for Platform 2
| |-- platform3.scss # Entrypoint for Platform 3
|
`-- structure.scss # Primary Entrypoint for all Platforms
My Npm Scripts:
"scripts": {
"platform": "node-sass --watch --recursive --output-style 'compressed' src/scss/platforms/ -o public_html/inc/assets/css/platforms",
"structure": "node-sass --watch --recursive --output-style 'compressed' src/scss/style.scss public_html/inc/assets/css/style.css",
"scss": "npm run platform & npm run structure"
},
I want that he watch ALL files and compile the files new after change on any file. He is creating at the moment with this Script the correct files... But the problem is, that he try to compile the file as entrypoint file on which one I make changes, that brings me a lot of console errors because he doesn't find any variables or any like that. And at last, I every time, need to make and useless change on the correct file, to get a correct working file...
Have anyone a fix for me for this problem?
And another problem is, that I can't overwrite default mixin vars in platforms > globals > components > login.scss from any platform.scss...
ok i got the solution! Just watch the whole scss folder with:
"scripts": {
"scss": "node-sass --watch --recursive --output-style 'compressed' src/scss/ -o public_html/css/"
},
And give all files that you dont want to use as entriepoint a underscore before the file name! Like _file.scss
_files will be imported but ignored from the watcher.
Related
Setup
I have a monorepo setup with the following file structure:
├── functions
│ ├── src
│ └── package.json
├── shared
| ├── dist
| ├── src
| └── package.json
├── frontend
| └── ...
└── firebase.json
Approach 1 (failed)
./shared is holding TypeScript classes shared among the ./backend and ./frontend. Ideally, I want to reference the shared lib from the functions/package.json using a symlink to avoid that I have to re-install after every change to my shared code (where most of the functionality resides).
However, this does not work (neither using link:, nor an absolute file: path, nor an relative file: path)
// functions/package.json
...
"dependencies": {
"shared": "file:/home/boern/Desktop/wd/monorepo/shared"
...
}
resulting into an error upon firebase deploy --only functions (error Package "shared" refers to a non-existing file '"home/boern/Desktop/wd/monorepo/shared"'). The library (despite being present in ./functions/node_modules/) was not transferred to the server?
Approach 2 (failed)
Also, setting "functions": {"ignore": []} in firebase.json did not help.
Approach 4 (works, but lacks requirement a) see Goal)
The only thing that DID work, was a proposal by adevine on Github:
// functions/package.json
...
"scripts": {
...
"preinstall": "if [ -d ../shared ]; then npm pack ../shared; fi"
},
"dependencies": {
"shared": "file:./bbshared-1.0.0.tgz"
...
}
Goal
Can someone point out a way to reference a local library in a way that a) ./functions always uses an up-to-date version during development and b) deployment using the stock Firebase CLI succeeds (and not, e.g. using firelink)? Or is this simply not supported yet?
Here's my workaround to make approach 4 work:
rm -rf ./node_modules
yarn cache clean # THIS IS IMPORTANT
yarn install
Run this from the ./functions folder
I'm new to SASS and needing to compile it into CSS code. I'm using node.js NPM to compile it, I've installed everything and I have my package.json file in the folder for my website. I also have all my CSS and SCSS/SASS files in my website folder, there's no extra folders. I'm following a tutorial and this is the script it uses:
"scss": "node-sass --watch assets/scss -o assets/css"
Obviously that does not work because the directories assets/scss and assets/css are wrong. I know I can fix the error by replacing them with the directories of my main.scss file and my main.css file in my website folder. I just don't know what I should write if it's all located in the same folder.
Can anyone tell me how the directories should be written or show me how I should write this script for compiling?
Your package.json is must in the root directory, so follow it and reach to the destination of your SCSS and CSS folder, I used below node-sass script
"node-sass": "node-sass -w --source-map true assets/scss/main.scss assets/css/style.css --output-style expanded"
If it's all located in the same folder
for that, you need to use
"node-sass": "node-sass -w --source-map true main.scss style.css --output-style expanded"
I have installed symfony 4 on my shared hosting.
My structure is like this:
ROOT
|
|-- public_html
|
|-- tst
|-- tst
|
|-- bin
|-- config
|-- src
|-- translations
|-- var
|-- vendor
|-- composer.json
|-- composer.lock
|-- binsymfony.lock
I moved index.php from the public folder to the public_html/tst folder and changed the paths inside that file to match the new structure:
require __DIR__.'/../../tst/vendor/autoload.php';
Now, when running http://mysite/tst, I get the homepage of the site as expected. But when I try another route (other than "/"), I always receive a 404 page not found.
Does this have something to do with privileges of am I missing something?
I figured this one out myself, but if someone tell me how to deploy a Symfony 4 application to a shared hosting, please tell me! I think other people will like this too...
You can create symlik for Public. The method you try can lead to problems.
# Enter Directory Root
cd /root_dir
# Create Symlink
ln -s public_html tst/public
I tried downloading the Routing and Navigation example from this page
Here's the link to the specific zip.
I run the following sequence of commands:
npm install
npm install --save-dev #angular/cli#latest
ng -v
ng serve -o
From what I can make out Cannot read property 'config' of null
is somehow related to a bad version of the CLI. But if I create a new project I can start it successfully with my existing setup
ng new router
cd router
npm install
ng serve -o
Old directory structure (from zip download) includes these files:
bs-config.json
e2e-spec.ts
New directory structure (from ng new):
.angular-cli.json
e2e is a folder with files inside
karma.conf.js
protractor.conf.js
tsconfig.json
Is there some sort of ng upgrade command to convert a project?
There was some talk on Git about ng init, but that seems to now be a thing of the past.
I believe most of the files are related to end to end testing.
npm install
npm WARN deprecated minimatch#0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated node-uuid#1.4.8: Use uuid module instead
> phantomjs-prebuilt#2.1.14 install /opt/AngularProjects/router/node_modules/phantomjs-prebuilt
> node install.js
PhantomJS not found on PATH
Download already available at /var/folders/xz/sgpc803n1ms6xpc5n571ytc80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/xz/sgpc803n1ms6xpc5n571ytc80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1498561599287/phantomjs-2.1.1-macosx -> /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /opt/AngularProjects/router/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
> fsevents#1.1.2 install /opt/AngularProjects/router/node_modules/fsevents
> node install
[fsevents] Success: "/opt/AngularProjects/router/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
added 767 packages in 20.239s
ng serve -o
Unable to find "#angular/cli" in devDependencies.
Please take the following steps to avoid issues:
"npm install --save-dev #angular/cli#latest"
You have to be inside an Angular CLI project in order to use the serve command.
/opt/AngularProjects/router>
npm install --save-dev #angular/cli#latest
npm WARN prefer global node-gyp#3.6.2 should be installed with -g
> node-sass#4.5.3 install /opt/AngularProjects/router/node_modules/node-sass
> node scripts/install.js
Cached binary found at /Users/jgf/.npm/node-sass/4.5.3/darwin-x64-57_binding.node
> node-sass#4.5.3 postinstall /opt/AngularProjects/router/node_modules/node-sass
> node scripts/build.js
Binary found at /opt/AngularProjects/router/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine
+ #angular/cli#1.1.3
added 431 packages in 17.132s
==
ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
#angular/cli: 1.1.3
node: 8.1.2
os: darwin x64
#angular/animations: 4.2.4
#angular/common: 4.2.4
#angular/compiler: 4.2.4
#angular/compiler-cli: 4.2.4
#angular/core: 4.2.4
#angular/forms: 4.2.4
#angular/http: 4.2.4
#angular/platform-browser: 4.2.4
#angular/platform-browser-dynamic: 4.2.4
#angular/platform-server: 4.2.4
#angular/router: 4.2.4
#angular/tsc-wrapped: 4.2.4
#angular/upgrade: 4.2.4
#angular/cli: 1.1.3
ng serve -o
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
at Class.run (/opt/AngularProjects/router/node_modules/#angular/cli/tasks/serve.js:22:63)
at check_port_1.checkPort.then.port (/opt/AngularProjects/router/node_modules/#angular/cli/commands/serve.js:110:26)
at
at process._tickCallback (internal/process/next_tick.js:169:7)
In relation to the error in:
/opt/AngularProjects/router/node_modules/#angular/cli/tasks/serve.js
we have:
const config_1 = require("../models/config");
...
const projectConfig = config_1.CliConfig.fromProject().config;
I suspect this pertains to a missing .angular-cli.json file.
/opt/AngularProjects/router/node_modules/#angular/cli/models/config.d.ts
and
/opt/AngularProjects/router/node_modules/#angular/cli/models/config.js
refer to it.
That project (the one in the zip file) is not setup as a CLI-based project. But after opening it up, you can get it running by doing the following:
npm install
npm run start
This will open your default browser to http://localhost:3000/ where the app will be running.
NOTE: you'll also want to undo any changes you've made (or unzip again)
I converted the project to a CLI one, by following these steps, so I could run ng test and follow along with the Tour of Heroes project and run karma tests etc based on testing documentation:
Create a blank new project with ng new <project name>
Delete node_modules folder, then copied the following over into existing project:
.angular-cli.json
renaming "name:" key to same value of "name:" in package.json
e2e folder containing:
app.e2e-spec.ts
app.po.ts
tsconfig.e2e.json
karma.conf.js
protractor.conf.js
tsconfig.json (rename original to tsconfig.orig.json if necessary)
tslint.json (rename original to tsconfig.orig.json if necessary)
copy package.json to package.orig.json. Then in package.json...:
updated scripts: updating/adding:
"ng": "ng",
"build": "ng build",
"start": "ng serve",
"e2e": "ng e2e",
"test": "ng test",
"lint": "ng lint"
dependencies:
updated all #angular using modules
npm install #angular/<package-name>#latest --save
i.e.: (prefaced with #angular/) animations,common, compiler, core, forms, http, platform-browser, platform-browser-dynamic, router.
devDependencies:
npm install #angular/<package-name>#latest --save-dev
#angular/cli, #angular/compiler-cli, #angular/language-service
I also included in devDependencies:
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "^5.3.1",
"typescript": "~2.3.3"
In src folder copied:
assets/.gitkeep
environments/environment.prod.ts
environments/environment.ts
polyfills.ts
test.ts
tsconfig.app.json
tsconfig.spec.json
typings.d.ts
Replaced main.ts (In my case it added extra production env stuff)
In src folder:
renamed tsconfig.json tsconfig.orig.json (I was able to rely on tsconfig.app.json and tsconfig.spec.json)
You may need to tweak index.html. I did not..
run npm install
run ng serve -o
run ng test
Voila!
Note: If you get this error when running ng test:
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15457:109)
at parseSourceFileWorker (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15389:26)
at Object.parseSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15338:26)
at Object.createSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:15192:29)
at WebpackCompilerHost.getSourceFile (/opt/AngularProjects/quickstart/node_modules/#ngtools/webpack/src/compiler_host.js:210:27)
at findSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67909:29)
at processSourceFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67840:27)
at processRootFile (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67728:13)
at /opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67018:60
at Object.forEach (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:1449:30)
at Object.createProgram (/opt/AngularProjects/quickstart/node_modules/typescript/lib/typescript.js:67018:16)
at AotPlugin._setupOptions (/opt/AngularProjects/quickstart/node_modules/#ngtools/webpack/src/plugin.js:129:28)
at new AotPlugin (/opt/AngularProjects/quickstart/node_modules/#ngtools/webpack/src/plugin.js:26:14)
at _createAotPlugin (/opt/AngularProjects/quickstart/node_modules/#angular/cli/models/webpack-configs/typescript.js:55:12)
at Object.exports.getNonAotTestConfig (/opt/AngularProjects/quickstart/node_modules/#angular/cli/models/webpack-configs/typescript.js:102:19)
at WebpackTestConfig.buildConfig (/opt/AngularProjects/quickstart/node_modules/#angular/cli/models/webpack-test-config.js:16:31)
it's because you've missed an required item. For me it was test.ts. See here.
I want to cache node modules for each submodule. How can I do so? For example I have the following directory structure:
/test1/node_modules
/test2/node_modules
How do I tar each node module directory under the main directory so that I can then have a zip file with the following structure
/test1/node_modules
/test2/node_modules
edit
What I mean is that I want to get all the node_modules directories under the main directory. node_modules directory can be under directory test1 or test2 or test3. I want to get them all and zip them, maintaining the directory structure. So in the zip file they will be test1/node_modules, test2/node_modules
... but I also want a "catch all" solution... every node_modules dir should be in my tar.
Its not clear where you're blocked. Here is how I would do it:
Use 2 distinct commands, one to create, one to add:
# create my.tar
tar cf my.tar /test1/node_modules/*
# add second directory with tar uf
tar uf my.tar /test2/node_modules/*
If you have more than test1 & test2, but want to have all test dirs:
tar cf my.tar /test*/node_modules/
If you want every node_modules, then use a find command, piped to your tar command
find / -type d -name node_modules | xargs tar cf my.tar
Assume you have these node_modules
➦ tree ./
./
├── pack.js
├── test1
│ └── node_modules
│ └── a
└── test2
└── node_modules
└── b
4 directories, 3 files
You can use node script to pack files. /^test\d+/ means test1 test2 test3 etc.
'use strict';
const fstream = require('fstream');
const zlib = require('zlib');
const tar = require('tar');
const path = require('path');
const dist = path.join(__dirname, 'all.tgz');
fstream.Reader({
path: __dirname,
filter() {
return this.path === __dirname ||
path.relative(__dirname, this.path).match(/^test\d+/);
},
})
.pipe(tar.Pack({ fromBase: true }))
.pipe(zlib.createGzip())
.pipe(fstream.Writer(dist));
Run node pack.js and all node_modules directories will be in one file all.tgz.
vim all.tgz
" tar.vim version v29
" Browsing tarfile
" Select a file with cursor and press ENTER
/
test1/
test1/node_modules/
test1/node_modules/a
test2/
test2/node_modules/
test2/node_modules/b