I started experimenting with nwjs ( node-webkit ) .
But i seem to be doing something wrong i have 2 file in a folder :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Node Webkit</title>
</head>
<body>
<h1>Hello Node Webkit</h1>
</body>
</html>
package.json
{
"name": "myapp.helloworldapp",
"version": "1.0.0",
"description": "A test app",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
i zip up both files at ones ( i don't zip the folder ) and i rename the extention from .zip to .nw but nothing happens when i try to open it with the nwjs app .
i'm working from a mac if that could have something to do with it ?
I would follow the steps outlined in their docs.
From the command line:
Go to your project directory a la cd ~/Projects/my_app
Run zip -r ../${PWD##*/}.nw *
Your fully-prepared .nw file shall be located
right outside of your project directory
Cake!
Related
Following folder structure and files are given:
.
├── package.json
└── scripts
├── hello-word.js
└── package.json
// package.json
{
"name": "yarn-bin",
"version": "1.0.0",
"private": true,
"license": "ISC",
"workspaces": [
"scripts"
]
}
// scripts/package.json
{
"name": "#yarn-bin/scripts",
"version": "1.0.0",
"license": "ISC",
"bin": {
"hello-world": "./hello-world.js"
}
}
// scripts/hello-world.js
#!/usr/bin/env -S npx node
console.log("Hello World")
This is a very simple yarn workspace setup where an executable is specified in a workspace package ("bin" in scripts/package.json).
Executing ./hello-world.js works just fine (with prior chmod +x hello-world.js).
Question
Is it possible to install this executable in the workspace itself?
(To break it down: I would like to execute the script from anywhere in the workspace e.g. with npx hello-world)
Like I said in the comments what you got here is almost complete.
You did have a typo in your file name but I assume that's a typo that happened while you copied this over to SO.
I did change the hash bang to make sure you run this via node.
You cannot run this via npx as npx will go online and look through the registry.
.
├── package.json
└── scripts
├── hello-world.js # not "hello-word.js"
└── package.json
Root package.json:
{
"name": "yarn-bin",
"version": "1.0.0",
"private": true,
"license": "ISC",
"scripts": {
"hello": "yarn hello-world"
},
"workspaces": [
"scripts"
]
}
scripts/package.json
{
"name": "#yarn-bin/scripts",
"version": "1.0.0",
"license": "ISC",
"bin": {
"hello-world": "./hello-world.js"
}
}
And script/hello-world.js
#!/usr/bin/env node
console.log("Hello World")
With that setup running yarn hello in the root folder will yield:
$ yarn hello
yarn run v1.22.10
$ yarn hello-world
$ /path/to/folder/node_modules/.bin/hello-world
Hello World
✨ Done in 0.25s.
While I added an npm script into the root package.json you can also execute bins via just running yarn hello-world anywhere from within your project.
I was able to deploy a Create-React-App and express back-end with now.sh
but the problem is that it only gets the home route(I can route to /about from home but on page reload/refresh, i get a 404 error). I have tried several config. Please i need help.
"public": false,
"version": 2,
"builds": [
{
"src": "server/index.js",
"use": "#now/node",
"config": {
"maxLambdaSize": "20mb"
}
},
{
"src": "package.json",
"use": "#now/static-build",
"config": {
"distDir": "build"
}
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "/server/index.js"
},
{
"src": "/(.*)",
"dest": "/build/$1"
}
]
}
This sounds like a problem described here - https://create-react-app.dev/docs/deployment/
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html. For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html. This may not work for client-side routers which expect the app to be served from /. Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url": ".",
This helped when I had 404 with Zeit - https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb -
In order to solve the 404 error message, we have to make sure that when a user goes to any URL which is not the root URL (e.g. www.myapp.com/something or www.myapp.com/dashboard/example) and they have never loaded our web app before, they are redirected to the root URL. Once they have loaded the root URL then they can be redirected back to the page they were trying to access and everyone is happy!
Step 1 - in your project's public folder make another package.json file -
{
"name": "myapp-spa",
"version": "1.0.0",
"scripts": {
"start": "serve --single --cache=60000"
},
"dependencies": {
"serve": "latest"
}
}
Step 2 - Configure the 404 page
Now that our files are being served, if a person goes to a non-root URL, the server will look for a 404.html file to send them instead. This is our chance to redirect them and take them to the index.html page. Put the 404.html file in the same public folder as the index file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404 Not Found | My App</title>
</head>
<body>
<script>
(function redirect() {
if (document && document.location) {
document.location.replace(`/?redirect=${encodeURIComponent(document.location.pathname)}`);
}
}());
</script>
</body>
</html>
Step 3. - Prepare for deployments
Now that, we have our redirect code, all we have to do is add a deploy command to our original myapp/package.json (this is not the file we created earlier):
{
"scripts": {
...
"deploy": "yarn run build && now ./build --name=myapp-spa",
"start": "react-scripts start",
"build": "react-scripts build",
...
}
}
Sweet, now all we need to do is call yarn run deploy and our app should stop getting the 404 error pages.
Step 4: Clean up
In order to get back to the page we originally requested e.g. myapp.com/something we need to redirect the page to the ?redirect parameter we set earlier in the tutorial. To do this, we need to install the query-string library to parse the parameter. Then you can include the following code into your app in a place that loads after your routing code loads.
const queryString = require('query-string');
...
const params = queryString.parse(document.location.search);
const redirect = params.redirect; // this would be "abcdefg" if the query was "?redirect=abcdefg"
if (document.location.pathname === '/' && redirect) {
document.location.assign(`${document.location.origin}/${redirect}`);
}
It’s important that you do not redirect the user with the above code until after the routing code is cached in the browser. Once you’ve finished, your app should be working just as it should be.
Basically pasted the whole thing, but make sure to check the article.
Apparently there's another possible solution, might be worth trying:
{
...
"builds": [
{ "src": "build/**", "use": "#now/static" }
],
"routes": [
{
"src": "/(.*)\\.(.*)",
"dest": "/build/$1.$2"
},
{
"src": "/",
"dest": "/build/index.html"
},
{
"src": "/(.*)",
"status": 301, "headers": { "Location": "/" }
}
]
I installed html5-boilerplate and the lite-server modules using npm install html5-boilerplate --save-dev and npm install lite-server --save-dev respectively.
I had to copy index.html from the node_modules folder in order to serve up the content using npm start. All I see is the <p> tag being rendered as shown in this image.
This is how my working directory looks like.
Directory of D:\Full_Stack_Web_Development
27-02-2019 09:58 <DIR> .
27-02-2019 09:58 <DIR> ..
27-02-2019 10:05 1,871 index.html
27-02-2019 09:55 <DIR> node_modules
27-02-2019 09:55 125,319 package-lock.json
27-02-2019 09:57 739 package.json
3 File(s) 127,929 bytes
3 Dir(s) 213,613,010,944 bytes free
D:\Full_Stack_Web_Development>
and this is how my package.json file looks like. index.html can be viewed here
{
"name": "full_stack_web_development",
"version": "1.0.0",
"description": "beginning front end development using html5 boilerplate",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/alokananda-y/Full_Stack_Web_Development.git"
},
"author": "alokananda y",
"license": "ISC",
"bugs": {
"url": "https://github.com/alokananda-y/Full_Stack_Web_Development/issues"
},
"homepage": "https://github.com/alokananda-y/Full_Stack_Web_Development#readme",
"devDependencies": {
"html5-boilerplate": "^7.0.1",
"lite-server": "^2.4.0"
}
}
H5BP is pretty flexible, so there are a few ways to do what you want to do. You can:
Copy the entire contents of node_modules/html5-boilerplateup to the root level of your folder, not just the index.html. The basic folder structure you're aiming for is what we have in our dist folder.
You can change all of the links in the index.html to point to the h5bp resources in node_modules/html5-boilerplateSo, instead of <link rel="stylesheet" href="css/main.css"> you would do <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css">
The easiest is actually to download the latest version, unzip the folder and then run npm install --save-dev lite-serverinside that folder. That way the only dependency would be lite-server and h5bp would be ready to go. This is what I would do. We offer the project via npm but it's not really a dependency in the way that other packages are it's the starting point for a whole site or application.
All our server projects contain a git submodule folder (let's say modules), which contains our custom modules/components.
Such module dependencies are installed locally (see serverApp/package.json) so that we don't have to include the whole submodule folder to the final rpm. What I'm having trouble with is limiting the number of files included in node_modules.
The submodule structure looks like the following:
modules
|--loader
|--dist => compiled js files here that are created when installing the module
|--ts => contains typescript files that shouldn't be included in node_modules
|--package.json
|--tsconfig.json
|--more modules
|--.gitignore
Adding an .npmignore file inside modules/loader doesn't seem to help as the whole folder is copied.
modules/loader/tsconfig.json:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true
}
}
modules/loader/package.json:
{
"name": "loader",
"version": "1.2.0",
"private": true,
"description": "",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"preinstall": "npm run build",
"build": "../../node_modules/typescript/bin/tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"#types/lodash": "^3.9.3",
"#types/nomnom": "0.0.28",
"#types/yamljs": "^0.2.30",
"lodash": "^3.9.3",
"nomnom": "^1.8.1",
"yamljs": "^0.2.1"
},
"devDependencies": {
"typescript": "~2.3.4"
}
}
serverApp/package.json:
{
"name": "my-server-app",
"version": "2.3.0",
"description": "",
"main": "myServerApp.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "private",
"dependencies": {
"loader": "file:modules/loader"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13"
}
}
I'm not sure if it has to do with the fact that we have a .gitignore file or because the module is not published and installed locally.
npm version => 5.3.0
EDIT
Doesn't work with specifying the "files" in modules/loader/package.json either
As after checkout the issue I found out below useful points which need to mention out :
We use a .npmignore file to keep stuff out of your package.
If there's no .npmignore file, but there is a .gitignore file, then npm will ignore the stuff matched by the .gitignore file.
If you want to include something that is excluded by your .gitignore file, you can create an empty .npmignore file to override it.
Like git, npm looks for .npmignore and .gitignore files in all subdirectories of your package, not only the root directory.
Similar to .gitignore file .npmignore also follow these rules
Blank lines or lines starting with # are ignored & Standard glob patterns work.
You can end patterns with a forward slash / to specify a directory.
You can negate a pattern by starting it with an exclamation point !.
By default, the following paths and files are ignored, so there's no need to add them to .npmignore explicitly
Additionally, everything in node_modules is ignored, except for bundled dependencies. npm automatically handles this for you, so don't bother adding node_modules to .npmignore.
Testing whether your .npmignore or files config works
If you want to double check that your package will include only the files you intend it to when published, you can run the npm pack command locally which will generate a tarball in the working directory, the same way it does for publishing.
And you can also checkout same issue here Consider methodologies for reducing the number of files within node_modules #14872
Thanks.
Did you checked with node 0.6.13 / npm 1.1.9? This issue is common in npm 1.1.4 .
have a look on this link
You mentioned that you do not want to include "whole submodule" into the "final rpm", by which I presume the package you will finally prepare. I reproduced similar setup and added a '.npmignore' to ignore "submodule" which I installed using npm install --save ./task_in where 'task_in' was my module kept along side of the main package's('task') 'package.json'.
And when the final package was prepared using npm pack while being in the 'task' folder, I got a package(a tar file) without the folder('task_in') as indicated in the '.npmignore'.
While working, though, I found that the module 'task_in' folder was copied to 'node_modules' which is automatically not included in the final package( refer here). Also, while the package is prepared, ".gitignore" is over-ridden by ".npmignore".
So, this is my "two cents" and I hope it helps you.
Background
I am porting some npm scripts to Webpack loaders to better learn how Webpack works and I’ve got everything working except for my Mocha tests: I have one failing test, but it is not showing that Mocha is being run with the mocha-loader or that the test is failing:
Question
What do I need to do differently to get all src/**/*.test.js files to run with with Mocha in Webpack?
Steps to reproduce
Clone https://github.com/trevordmiller/webpack-loaders-playground
Run npm test to see how tests should work
Run npm run dev to see how tests don't run with Webpack
Mocha loader won't run tests while building, it's used to create a bundle specifically containing your tests which you can then run from your browser.
I would recommend creating a separate webpack config file for your tests, which you can then host on a webpack-dev-server that uses a different port from your application. Here's an example that's more-or-less the pattern that I use for my own projects (as of writing this answer):
webpack.tests.config.js
module.exports = {
entry: 'mocha!./tests/index.js',
output: {
filename: 'test.build.js',
path: 'tests/',
publicPath: 'http://' + hostname + ':' + port + '/tests'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader']
},
{
test: /(\.css|\.less)$/,
loader: 'null-loader',
exclude: [
/build/
]
},
{
test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
loader: 'null-loader'
}
]
},
devServer: {
host: hostname,
port: port
}
};
tests/index.js
// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;
package.json
"scripts": {
"test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
"devtest": "webpack-dev-server --config webpack.tests.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
}
test.html
<!DOCTYPE html>
<html>
<head>
<title>Mocha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
<script src="/tests/test.build.js"></script>
</head>
<body>
</body>
</html>
Then run npm run devtest, open http://localhost:<port you picked>/webpack-dev-server/test.html, and mocha should run your tests.
If you don't require CSS/LESS or images through your modules, you can remove those loaders from webpack.tests.config.js.
With hot loading enabled this is a really great setup because I can have both my application and my tests running in different browser tabs, then update my code and see my changes and my tests re-running immediately.
You can also run npm run test to execute the same tests through the command line.
Hope this helps.
I liked JimSkerritt's answer, but couldn't get it to work on my computer for some reason. With the two config files below you can run the app via:
npm start // then http://localhost:8080/bundle
and run your tests with:
npm test // then http://localhost:8081/webpack-dev-server/test
both servers auto-reload && you can run both simultaneously!
Config Files
webpack.config.js
module.exports = {
entry: "./index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
package.json
{
"name": "2dpointfinder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline",
"test": "webpack-dev-server 'mocha!./tests/test.js' --output-filename test.js --port 8081"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.19.0",
"style-loader": "^0.12.4"
},
"devDependencies": {
"mocha": "^2.3.3",
"mocha-loader": "^0.7.1",
"should": "^7.1.0"
}
}