Just getting started with KrakenJS. After running the generator and looking at the config.json I notice it has the "static" middleware defined as:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
I have two issues/questions:
After running grunt build I see the browserify output in the /.build folder, but when I navigate to /js/app.js it appears to load the file from the /public folder. Shouldn't it be from the /.build folder?
With Express 4+ shouldn't this actually be serve-static?
I can't help but think I'm missing something.
Thanks!
As I guessed, I was missing something.
I dug into the kraken source a bit more and found that the core config defines the "name" property on static as "serve-static", so it is in fact correct when it merges with the config.json in my app.
The other issue I was having with loading from the incorrect folder was because inside the development.json config file the 'kraken-devtools' middleware is configured with the copier compiler, so when the file is requested at runtime it copies it from the /public folder into the /.build folder, overwriting the output from grunt build.
Related
I am getting a strange error in in my cmake project in which the dependency I am trying to require does not work. In my vcpkg.json file, I have the following:
{
"name": "glmcmake",
"version-string": "1.0.0",
"dependencies": [
"aws-sdk-cpp[s3]"
]
}
However, when I run cmake I get the following error in the vcpkg-manifests-install.txt file:
$.dependencies[0] (a dependency): must be lowercase alphanumeric+hyphens, split with periods, and not reservedExtended documentation available at 'https://github.com/Microsoft/vcpkg/tree/master/docs/users/manifests.md'.
How do I write the aws-sdk-cpp[s3] dependency in the vcpkg.json file correctly so that it can download the right one? I do not need the entire aws-sdk-cpp library. I only need the s3 subfolder, basically.
When I search for aws-sdk-cpp on vcpkg, I can see the [s3] subfolder in particular, but I cannot get my cmake to agree with the way it is written on vcpkg search.
Any thoughts?
Thanks
What I'm trying to do is make my vue ssa app load all its static files from a cdn instead from a server hosting it. I build the app using the command npm run build and modify the file index.html like this, I changed
src="/js/chunk-vendors.0704b531.js" to src="https://cdn.example.com/js/chunk-vendors.0704b531.js"
href="/css/app.c7158abb.css" to href="https://cdn.example.com/css/app.c7158abb.css"
(Could not change
src="/js/app.ee558821.js" to src="https://cdn.example.com/js/app.ee558821.js"
without causing an error. I'll explain later)
and I upload all the files in the dist folder including the index.html to a shared hosting server. I'm using bunny cdn and configured it to work with my domain. All works fine. However when I tried to include the file app.ee558821.js on the cdn (Issue I said I'll explain later)
src="/js/app.ee558821.js" to src="https://cdn.example.com/js/app.ee558821.js"
I got these error messages on the browser console
ChunkLoadError: Loading chunk 245 failed.
(missing: https://example.com/https://cdn.example.com/js/245.e400d699.js)
What I can see in the browser console is that all the files viz 'chunk-vendors.0704b531.js', 'app.c7158abb.css' and 'app.ee558821.js' successfully load from the cdn but the all the other files 'app.ee558821.js' somehow called where getting the path wrong. Instead of the normal path like https://cdn.example.com, the path instead look like this https://example.com/https://cdn.example.com.
Now my question is how do I make my vue app loads all its static assets from a cdn?
This is the content of my vue.config.js file
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
});
These are the contents of my dist folder
css
some files here
js
|114.b704aee6.js
|245.e400d699.js
|439.027f133c.js
|623.76b80e83.js
|724.ebcd23c0.js
|app.ee558821.js
|chunk-vendors.0704b531.js
favicon.ico
index.html
Thank you very much any help is greatly greatly appreciated. I recently taught myself how to code and this is my first question on stackoverflow.
Thank you Michal Levý for pointing me in the right direction. I changed the publicPath property to 'https://cdn.example.com/' and that fixed the problem.
I am using nx to manage my work environment with #nrwl/express plugin. I want to serve static file from the express server but with no success.
I tried the following.
express.static(path.join(__dirname, 'videos'));
but I am not able to get the files inside the videos directory, I always get 404.
I tried both this URLs
http://localhost:3333/api/output.m3u8
http://localhost:3333/output.m3u8
the videos directory is located in the root of my app.
Any idea how can I solve this?
Not sure if you ever solved this but I've just ran into the same problem myself.
When you serve your Express App with Nx it will be transpiled and served from the dist folder. Therefore __dirname will actually resolve to your monoreporoot/dist folder (i.e. the root of your project /dist).
If like me you were trying to serve content from a static folder inside your src directory or similar, you will need to ensure that it's transferred across to your dist folder when serving your Express app.
For me, it wasn't a problem as I was just using it as a temporary upload folder for dev so I manually created the folder inside of dist. If it's linked to your app then you might need to add a specific mkdir or cp command to your build to make sure the files/folder is present.
The process of using from the dist folder, so it is necessary that the source folder be copied.
Add a line to project.json
{
"targets": {
"build": {
"executor": "#nrwl/node:webpack",
"outputs": ["{options.outputPath}"],
"options": {
...
"assets": ["packages/<your-app>/src/public"] <-- need add this line
},
"configurations": {
...
}
}
}
Add this in your main.ts
app.use('/static', express.static(__dirname + '/public'));
The file in packages/[your-app]/src/public/some-file.txt will be available at
http://localhost:3333/static/some-file.txt
I'm using the Vue CLI to build my application into one of my existing php projects. In case to work with generated files in php, I need to move the assets to the ../public/assets/ directory. Unfortunately, this does not seem to work in development environment (production mode works just fine, but I'd really need to test the integration of vue in the php app).
Am I doing something wrong or is it a known restriction?
Here's the config:
// vue.config.js
module.exports = {
outputDir: '../public',
assetsDir: './assets',
indexPath: './views/index.html'
};
As per the documentation, you can just copy the assets into your public/assets folder and reference them via absolute path.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
Because of HMR in development mode this is not yet possible to implement. Here's the reference to the communication on Vue.js' forum.
I can't seem to convince Visual Studio Code to resolve absolute TypeScript module paths. Relative paths work, but absolute don't. I would like Visual Studio Code to resolve module paths from ./src folder on.
// This works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';
// This doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';
// This works, but it is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';
The last one of course doesn't count as each developer's project path is highly likely different. But even if we'd all set a system variable %ProjectXRoot% we can't use this variable in the code. Visual Studio Code will not resolve such module path. I've tried.
// Won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';
Currently installed versions
• TypeScript: 1.8.10
• VSCode: 1.1.1
Question
I've tried to somehow configure Visual Studio Code to resolve absolute module paths, but I can't seem to do so. I've tried configuring tsconfig.json (in the project root) by adding baseUrl in two different places.
{
...
"compilerOptions": {
"baseUrl": "./src", // Doesn't work
...
},
"baseUrl": "./src", // Doesn't work either
...
}
I've tried values like src, ./src and ./src/, but none of them work in any of the upper configuration places.
So how does one configure Visual Studio Code to resolve absolute module paths from a certain folder?
If that's not possible, it would be at least better to resolve absolute paths from project root. How does Visual Studio Code determine that? Is it where you Open Folder or is it where the .vscode folder is?
But it would still be a viable solution for absolute paths. I've tried using ~ similar to Visual Studio, but to no avail either.
(Unresolved)
--
As steinso points out in his answer, all modules starting with /, ./ or ../ are considered relative. Especially the first one surprised me completely as I usually consider that a project root-relative path.
But this fact basically means that the main question now becomes: How can I provide module imports as absolute paths (from some project root folder path) at all? Starting paths with slashes usually meant absolute, but in this case it doesn't.
Even when I set compiler option moduleResolution to classic (so module resolution wont be looking into node_modules folder) the second set of imports above should actually all work as per Microsoft's linked document. But for some reason I still get red squiggly lines in Visual Studio Code and errors during compilation.
So how can I import a specific project module without providing an exact relative path to it, but rather just its own project-relative path?
To be able to use absolute paths from import in TypeScript using Visual Studio Code you should be using next version of TypeScript - typescript#next which is TypeScript v2. For that do the following:
Install typescript#next via npm. For installing TypeScript v2.x
npm i typescript#next -D
In Visual Studio Code
i) Go to menu File → Preferences → Workspace Settings (This generates the .vscode directory at the project root and initializes the settings.json file.)
ii) Put the following key:value pair in settings.json file
"typescript.tsdk": "node_modules/typescript/lib"
In tsconfig.json add following key:value pair to 'compilerOptions'
{
"compilerOptions" : {
"baseUrl": "./",
"paths" : {
"src/*": ["./src/*"]
}
}
}
Reload Visual Studio Code
If you have the following directory structure:
+ node_modules
+ src
| + app
| | + shared
| | | -service.ts
| | -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html
Then to import /src/app/shared/service.ts from main.ts you could now import {} from 'src/app/shared/service;
If you are using webpack and ts-loader for transpiling the .ts files, you should add following to the resolve section of webpack.config.js configuration file.
resolve: {
extensions: ['', '.js', '.ts'],
alias: {
"src": path.resolve('./src')
}
}
Please refer to this for absolute module resolution.
You need to specify:
"compilerOptions": {
"moduleResolution": "classic"
...
The base path will then default to the directory of your tsconfig.json, add rootDir in compilerOptions to change it. EDIT: This does not seem to have any effect.
This will allow imports such as:
import { Interface } from 'api/interfaces';
Note that any path starting with . or ../ or / is considered relative.
Edit: Module resolution
Be aware of how the modules are resolved. The module path is still some what relative to the current file.
Let's use an example to illustrate for the current scenario:
Let's say you import { Interface } from "api/interfaces", from source file /src/views/View.ts. Typescript would then look for the module in the following paths:
/src/views/api/interfaces.ts
/src/api/interfaces.ts
/api/interfaces.ts
Note: how this still makes it relative, imagine if you import {Home} from "Home/Home" when you are located in /src/views/View.ts. In this case it would work even if the path is /src/views/Home/Home.
These are the possible resolutions:
/src/views/Home/Home -> Note how this would work.
/src/Home/Home
/Home/Home
More information can be found here:
http://www.typescriptlang.org/docs/handbook/module-resolution.html
If you've set up paths correctly:
{
…
"compilerOptions": {
…
"baseUrl": ".",
"paths": {
"~/*": ["app/assets/javascript/*"],
"*": ["node_modules/*", "app/assets/javascript/packs/*"]
}
}
}
And if you're still having issues, maybe try reloading Visual Studio Code: Cmd/Ctrl + Shift + P and type reload window.
It just randomly stopped working for me and is reporting problems. I spent around 20 minutes online trying to figure out what changed, only to realize that Visual Studio Code can glitch on absolute path resolution.