I've created a very simple app.nw package with the minimal 'hello world' setup, according to nw.js/README.md. It consists of only two files:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script>.
</body>
</html>
package.json
{
"name": "nw-demo",
"version": "0.0.1",
"main": "index.html"
}
It works fine when run from the console like this:
/Applications/nwjs.app/Contents/MacOS/nwjs myapp.nw
However when I double click myapp.nw in the Finder it opens the default nwjs files, not my app.
I am developing an app for non-technical users who will not open the Terminal. We can have them download and install nwjs.app into their Applications folder, but then we need them to be able to just download and double click the app package.
I was able to get my app to execute from a double click in the Finder by copying myapp.nw package into the Resources directory of a copy of nwjs.app and renaming it to app.nw as per nwjs packaging documentation, however this integrates our custom code into the very large nwjs.app distributable (93.8MB). This is an unacceptable size to ask our users to download each time.
How can I enable my node webkit package (which contains only our specific application code and assets) to be opened directly from OSX Finder?
You need to pack the file into an executable. For more information, check out this guide on the project git.
My recommendation is that you won't do it manually. Instead use grunt to pack your files. To get started, use yeoman and generator-node-webkit for a basic project layout and build script.
Then, making the executable is easy as:
grunt dist-mac
Related
I'm currently playing around with a MAUI Blazor app and set up Tailwind CSS instead of the default Bootstrap. This is done through Node.js for which I've set up an NPM script to build the CSS:
"scripts": {
"buildcss": "tailwindcss -o wwwroot/css/custom-tailwind.min.css --minify"
}
In the index.html I load this CSS file: <link rel="stylesheet" href="css/custom-tailwind.min.css" />.
Now, since Tailwind only includes the styles that my app actually uses (to minimize the file size), I want to rebuild this CSS file everytime I build my app. This is currectly done with a post build action:
<Target Name="BuildCSS" AfterTargets="PostBuildEvent">
<Exec Command="npm run buildcss" />
</Target>
The file is generated as expected, but when running the app, it doesn't seem to recognize the file and therefore no styling is loaded. Simply restarting the application after is enough for it to work, which means if the file already exists and is simply overwritten it works, but it annoys me.
Am I using the wrong build action or should this be done in a different way?
As a bonus question, is there a build action that will also be executed during Hot Reload?
I'm currently just testing it for a Windows app (net6.0-windows10.0.19041.0)
I use Visual Studio 2017, I downloaded the Bootstrap package but I have no idea what should I do next. I am using bundle file and package...
What should I do?
Also I downloaded a file from get bootstrap website but I don't know how to compile it!
The first way is to copy the css and js file to wwwroot/lib folder in your project.
The second way is to use BootstrapCDN if you want to skip the download.
A better way of using bootstrap in asp.net core project is to use LibMan(To be able to use LibMan you should have VS 2017 version 15.8 or higher.):
1.In Solution Explorer, right-click the project folder in which the files should be added. Choose Add > Client-Side Library. The Add Client-Side Library dialog appears:
2.Select the jsdelivr provider from the Provider drop down.
3.Type the library name to fetch in the Library text box.
4.Specify the project folder for storing the files in the Target Location text box.
5.Cilck Install button.
Then you could use the following code to reference the boostrap:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Note: As mentioned on the download site, this does not include jQuery, so if you want to use jQuery, you need to download that separately.
I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.
I am not sure how to actually run this example however.
I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.
However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.
I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?
I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.
ProseMirror is a well-behaved rich semantic content
editor based on contentEditable, with support for
collaborative editing and custom document schemas.
The problem is that the documentation on how to set
it up from nothing to a hello world using the demo
examples is non existent. All documentation assumes
you have it set up and working.
This guide is to help you get to "hello world" stage
• First setup rollup. Follow the instructions for that here.
You should now have the project on your computer
from this and when you open the html file in your browser see the "hello world" style screen.
• cd into learn-rollup project folder and npm install prosemirror module packages:
prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup
• In the learn-rollup index.html file add the following html
html code to add to learn-rollup index.html
The link to the css file
The tag in body that has id=editor
learn-rollup folder structure
• Create a copy of src/scripts/main.js and rename it
mainbackup.js.
• Now replace everything in main.js with code from prosemirror.net first example.
• Run \node_module.bin\rollup -c
• Reload .html to see prosemirror working.
There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})
Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.
Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
To get a minimal editor up and running with rollup first install rollup:
npm i -g rollup
Install the rollup resolve plugin:
npm i #rollup/plugin-node-resolve
Then add the following to the rollup.config.js file:
import resolve from '#rollup/plugin-node-resolve'
export default {
input: 'main.js',
output: {
file: 'build.js',
format: 'iife'
},
plugins: [resolve()]
}
Install prosemirror basic libraries:
npm i prosemirror-schema-basic prosemirror-state prosemirror-view
Create the main.js file with the following content:
import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'
let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})
Build your editor (to build.js):
rollup -c
Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
I went through #Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).
The code is from the official first example.
Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.
But shouldn't <div id="content"></div> gets added automatically? #Rob or The official first example didn't mention you have to add this div, no clue what went wrong.
I'm fresh Dart appretience and I'm trying the 'one-hour-codelab' tutorial. I'm using IntellijIDEA 14 and its Dart plugin.
When I build 'Debug', everything works OK in Dartium.
When I build 'Release', Dart code gets translated into Javascript, but HTML code is still referencing the Dart source file.
I assume there is some solution for this, do you know it?
Thanks
Rene
The source is meant to still point at the .dart files, since if the browser has a Dart VM in it, you want to use that rather than the generated JS. It's the job of the dart.js script (which is part of the browser package) to figure out if the browser you are running on has a Dart VM or not, and if not, to substitute in the appropriate JS scripts.
For example, the source of your index.html file might look like this:
<html><body>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body></html>
In browser with the Dart VM (like Dartium) the dev tools will show those same script tags. However, in vanilla Chrome or another browser, the HTML you see in the dev tools will look like this:
<html><body>
<script type="application/dart" src="http://localhost:8080/main.js">/script>
<script src="packages/browser/dart.js"></script>
</body></html>
This is because the dart.js script has replaced the main.dart script with the corresponding JS file.
If you aren't seeing this translation happen, make sure that you are including the dart.js script in your index.html file, and that you are using the browser package by adding it to the dependencies of you pubspec.yaml file:
dependencies:
browser: any
It's worth noting that the --mode=release option for the pub build command doesn't include the .dart files in its output, but other modes will (https://www.dartlang.org/tools/pub/cmd/pub-build.html). I suppose that since no browsers in the wild currently have a Dart VM in them, that pub build assumes you only want to release JS files. I suspect this might change if/when vanilla Chrome gets the Dart VM added in. In the meantime, after you build your project, if you want it to also work in Dartium, you'll need to add in the .dart files to the build output. If you wanted to get extra fancy, you could minify your Dart first by using dart2js with the --output-type=dart flag set (https://www.dartlang.org/tools/dart2js/#options).
How do I take the JS and CSS source for an app like the Iteration Tracking Board (https://github.com/RallyApps/app-catalog/tree/master/src/apps/iterationtrackingboard) or Release Burndown (https://github.com/RallyApps/app-catalog/tree/master/src/apps/charts/burndown) and turn that into HTML source that can be used as a Custom HTML app in a page in Rally?
Prerequisites:
Node.js
rally-app-builder
After source files are copied to a local directory (you may either fork the app-catalog repo, or download zip from the same location):
in terminal, cd to the app
call this command: rally-app-builder build.
As a result a deploy folder is created with App.html and App-uncompressed.html inside, and App-debug.html is created in the root folder of the app.
Copy/paste App.html or App-uncompressed.html file from deploy folder to the HTML section of the custom page in Rally.