I build a simple chrome extension and would like to publish it.
The problem is, I don't know how to proceed with some css files.
I used browserify and yarn to install bulma.
in my main.js I got the following line:
import Styles from './styles.css'
and the first line of styles.css looks like this:
#import '../node_modules/bulma/css/bulma.css';
Here's my build command from package.json
cross-env NODE_ENV=production browserify -g envify -t cssify src/main.js | uglifyjs -c warnings=false -m > dist/build.js
and my index.html (popup.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
It works fine if I build it locally. But the only file generated is src/build.js. If I delete node_modules folder, the popup obviously look not good.
You either switch to sass and use something like Gulp together with sass for Bulma and compile your sass files together with your node_modules. The script below compiles down sass/scss style files using gulp-sass.
Or, since bulma seems to use css-loader(haven't looked this up) you can use the extract-loader to extract css and html from your bundle file.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sass = require('gulp-sass');
// Set your build paths here
var sassPaths = [
'node_modules/some-library/scss/', // node modules
'scss/' // your style files
];
gulp.task('sass', function() {
return gulp.src('scss/app.scss') // where you've imported all your own style files
.pipe($.sass({
includePaths: sassPaths,
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(sass())
.pipe(gulp.dest('/css'));
});
Then in your package.json you can set up a build script e.g. "buildcss": "gulp sass",
Ended up doing the following:
yarn add browserify-css --dev
https://github.com/cheton/browserify-css
then add the following to build command
-t [ browserify-css --minify=true --output dist/bundle.css]
full command:
cross-env NODE_ENV=production browserify -g envify src/main.js -t [ browserify-css --minify=true --output dist/bundle.css ] | uglifyjs -c warnings=false -m > dist/build.js
then just update index.html/popup.html with
<link rel="stylesheet" href="dist/bundle.css">
Related
So I've been configuring a MERN app with a main package that runs an Express server, and a client folder which contains the React front end and has its own package. To test the client I've been using webpack-dev-server to run an HTML file within the client/public folder that links a Webpack bundle in a dist folder. The HTML file:
<!DOCTYPE html>
<html>
<head>
<title>React Config</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
The relative path for the bundle is correct, and it works fine using WDS. However, when I try to serve this file via my Express server, I get a 404 error for the bundle file. In my server.js:
app.use(express.static('client'));
const appPage = path.join(__dirname, './client/public/index.html');
app.get('/', function(req, res) {
res.sendFile(appPage);
});
This does serve the HTML file correctly, but when I navigate to the local server it's trying to find bundle.js at http://localhost:3000/dist/bundle.js, instead of http://localhost:3000/client/dist/bundle.js. Furthermore, even when I change the path in the HTML to point to the right location, it 404's anyway.
So 2 questions:
1) How can I configure the paths for the Webpack bundle to be accessible both from WDS run within the client folder and from my Express server in the main package?
2) Why is the bundle not being found by Express even when I alter the path to be correct? I've included the entire client folder as static for the server.
You should not use webpack-dev-server for production, webpack-dev-server not build the index.html file, webpack-dev-server is only for developers.
You can use this command to build it:
webpack --config ./webpack.prod.js --mode production
Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs
I'm trying to build separate HTML files using an index.ejs using html-webpack-plugin.
My index.ejs has the following block of code.
<% if (process.env.NODE_ENV === 'production') { %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<% } %>
I only want to load these scripts in production.
In my webpack file I'm loading HtmlWebpackPlugin to specify the location of the ejs template.
plugins: [
new HtmlWebpackPlugin({
template: 'index.ejs'
}),
...
When I run webpack in production mode, with --env.prod, it properly builds the file into my public directory. But when I run with --env.dev, this plugin does not run.
How can I run HtmlWebpackPlugin in development mode to build an HTML file specific to my dev environment?
You can use ejs-render-loader package.
I'm trying to build pty.js for use in node-webkit (i.e. nw.js) v0.8.6:
mkdir testapp && cd testapp
nvm use 0.10.36
npm install -g nw-gyp
npm install pty.js
cd node_modules/pty.js
# Build the native addon for node-webkit v0.8.6:
nw-gyp configure --target=0.8.6 && nw-gyp build
The output ends with gyp info ok.
With a simple app.js and index.html, the app launches with no errors in the JavaScript console:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="app.js"></script>
</body>
</html>
// app.js
var pty = require('pty.js');
var term = pty.spawn('bash', [], {
name: 'xterm-color',
cols: 80,
rows: 30,
cwd: process.env.HOME,
env: process.env
});
term.on('data', function(data) {
console.log(data);
});
term.write('ls\r');
term.resize(100, 40);
term.write('ls /\r');
console.log(term.process);
package.json:
{
"name": "testapp",
"main": "index.html"
}
I want to support ES6 and JSX compilation via webpack by bundling app.js into bundle.js:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="bundle.js"></script>
</body>
</html>
Bundling app.js:
npm install -g webpack
webpack app.js bundle.js --target="node-webkit" # This fails
But webpack fails with this error:
Hash: 6c3cd8b4ec249ab8fd05
Version: webpack 1.6.0
Time: 76ms
Asset Size Chunks Chunk Names
bundle.js 21244 0 [emitted] main
[0] ./app.js 311 {0} [built]
+ 10 hidden modules
ERROR in ./~/pty.js/build/Release/pty.node
Module parse failed: /Users/Spencer/Desktop/testapp/node_modules/pty.js/build/Release/pty.node Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/pty.js/lib/pty.js 10:10-46
Do I need to use a loader when requireing native binaries (like pty.node)? The webpack documentation says that the "node-webkit" target "supports native node.js modules"; perhaps it doesn't yet support native addons?
While I wasn't able to get webpack working, I was able to get ES6 + JSX working by using require('babel/register'):
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<main></main>
<script>
require('babel/register');
require('./js/app');
</script>
</body>
</html>
// ./js/app.js
import React from 'react';
React.render(
<span>Hello World!</span>,
document.querySelector('main')
);
Posting here as requested original post can be found here
Hello, I would like to build ember.js using Ubuntu 13.
I have cloned the official Github project, cd into the project and as described in the readme file I did:
bundle install
rake dist
no error is shown on screen and as a result I get a directory shown in the image
I would like to use ember and ember-data, so I include
ember.js
ember-data-deps.js
files in my test project.
The problem is that I am getting a TypeError: App.Router is undefined
I am using this at my client.js file to init ember
this.App = Ember.Application.create();
App.Router.map(function() {
this.route('contributors');
this.route('contributor', {path: '/contributors/:contributor_id'});
});
Am I doing something wrong in the build process?
Should I include some other js files in my project?
Thank you in advanced.
The TypeError: App.Router is undefined error is because ember.js is not loaded correctly or in the correct order.
To get ember-data (that is separate from ember.js) you have to clone this repo (https://github.com/emberjs/data) and follow the build instructions in the readme file, it's straight forward, and once you have the dist directory from the ember-data build process get the file ember-data.js development version or ember-data.min.js for production (well, production... ember-data is still considered unstable for production environments).
here is a simple ember project setup using ember-data:
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ember app</title>
</head>
<body>
<script type="text/x-handlebars">
hello world!
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var App = Ember.Application.create({
ready: function () {
console.log("app started...");
}
});
hope it helps