How to use JavaScript for front-end and Nodejs on backend - node.js

I have looked high and low and can’t find anything. I’m a little confused on Web Developement with Nodejs. I have built a simple static file server with pure Nodejs without any framework based on https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework. I’m able to serve my static .html files and .css files, but I can’t seem to figure out how to serve the .js files. Whenever I include my front-end JavaScript files in my server.js files I get errors like window is undefined or document is undefined. How does one go about developing dynamic websites with Nodesjs. I’m used to the PHP way of development. I just need help getting started with Node.js.

Related

"installing" pixi-display in node.js / pixi.js

This is I'm sure a simple question but I'm struggling to find the answer with my limited knowledge of node.js environments.
I've got a Heroku hosted project built in node.js. I've got an index.js file that serves the index.html file to the client.
How do I include the file "pixi-display.js" in the HTML file so that I can use it on my client side code? Right now I can't even load it in my local environment.

How to build a UI with typescript/NodeJS

I'm absolute new to this topic. I want to learn Typescript using NodeJS and have some simple questions. NodeJS is working with Javascript, as far as I know, but how do you get an UI? Do you have to create a HTML/CSS Webpage and run it with Typescript? How do you get Images, Options, Buttons in Typescript? How are they implemented in the Code? I found a lot of Tutorials, but they just return "Hello World" and I don't think I have to "write" the whole page in an output in Typescript.
NodeJS is pure server side javascript, you wont build the UI with it, you would serve the html/css/js to the client, and maybe create an API to communicate with the client.
I assume you dont need an example how to create a Node project, as you stated to have read some tutorials about it.
For starters, i would advise to go for NodeJS plus Expressjs on the server, then maybe start to serve simple static websites (like a handwritten 'index.html'). Expressjs makes development especially in the beginning a lot easier. Serving static files would just need something like
app.use(express.static('public'))
..in your server code. If you navigate then to e.g. localhost:3000/test/route, it would look for the /test/route/index.html in your public folder (which should be in your project root)
Then use a framework for client side development.
If you want to use Typescript for the development of the client side of the app, you might want to look into Angular. It is pretty tightly bound to Typescript, but the learning curve is pretty harsh if you are a beginner with this. Other client side frameworks that work well with Typecsript pretty much out-of-the-box or via cli are Vue.js and React, just as examples.

Reference compiled React javascript from Nodejs server

I have a React app that renders markup based on user input and I need to be able to render the markup the same way without a client. I've seen other people accomplish this by using Nodejs, is it possible to access React Components from Node given a reference to a compiled and minified Javascript file (this file is my React code bundled).
Yes, that is certainly possible with something like reactDOMServer. You can read more at: https://reactjs.org/docs/react-dom-server.html
What are you trying to do exactly? Are you trying to do it on a server? Or just on a command line? Are you using any bundlers like Webpack or Parcel?

Nodejs, Expressjs with EJS to Android doens't work in PhoneGap?

I have a nodejs + expressjs app that needs to be converted to an android. A quick solution that we are thinking of is to use phonegap. The issue I am stuck with is all my files under view folder of the web app are ejs files.
When I try to upload my app to phonegap it says no index.html found in my .zip folder.
My question here is:
1. Should I separate the front end files from the node app? using html and pure js?
2. Is there a way I can render ejs files on to html files (something like import) so that I can convert existing web app into an android app?
3. Is there an option in phonegap to use ejs files instead of html files?
I am using https://build.phonegap.com/ for converting the app. Someone please help as I am stuck with this for a long time.
NodeJS/Express is for backend side, so, you can't package it to an Phonegap app.
In your Phonegap application you can only have HTML and JS (and others ressources like images...).
Should I separate the front end files from the node app?
Yes and then you have to create some webservices to get your data from backend to frontend.
Is there a way I can render ejs files on to html files
As far as I can read over internet, it's not recommanded to use EJS on frontend side...
Is there an option in phonegap to use ejs files instead of html files?
No, no way.
A phonegap app have a defined achitecture, please see/clone: https://github.com/phonegap/phonegap-start which give you a good exemple.
Hope this answer to your question.
Think this way:
You will run your app locally only, no server, no localhost, nothing. How can you render a template language as EJS locally?
There is no way to use EJS with Phonegap app, you should use only .html and .js files.

Making files not accessible in node js

I'm using WebStrom to create a node js website.
1) What template of project should I choose (AngularJS, node express etc)? I do use angular-js but I also need a server side.
2) What are the best practices for the project structure?
3) How I make the server side js files not accessible from the browser? I created a few projects from the different templates and I managed to reach every single js file by writing its path in the browser.
Any help will be profoundly appreciated!
I would suggest using templating. I personally like using handlebars but there are many different options out there.
https://github.com/fixiecoder/node-express-handlebars-boilerplate
This is a link to a very basic node express application that uses handlebars templates. There are also many tutorials that you can use to learn more.
The line app.use(express.static(__dirname + '/public')); in the server.js file is what is used to specify a public folder that is the only thing that the browser will be able to access. Everything outside of this is private to the server.
The best thing you could do though it just do some basic tutorials from start to finish to understand how it all fits together.

Resources