I recently switched to the Vue 3 CLI. After using creating a Vue project I installed webpack and then added the following file to my project's base directory:
vue.config.js
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
},
chainWebpack:
config => {
config.optimization.delete('splitChunks')
}
}
My goal is to make custom elements using this great module: https://github.com/karol-f/vue-custom-element. It seems to work as intended, but when I run npm run build, all hrefs in my index.html file link to the root directory (href=/css/app.11f77a6e.css), so the browser looks in places like:
`file:///C:/css/app.11f77a6e.css`
How can I configure Webpack so that links to resources are relative and looked for in the dist folder?
I've tried adding a webpack.config.js file to my project's root with the following:
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist')
}
}
But it didn't help.
Here's my package.json
{
"name": "build-flow",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.5.21",
"vue-custom-element": "^3.2.6",
"webpack": "^4.28.4"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-service": "^3.3.0",
"vue-template-compiler": "^2.5.21"
}
}
Seeing file:/// URLs implies that you're not viewing the files through a dev server. You're probably opening up index.html directly (e.g., by double-clicking index.html). If that's the case, you need to start up a server in dist, and navigate to it from your browser:
Open a Terminal, and CD into <project_root>/dist.
Run python -m SimpleHTTPServer, which should print out something like Serving on 0.0.0.0 port 8000. Make note of the port number for the next step. (Alternatively, run http-server)
Open a browser, and navigate to http://localhost:8000.
Related
I built a library project (Vue 3, Vite) and I want to include it in a host project via package.json.
But I faced a problem where I can import the components and run a simple programme with those imported components but their styles are gone.
Please let me know what is wrong with my config. It doesn't make sense when I have to manually import css into my host project.
Just to clarify, I don't have any .css source files in my project. style.css was compiled from my *.vue components
This is the vite.config.ts for my library project. Everything that I need exported is in src/.
// Library project
import { defineConfig } from "vite"
import vue from "#vitejs/plugin-vue"
import typescript from '#rollup/plugin-typescript';
const path = require("path")
// https://vitejs.dev/config/
export default defineConfig( {
plugins: [{
...typescript( { tsconfig: "./tsconfig.json" } ),
apply: "build",
declaration: true,
declarationDir: "types/",
rootDir: "/",
}, vue()],
resolve: { alias: { "#": path.resolve(__dirname, "./src") } },
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "gsd-vue-egui",
// fileName: (format) => `gsd-vue-egui.${format}.js`,
},
rollupOptions: {
external: ["vue"],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: { vue: "Vue" },
},
},
},
server: {
port: 30001,
}
} )
And this is the relevant part of my package.json
{
"name": "gsd-vue-egui",
"private": true,
"version": "0.0.0",
"scripts": {
"preinstall": "npx npm-force-resolutions",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "npm run test:unit",
"test:unit": "jest --config=jest.config.js test",
"lint:css": "stylelint --formatter verbose --config .stylelintrc \".\" --fix",
"lint:eslint": "eslint --ext js,vue,ts \".\" --fix",
"lint": "npm run lint:css && npm run lint:eslint"
},
...
}
The structure of my dist/ folder after running npm run build is as follows:
dist/
|-components/
| |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css
You need to manually import your CSS because you are shipping JS and CSS files independently in your package. If you don't want to manually import your CSS, you need to package your SFC files for npm. This is the document for Vue 2, but its idea can totally apply to Vue 3.
Here are some points to note:
You must ship your .vue files along with your npm package by NOT adding the /src folder to the .npmignore file
In your host project, import your .vue file directly from your package import YourComponent from 'your-package/src/your-component.vue'
This approach will not work for anyone who wishes to use the component directly in a browser via the <script> tag, anyone who uses a runtime-only build or build processes which don’t understand what to do with .vue files
Some components might provide side effects like directives, or extend other libraries with additional functionality
Manually importing CSS files will never be a bad idea and almost all the Vue packages I know use that approach
I'm starting a CDK lambda project which gets the source code like this:
code: lambda.Code.fromAsset("resources"),
handler: "synthetic_test.main",
There's a single javascript file synthetic_test.js in that folder.
This seems to work but I can't figure out how to make it so that I could do:
const axios = require("axios");
in that file.
For some reason it seems to be able to import:
const AWS = require("aws-sdk");
but nothing else.
I did yarn add axios which added it to the package.json of my CDK project. But that does not really seem to help the lambda a lot.
The AWS Lambda runtime environment includes native language libraries and the relevant language-specific AWS SDK.
It does not contain arbitrary third-party packages. You need to either package those dependencies with your code or create a Lambda Layer that includes the dependencies and configure your Lambda function to use the Lambda Layer.
To package CDK app dependencies, see #aws-cdk/aws-lambda-nodejs and here.
I went with packaging dependencies with my code
My cdk went to
// 👇 define PUT account function
const putAccountLambda = new lambda.Function(this, "put-account-lambda", {
runtime: lambda.Runtime.NODEJS_14_X,
handler: "main.handler",
code: lambda.Code.fromAsset(path.join(__dirname, "/../src/put-account/dist")),
environment: {
REGION,
ADMINS_TABLE,
ADMINS_TABLE_PARTITION_KEY,
HASH_ALG,
}
})
With dist being the folder with a packed main.js file. And this file has a handler entrypoint. I had to update the package.json of these lambdas with packed dependencies.
{
"name": "put-account",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production --env env=prod",
"build:dev": "webpack --mode=development --env env=dev"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"aws-sdk": "^2.1058.0",
"crypto": "^1.0.1",
"uuid": "^8.3.2"
}
}
And I updated the package.json of my cdk project to these scripts.
"build": "tsc && npm run build:webpack",
"build:webpack": "for file in ./src/*; do (cd $file && npm i && npm run build) & done",
"build:beta": "tsc && npm run build:webpack:beta",
"build:webpack:beta": "for file in ./src/*; do (cd $file && npm i && npm run build:dev) & done",
Notice that my file structure is as follows:
./
bin
lib
src
package.json
With src holding the source code for my project's lambdas.
I am not sure if you are familiar with webpack, but I have divided my webpack configuration in common, dev, prod.
A dev webpack configuration is specially useful for debugging because otherwise you lose line numbers among other useful information when something goes wrong on runtime.
I have been following this tutorial online: https://www.youtube.com/watch?v=TOb1c39m64A.
I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.
These are the only packages I have installed so far:
"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }
I have a script called "start" that runs webpack serve, which runs successfully and displays:
<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/
As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.
I have also looked at my hosts file and added a line, if you think it could help I will paste it here.
As requested here is my package.json (most of it already posted above):
{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }
Seems even in 7 months the tutorial has gone out of date.
Fix for anyone like me who is following it on a windows pc.
Added a webpack.config.js file in my root directory that looked like this:
module.exports = {
mode: "development",
devServer: {
static: "./dist",
},
};
In the tutorial it uses contentBase as the key in the devServer object, a property that appears to have been deprecated in a recent update, so static is used as a replacement.
Now everything is served to localhost and it works.
You just have to create "public" directory in root folder and move your html, css and images files and folder there and your error will be resolved
I wrote a small Excel add-in using node.js with jQuery. The source code was generated by "yo office". Below is the content of package.json file.
{
"name": "my-office-add-in",
"description": "",
"author": "",
"version": "0.1.0",
"scripts": {
"start": "browser-sync start --config bsconfig.json",
"validate": "./node_modules/.bin/validate-office-addin"
},
"dependencies": {
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"office-addin-validator": "^1.0.1",
"office-ui-fabric-js": "^1.3.0"
},
"devDependencies": {
"browser-sync": "^2.18.5",
"#types/office-js": "^0.0.37"
}
}
I need to get rid of BrowserSync usage and use another command to start my application. The reason I need to do that is my Excel add-in is being placed onto a shared folder and used by multiple users. BrowserSync synchronizes views in browsers of different users who work simultaneously.
Can someone show me the alternative solution? Thanks in advance.
You can use any package that spins up an https web server.
http-server is an alternative you can get using npm.
https://www.npmjs.com/package/http-server
To install:
npm install http-server --save-dev
From there change your start script to "start": "http-server --ssl"
That will start a server at your root directory and you can navigate to your index file.
I have built a web app on top of Stephen Grider's ReduxSimpleStarter, a react-redux boilerplate. It uses Webpack for bundling. Now I want to host my app on firebase. When I do so, the bundling doesn't work, and I am left with a simple index.html.
Could someone please explain how I trigger Webpack bundling for an app that is not locally hosted?
These files might be relevant, though I am not sure.
//package.json
{
"name": "testapp",
"version": "0.0.0",
"description": "testapp",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.9.1",
"babel-preset-stage-1": "^6.1.18",
"jquery": "^2.2.0",
"lodash": "^3.10.1",
"material-ui": "^0.14.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.0.4",
"redux-promise": "^0.5.1"
}
}
.
//webpack.config
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I found the solution. Include "webpack": "^1.12.9" in the dependencies object. Then, change
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
to
"scripts": {
"start": "node ./node_modules/webpack/bin/webpack.js"
},
I know it is answered but this is an additional note to the answer which will help a lot.
Tip 1:
When you deploy the application on Firebase and try to access browser (especially React,Redux) application you may get an error saying :
can not find module "run" in bundle.js
So as mentioned in the answer it is must, and after this- you must execute the command: npm start
This command will regenerate the bundle.js and will not include/require the "run" module which we were using while development. After this- you can deploy the latest bundle.js to the server.
Tip 2: In webpack.config inside output:{...} section you should set path and publicPath to a new directory i.e. /public/. Otherwise on Firebase host when you mentioned 'public' directory as default directory to deploy - then it will create problem and application will not run on Firebase server.
Note: actually I am not sure and do not know how to tell firebase to use files on my root and not in my 'public' folder
But I think that outputting the Webpack generated files and keeping other public files (css, html) inside public folder is good as otherwise firebase deploy may upload other files sitting in root directory as well. (correct me if I'm wrong).
Ok so finally when you are updated the webpack.config output values as:
output: {
path: __dirname+ '/public',
publicPath: '/public/',
filename: 'bundle.js'
}
Then (finally making sure you are done with Tip.1 as well) and run the command to get latest bundle.js npm start. And finally you are good to go and deploy using:firebase deploy I believe you may have followed the initial steps of initiating firebase login and other init commands before running last deploy command.
Note: The "firebase serve" command is also helpful to debug and test if application is running well on local machine then it will run well on live Firebase server as well.