how to use the webodf editor in localhost with node.js - node.js

I did not find any tutorials to how to run the webodf i read his apis and source code i am getting how to start it can anybody share the idea.
- WebODF version 0.5.10-8-gf5949f3
-- Found Java: /usr/bin/java (found version "1.7.0.91")
-- external downloads will be stored/expected in: /home/peoplelink/build/downloads
-- Installed Node.js found: /usr/bin/nodejs - 0.10.25
-- good Node.js found: 0.10.25 (0.10.5 required.)
-- npm found: /usr/bin/npm
-- Android was not found: APK will not be built.
JS file dependencies were updated.
-- Configuring done
-- Generating done
-- Build files have been written to:
i got this but i am not getting to webodf.js file in it i am missed out anything.

I am not not sure what you currently have . But This is how you can configure an application using node.js to serve html files and view/edit odf files.
Lets Start with your Node.js Server
First Create an index.js file(name it whatever you want)in our application directory,then initialize node application using node init.
We will have following folder structure : -
./ document-editor
../app (our html code and libraries)
../index.js
../package.json
../And some other auto-generated files.
Include all the modules necessary.We are going to use Express,Multer and
other util libraries.
var express = require("express");
var multer = require('multer'); //for file handling
var util = require('util');
var app = express(); // init express app
Configure Routes and Html files to be served on user request to you server.
app.use(express.static('app')); // use this as resource directory
//APP ROUTING URL => FUNCTIONS
app.get('/', function (req, res) {
res.sendFile(__dirname + "/app/index.html");
});
// this means when we get a request on 'myAppContext/' url provide
index.html
Start the Server
//START THE SERVER
app.listen(3000, function () {
console.log("Listening on port 3000");
});
Note* : Make sure you have node.js envoirnment installed on your system before you start.
Now Lets Look at how we include webodf to our application.
First create a directory in your main folder(we name it 'app'), where all
the html,styles and scripts..etc will be stored.
/app (our html code and libraries)
../index.html
../script
..wodotexteditor-0.5.9(folder)
..myScript.js
../styles
../images
../And some other files.
Create an index.html file and include webodf and/or Editor JavaScript libraries(Contains Webodf included in build... so need to download separately).
Create a container element and local script necessary to run webodf editor.Make sure to add a odt file to directory for you test or you can use the one which comes with wodo-editor.
You can refer this link for creating a local webodf editor using wodo-text-editor and complete the above to steps(2 & 3).
After we have done the above things,we will go into our root directory and run 'node index' command.... and that's it folks.
Just hit localhost:3000/ and you will see a workable webodf editor.
I hope this helps to get started with node.js and webodf. I will soon create and full application with open/edit and save features using webodf and node.js.
Thanks :)

Related

Express static behaviour

I have a server running with express. Let's say I have the following folder structure:
- public
-- image1.png
-- image2.png
-- image3.png
- src
-- app.js
In the app.js I setup the server using express and I do:
const app = express();
app.use(express.static('public'));
Now, If I start the server and go to localhost:port/image1.png I get image1.png displayed.
I am confused because the path I specified is incorrect, kinda. If I do:
app.use(express.static(path.join(__dirname, '..', 'public'))
I get the same result. Why they work the same?
it all depends on "how you start your server"
if you do:
node src/app.js
it will work because from a Node.js perspective, the path public exists in the file system from where the node process started,
now, if you do:
cd src
node app.js
it will not work because there's no public folder in the file system from where the node process started
behind the scenes, Express.js is using the serve-static package,
if you look in the source code, it is using path.resolve to load the folder:
https://github.com/expressjs/serve-static/blob/master/index.js#L65
and looking at the Node.js documentation for path.resolve, we have:
"If no path segments are passed, path.resolve() will return the absolute path of the current working directory."
So, resolving public from the current working directory of node when using node src/app.js, the folder exists!
that's why it works! :)

How to create Node.js Express app serving a Vue.js SPA?

I'm trying to set up a Node.js project that uses Express to provide a few backend APIs and serve a SPA built with Vue.js.
When I use the Vue cli to initialize a project, I get e.g. src/main.ts main file and commands npm run serve to run a dev server and watch for changes and npm run build to build a production release.
When I use the Express application generator to create a project, I get ./app.js main file and npm start to start the server and watch for changes.
How can I combine these into a single project, both served by the same Express server? Preferably so that a single command would watch + update changes to both server and client? I want to use Vue single file components and TypeScript, which (probably?) require a build step.
(I don't need dynamic server-side rendering of Vue templates, just the static SPA app provided. I prefer TypeScript, but JavaScript answers are fine as well.)
These will be different for your dev and prod environments...
For development look into concurrently - it basically allows you to create a single script in your package.json to start both the client and server concurrently and will watch for changes etc...
For production, you would need something like this in your app.js:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
(The code above assumes that your directory structure has a client folder with a build folder after having run npm run build I'm more familiar with React than Vue... but the logic should be the same...)

Starting Angular application as a default of a NodeJS project

I have a NodeJS application and an Angular 6 as a frontend.
The project looks like:
-> Node Project
---> src
---> Client_App (Anuglar)
To run the application, I need to follow those commands and start the server and angular separately, like:
-> node start
-> cd src/Client_App
-> ng serve
I need to start the two application with one single command or to add my dist file of Angular to be run at the start of my NodeJS, which is using Jade right now.
I am still new to NodeJS and still don't know how to configure it.
Anybody can help? Thanks
Edited:
I have tried now to add the dist folder to my views folder and run it within the app.js
app.get('/', function (req, res, next) {
res.sendFile(path.join(__dirname + '/app_server/views/ngapp/index.html'));
});
But I am receiving the error, that my .js and .css folders are not found:
When you build your application with the CLI ng build --prod, you get a dist folder : this folder contains all of your application, bundled into different files (feel free to look at them).
To be able to create a .ZIP file with that, you will need two things :
this dist folder
an http server
You have the first one, but not the second one.
All you need is a very simple server. For instance, http-server on NPM can do that. By installing it as a dev dependency, you could create a command in your package.json file
"deploy-locally": "http-server ./dist"
And now run it with
npm run deploy-locally
Or even better,
"start": "http-server ./dist"
And run with
npm start
If you don't want to use a NPM package (or forced to use NodeJS), simply create a basic http server in a JS file and run it with your command line (sorry, can't help on that, not into nodeJS right now).
You can create a new route and pass in app.route as express.static as below,
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static(path.join(__dirname, 'dist')));
make sure, u have build version of angular application by running this command,
ng build --prod --build-optimizer
You would need express to install in this case. express has amazing ways to handle all this

vue files without NodeJS?

I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.

How to install node.js and create project in Eclipse

The steps I've tried:
1.(OK) install node from official website: https://nodejs.org/en/download/
Result: I'm able to open cmd(in any location, type node then use commands like "console.log" and it prints my messages)
2.(Failure) install express using npm install -g express from cmd gives me an error(picture attached
3.(OK) I've succeed installing express using the following command npm install express (without -g)
4.(OK) Writing a simple Hello World program works. Javascript file:
var http = require('http');
// Configure our HTTP server to respond with Hello World to all requests.
var server = http.createServer(function (request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end("Hello World\n");
});
// Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);
// Put a friendly message on the terminal
console.log("Server running at http://127.0.0.1:8000/");
5.(Failure) However, I wanna run a bigger project, where besides one js file, I also have an index.html file. If I move both files to node installation directory, everything works. But I wanna be able to keep my projects somewhere else. If I try to run with node C:\Users\marius\Downloads\chat-example-master\indes.js I get the error: Cannot find module express. Thus it seems that when I installed express without "-g" I got it working only in node directory.(let me know if you have any doubt).
6.(Failure) When creating a Node.js project from Eclipse, I choose empty project, no template, then add a single and simple js file(the one with Hello World), right click on project name -> run as -> run Configuration -> Node Application -> New -> add my .js file -> Run. I get the following error:
Exception occurred executing command line.(steps from http://techprd.com/how-to-setup-node-js-project-in-eclipse/)
Cannot run program "node" (in directory "C:\Users\marius\workspace\FirstNodeProject"): CreateProcess error=2, The system cannot find the file specified
To recap: What I want is to be able to run node projects located anywhere with "node" in cmd and to create node.js and express project and run them from Eclipse.
Please let me know if you need more information.
Just to let others know if they come across this issue. I can run express apps from anywhere but in the root folder of every app I have to npm install express.
In Eclipse all you need to do is: Window->Preferences->Nodeclipse->uncheck "find .Node on PATH" and insert into Node.js path input your node.exe location (in my case: C:\Program Files\nodejs\node.exe)

Resources