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.
Related
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 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.
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.
With almost every npm package that I'm trying to use with vue.js 1.0 I receive this error:
{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:117:15)
It drives me nuts! I'm using vue.js with browserify. Looked everywhere on the web:
https://github.com/webpack/css-loader/issues/240
https://github.com/webpack/css-loader/issues/180
https://github.com/webpack/css-loader/issues/295
https://github.com/webpack/css-loader/issues/163
Nothing seems to work! What am I doing wrong!?
2 packages where I've this problem:
https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor
My gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');
elixir(mix => {
mix.browserify('main.js');
mix.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
]);
mix.stylus('app.styl');
});
A solution would really help me out.
--EDIT--
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-stylus": "^2.0.3",
"vue-html5-editor": "^0.5.1"
},
"dependencies": {
"browserify": "^13.1.0",
"laravel-elixir-vueify": "^2.0.0",
"normalize-css": "^2.3.1",
"nprogress": "^0.2.0",
"stylus": "^0.54.5",
"sweetalert": "^1.1.3",
"vue": "^1.0.26",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vue-spinner": "^1.0.2",
"vue-upload-component": "^2.0.0-beta"
}
}
Those are webpack packages and you are using browserify. If you need to use webpack packages you should be using webpack as your bundler.
I did have a go at installing the vue-upload-component package to see how easy it would be with browserify and elixir but it's awkward to say the least. I didn't get it working because it uses babel transforms to compile the vue files, so first you need to pull them in manually and then you would likely need to write an elixir extension to use those transforms to get it to work. Obviously each webpack package will be different so you would need to do that each time you install one, which is hardly convenient.
I had some luck changing the configuration output of the Vue component I wanted to use to use webpack -p instead of just webpack.
I could then take that output without the hot module code and put it through browserify:
browserify file.js --standalone SomeLibrary > file.browser.js
Where file.js is the webpack -p output, SomeLibrary is the name you want on the global window scope from the browserify packaging, and file.browser.js is your resultant file to include in your project.
I'v just deployed my app to Heroku but when I run it in a browser the network tells me it cannot find the system.js file which lives in jspm_packages/system.js
The app works fine locally so I presume heroku is not installing jspm? Do I need to add a script just for Heroku?
here is the jspm settings in my my package.json
"jspm": {
"directories": {
"baseURL": "www"
},
"dependencies": {
"google-maps-api": "npm:google-maps-api#^1.1.0",
"react": "npm:react#^0.14.2",
"react-dom": "npm:react-dom#^0.14.2"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
},
"devDependencies": {
"babel-eslint": "^4.1.3",
"eslint-plugin-react": "^3.5.1",
"jspm": "^0.16.14"
}
You do not need to submit your jspm packages on heroku. For production run:
jspm bundle-sfx lib/main
and replace your scripts with:
<script src="build.js"></script>
(or wherever is your bundled javascript file is)