I've been trying to compile the assets in a remote server with the sinatra-assetpack gem with not luck so far. It does compile when deploying it to Heroku or in my local machine but not in the remote server.
I have this configuration in my sinatra app file:
assets do
serve '/js', :from => 'assets/javascripts'
serve '/css', :from => 'assets/stylesheets'
serve '/images', from: 'assets/images'
serve '/bower_components', from: 'bower_components'
js :landing, [
'/bower_components/sweetalert/lib/sweet-alert.min.js',
'/js/back-to-top.js',
'/js/subscription.js'
]
js :checkout, [
'/js/form.js',
'/js/vendor/*.js'
]
css :landing, [
'/bower_components/sweetalert/lib/sweet-alert.css',
'/css/normalize.css',
'/css/landing.css'
]
css :checkout, [
'/css/normalize.css',
'/css/checkout.css',
'/css/vendor/animate.css'
]
js_compression :jsmin
css_compression :sass
end
When I execute rake assetpack:build, all the files are correctly compiled except the checkout.js. It does indeed generate a public/assets/javascripts/checkout.js and its fingerprinted version but both of them contains just a <h1> Internal Server Error </h1>.
Removing the form.js (which is in reality a coffescript named form.coffee) from the precompilation process outputs a correctly compiled checkout.js. What is driving me nuts is that the form.coffee is correctly converted from coffee to javascript (I can see it at public/js/form.js) but it seems it cannot be merged with the vendor files.
Related
I have an Angular 11 Project, which implements a WebAuthn registration. The backend is SpringBoot 2.4
WebAuthn Login should work in two parts of the project, the "main" and the "viewer"
The domain setup is rather complicated:
Main Project
Urls
Local: https://localhost:4202
Staging: https://company.com (local Kubernetes Server)
Prod: https://company-project.com
Viewer Project
Urls
Local: https://localhost:4200
Staging: https://viewer.develop.plattform.intra.company.com (local Kubernetes Server)
Prod: https://viewer.company-project.com
Code
environment.ts
prodUrls: ['company-project.com'],
webauthn: {
name: "Company DEV",
rpId: "localhost"
}
environment.prod.ts (replace in build)
prodUrls: ['company-project.com'],
webauthn: {
name: "Company Prod",
rpId: "plattform.intra.company.com" // gets overridden by values in "prodUrls"
}
webauthn.service.ts
private _getRelyingPartyInfo(): RelyingParty {
let rpId = environment.webauthn.rpId;
/**
* Check if the Hostname matches one of our Prod Hostnames
* and use this instead
*/
environment.prodUrls.forEach((url, index) => {
if (location.hostname.indexOf(url) > -1) {
rpId = environment.prodUrls[index];
}
});
const rp = {
id: rpId,
name: environment.webauthn.name
};
return rp;
}
The Issues
It works locally, using the rpId localhost (both Backend and Frontend locally)
It does NOT work on staging --> Backend throws
WebAuthnException message: rpIdHash doesn't match the hash of preconfigured rpId.
It should work on Prod using company-project.com as rpId (scared to deploy as it does not work on staging)
What I tried
For staging, I changed the rpId to develop.plattform.intra.company.com and I can register and login in "main". Logging in on "viewer" throws an error as well
The spec is not very specific about what should work: https://www.w3.org/TR/webauthn/#relying-party-identifier, it only says what shouldn't work. I assume, that the multiple subdomains complicate things on staging?
What would be the correct rpId for staging and is the assumption that company-project.com as rpId should work on prod correct?
For staging, I changed the rpId to develop.plattform.intra.company.com and I can register and login in "main". Logging in on "viewer" throws an error as well
What's your code to get the assertion? You might also be running into this other question. You need to set the get assertion RP ID to the same RP ID used for registration. If you don't, it will default to the origin, which for your subdomain will be different.
Simple issue with the Winston logger for NodeJS, taking a ridiculous amount of hours to solve:
const winston = require('winston');
exports.logger = winston.createLogger({
transports: [
new winston.transports.File({
format: winston.format.json(),
level: 'info',
timestamp: true,
maxsize: 512000, // ~ 5 MB
maxFiles: 10,
filename: '../logs/info.log'
}),
new winston.transports.Console({
format: winston.format.simple(),
level: 'info'
})
]
});
Just as a funny fact, it can create the file inside the folder if it exists, but cannot create the folder if it does not exists (WTF?).
The problem is that never saves any information to the file. I tried modifying the access privileges. Nothing. No feedback received anywhere about the issue.
I may be too dumb for the documentation because nothing is covered about this but many people seem to be facing the same issue.
Ok, I just discovered the problem: depending on where the file is called from, the path will be interpreted differently.
Diagnose: The chunk I am showing was not in the project's root directory, but the main file I was executing is (and is requiring that chunk of code), and because of that the path was being interpreted from the root file's perspective.
Result: I was having my logs written right outside of my project's directory.
I've set some routing rules in ngsw-manifest.json as shown below. Problem is when I'm running a http-server and directly hitting http://localhost:8080/home it's showing url not found.
{
"static.ignore": [
"^\/assets\/ignore.*$"
],
"routing": {
"index": "/index.html",
"routes": {
"/": {
"match": "exact"
},
"/home": {
"match": "exact"
},
"/listing/must_watch_videos": {
"match": "exact"
},
"^/regex/.*/route$": {
"match": "regex"
}
}
},
"external": {
"urls": [
{
"url": "https://fonts.googleapis.com/css?family=Material+Icons"
}
]
}
}
When someone requests /home your server can't find a file or folder with that name and returns error 404. You need your server to instead server your main app .html as though it resides at those locations.
For node http-server it looks like the option would be --spa. For example:
ws --spa index.html
Single Page Application
Serving a Single Page Application (an app with
client-side routing, e.g. a React or Angular app) is as trivial as
specifying the name of your single page:
$ ws --spa index.html Serving at http://mbp.local:8000,
http://127.0.0.1:8000, http://192.168.0.100:8000 By default, requests
for typical SPA paths (e.g. /user/1, /login) return 404 Not Found as a
file at that location does not exist. By marking index.html as the SPA
you create this rule:
If a static file is requested (e.g. /css/style.css) then serve it, if
not (e.g. /login) then serve the specified SPA and handle the route
client-side.
See: https://www.npmjs.com/package/local-web-server#single-page-application
See: https://github.com/lwsjs/local-web-server/wiki/How-to-serve-a-Single-Page-Application-(SPA)
I have bunch of JS files that have been versioned during deployment for JS cache-busting. It looks like this.
<script src="dist/js/bundle.js?v=ju29jj39983eddd2"></script>
I perform minification & compression using gulp. After it is done, I will save them to a local dir using a filename appended with version values. Here's the code.
gulp.task('bundle', function() {
return gulp
.src(config.app_scripts) // app_scripts is an array containing list of files
.pipe(gutil.env.type === 'production' ? uglify({mangle: true}) : gutil.noop())
.pipe(gutil.env.type === 'production' ? concat('b-bundle.js?v=' + secureRand) : concat('b-bundle.js'))
.pipe(gulp.dest('dist/js'));
});
I serve the assets in the development environment using gulp-webserver. Here's the configuration. However, it doesn't pick the JS file the directory. It just fallbacks to index.html when page loads.
//Local webserver
gulp.task('webserver', function() {
gulp.src(__dirname + '/client')
.pipe(webserver({
livereload: false,
open: false,
directoryListing: false,
fallback: 'index.html',
proxies: proxiesConf
}));
});
I'm not sure what is causing this behavior. I highly appreciate if somebody can help me.
Nowadays, it's discouraged to cache-bust with query strings according to:
Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.
-- https://gtmetrix.com/remove-query-strings-from-static-resources.html
Instead, you should (a) let the webserver invalidate cache by adding to the header: Cache-Control: no-cache, no-store, must-revalidate, or (b) adding a content hash to the file name of the resource.
<script src="assets/js/edf-d41d8cd98f00b204e9800998ecf8427e.min.js" />
instead of
<script src="assets/js/edf.min.js" />
-- https://medium.com/#codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
Good luck :)
Dear Strongloop community
I am following the example provided by loopback for evaluating local-storage data store.
It works fine and I can use the rest API to create and retrieve files from the local file system (used as a data source).
I had to used "$ npm install loopback-component-storage --save".
the datasource defined in datasource.json is:
{
"db": {
"name": "db",
"connector": "memory"
},
"localFileSystemStorage": {
"name": "localFileSystemStorage",
"connector": "loopback-component-storage",
"provider": "filesystem",
"root": "./property_data"
}
}
the ./property_data directory is where all the data is stored. (relative to the project directory) and I can access it through rest with no issues.
Next I was trying to generate Angular service component so I can connect to the loopback server using Angular application. So inside the client directory I executed:
../example-2.0/client$ lb-ng ../server/server.js js/lb-services.js
and it failed:
/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:25
throw new Error('FileSystemProvider: Path does not exist: ' + this.root);
^
Error: FileSystemProvider: Path does not exist: ./server/storage
at new FileSystemProvider (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:25:11)
at Object.module.exports.createClient (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:17:10)
at Object.createClient (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/factory.js:86:18)
at new StorageService (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/storage-service.js:29:25)
at Object.exports.initialize (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/storage-connector.js:12:19)
at DataSource.setup (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-datasource-juggler/lib/datasource.js:332:17)
at new DataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-datasource-juggler/lib/datasource.js:109:8)
at Registry.createDataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/registry.js:349:12)
at dataSourcesFromConfig (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/application.js:415:19)
at EventEmitter.app.dataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/application.js:222:12)
Am I missing something?
I could really use some help here.
Thanks
In datasource.json file you have provided the relative path ./property_data with respect to /server folder.
Thus you need to call any method from that folder only.
Now when you are running it through the server then you are running it from /server folder thats why it runs without an issue but for angular Sdk generation you are doing it from client/ folder. Thus its genetating Path does not exist error.
Thus the correct syntax would be:
../example-2.0/server$ lb-ng server.js ../client/js/lb-services.js