I am using Grunt and it is watching files in my src folder. However the baseDir is set to src so it is serving files from that point, however it can't see back to the node_modules folder.
How can I set grunt to serve from the correct folder but load the necessary packages that I need to load from the node_modules folder?
Sounds like what you mean is that you're using grunt to start a local web server? If so, then there isn't a good answer for you as a web server will only have access to files in its base directory. That said, if you need to access a file in node_modules/ from a web request you could add a copy task to move those files into a subdirectory within your baseDir.
Here's an example of using jQuery via node_modules - in your Gruntfile.js:
copy: {
vendorJS: {
files: [{
expand: true,
cwd: 'node_modules/jquery/dist/',
src: ['jquery.js'],
dest: 'src/vendor/'
}]
}
}
Then you would need to change how you pull in that file in the browser to match the src/vendor/ directory.
Related
I'm having trouble configuring vite.config.js so that I can have both my Vue app and a service worker file live in the dist folder. My service worker was working with webpack previously but I've just upgraded to Vite and I'm having trouble configuring the build. My goal is to have my dist folder look like:
dist
|- index.html
|- sw.js
|- assets
|- app.[hash].js
I tried various different configurations but none of them have worked:
An approach that is recommended by Workbox. It seems like this doesn't work because of what is mentioned in this comment.
After reading that comment I tried to separate the logic out into a separate file (vite-sw.config.js) and running vite build -c vite-sw.config.js. This successfully generated the file I wanted but I couldn't figure out how to get that file mixed in with the original build. Is there a way to combine vite build and vite build -c vite-sw.config.js so that they both output to the same dist directory without overriding each other?
I found this alternative approach which successfully created the folder structure I wanted in dist but I was unable to adjust the format of the service worker file so I got Cannot use import statement outside a module (at sw.js:1:1) in the browser. Is there some way to use this method and somehow configure the format of the service worker file?
Any other ideas? I've been pretty stuck on this for a while. Thanks!
Try changing your configuration like this:
export default defineConfig({
build: {
rollupOptions: {
output:
{
format: 'es',
strict: false,
entryFileNames: "[name].js",
dir: 'dist/'
}
}
},
.
.
.
});
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
Using NPM Workspaces, I'm sharing one package (components) with others (webapp1 and webapp2). Something like this:
root
apps
webapp1
webapp2
packages
components
Everything is working well, but everything inside components, include source code in the src folder is being shared. Since components' compiled output folder is dist, I'd like to only share that folder. This is how it looks in the root node_modules:
The problem is that when I need to import in webapp1 or webapp2, my import path has to include the dist folder. Here's the intellisense that I get from VS Code:
And this is how I import in webapp1 and webapp2:
import Center from '#mycompany/components/dist/Center'
While everything works, how can I set up my NPM Workspaces so that only the contents of the dist folder is shared in its root?
I've tried NPM's files and .npmignore inside the components folder to ignore everything except for the dist folder, but that doesn't seem to work. The main property in package.json for components is also set to point to dist/index.js:
"main": "dist/index.js"
Interestingly, if I want to import dist/index.js file, I can do it without dist:
import foo from '#mycompany/components'
...however, importing anything other than dist/index.js requires dist to be included in the path.
You should treat the packages folder as a collection of dist folders in your use case.
In this scenario, you would move your packages/components/src folder somewhere else in your project and then build to packages/components instead of packages/components/dist
root
apps
webapp1
webapp2
packages
components
src
components
I have a similar setup in this tooling monorepo I created
An alternative to #nicksaroba's approach, if you don't want to restructure your project layout, you can just setup an alias:
// apps/webapp/webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
"components": "#mycompany/components/dist/"
}
},
// ...
};
I have a Vue Cli 3 app which, when built, creates a bundle of web components in the "dist" directory.
I'm looking for a way to be able to browse the files within the "dist" directory when running npm run serve, which starts the webpack dev server.
When I do this now (i.e., something like browse to http://localhost:8083/dist/component.js), I'm simply presented with the index.html file found in the public directory.
How can I configure via the vue.config.js file the ability to have the devserver serve up files in the "dist" directory?
devServer is intended to provide development environment with configurations to apply certain loaders, plugins, etc. What you are looking for is a way to serve locally hosted files as a working application. These are two different purposes and I would not recommend adjusting devServer config for such purpose.
There are easy ways to serve static files on local machine.
One of the simplest is to use live-server, serve or similar.
In order for it to work with live-server just few steps are required:
1) Install
npm install -g live-server
2) In terminal navigate to the folder where static files are located (e.g. project-folder/dist/
3) Run live-server command.
This will open a browser tab with index.html as an entry point and will simulate a webserver on a local machine. There are many more options available in docs.
But this will serve the purpose and will not interfere with devServer purpose.
Not able to load js files from local where as CDN path working fine in Dojo 2 application. Once included custom JavaScript files using script tag in index.html. But in browser it shows the error 404 file not found.
Please suggest as i need these for my Dojo 2 application.
This is my how i am using script tag to include
script src="assets/js/jquery.js" type="text/javascript"
Currently, the Dojo 2 build does not copy external assets to the build directory, but we are working on a way of specifying such assets in the .dojorc config (index.html is not/will not be scanned for assets). In the meantime, another means of delivering static assets will be required (for example, configuring the assets/ path at the server level).
Assuming you are using the dojo 2 cli you need to move your assets folder into the root of you application, this is in the dojo 2 build docs:
While most assets will be imported by modules in the src/ directory and therefore handled by the main build pipeline, it is often necessary to serve static assets or include assets in the HTML file itself (e.g., the favicon).
Static assets can be added to an assets/ directory at the project root. At build time, these assets are copied as-is without file hashing to output/{mode}/assets, and can be accessed using the absolute /assets/ path. For example, if users need access to a static terms of service document named terms.pdf, that file would added to assets/terms.pdf and accessed via the URL /assets/terms.pdf.
The build also parses src/index.html for CSS, JavaScript, and image assets, hashing them and including them in the output/{mode}/ directory. For example, it is common for applications to display a favicon in the URL bar. If the favicon is named favicon.ico, it can be added to the src/ directory and included in src/index.html with . The build will then hash the file and copy it to output/{mode}/favicon.[hash].ico.
But another option is to add a new npm command "move-assets": "cp -R ./src/assets ./output/dist/assets" to you package config
"scripts": {
"start": "dojo build --mode dev --watch memory --serve",
"build": "dojo build --mode dist && npm run move-assets && npm run move-assets",
"move-assets": "cp -R ./src/assets ./output/dist/assets"
}
This will move your assets into the build output folder ./output/dist