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.
Related
Folks, forgive me if this is a repeat question: I couldn't think of how to phrase it in the search engine. I'm developing an Intranet-based set of applications with the front end (individual apps) in React and the back-end using node.js and Express. I had been using Electron JS but like the Express solution since all web browsers on the Intranet can use the apps.
I'm running into a bit of a circular dependency when it comes to production, though. Since my REST back-end handles all local calls (like node fs) I use REST calls to load and save preferences files from the front end. However, I'd like to be able to set the REST URI from a config file or setting. Since the only way I can access this setting is a call to the REST back-end, I'm stuck. It's possible the client may want to change the host URL and the port for the server. This will affect all axios calls to the REST back end in every React application I have. Instead of calling http://localhost:5000/api-call/ I'd like the localhost and port number to be read from config.
I am transpiling the React apps and storing them in a static folder underneath the REST server. I would like to avoid something complex or additional like REDIS or another local database. My projects don't require any heavy database setups.
Am I simply implementing poor architecture here? I even thought of env variables but then will get into setting them on each client's system which takes away from the flexibility of using a web server in the first place. Any thoughts to move me in the right direction would be greatly appreciated!!!
I knew if I posted this, I might find an answer.
I'm not sure how elegant a solution this is but I could test the env for development vs. production. If in production, I can then use window.href (host and port) to get the information I need. I think this will work but would still love to hear some other thoughts from those with far more experience than I have!
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.
Request you all to please help me on below question:
Premise:
I have created a working application- client-side using angular2 and server-side using node.js (Rest services are used). Both client and server using the different default port 4200 and 3000 respectively. Since this application is not that big and my company doesn't want to open any extra port for security reason hence I was suggested to move all angular files to node.js server which then thereafter host the entire application.
Question:
How can I move all my file from angular2 and add them to node.js so that it works as it was working before? There are many dependencies exist in angular2, similarly, it bootstrap components in a different way then how can I use angular files in node.js?
Any suggestion or solution are deeply appreciated.
You can you ng build. This command will generate a dist folder and your node server can read it. If you use expressjs you can see the example MEAN Stack (Angular 5) CRUD Web Application Example .
So I just started learning ReactJS and React Native.
I have some knowledge of MEN (Mongo, Express, Node). Up to this point, I learned how to res.render() files and pass objects in there.
Now what I need to do, is make MERN app. This app also needs to have Android and iOS version of it.
So far I learned that R stands for ReactJS, not react-native. Is there a way so it includes both? And where do I put react files when I have folder structure like from express-generator? Or is there a way they can be in completely different directories, and one calls the other via import?
It comes down to architecture I believe. The way I like to create the stack goes as follows.
You can create an API using Mongo/Express/Node that serves endpoints for your client app (created using reactjs, react-native and whatever other tech you want to include) to call using HTML requests. This would work for both mobile apps (using react-native) and desktop apps (using reactjs).
There's a couple different ways to deploy this. You can create 2 separate apps, a server app and a client app, which are both hosted individually by 2 separate hosts. This is useful because you decouple your front end code from your back end code. Also, you can have 2 separate directories for your code.
Another method of deployment would be to have your server serve your client files. This ones a little bit tricker, but you will be able to deploy your entire app inside 1 host so this option is also cheaper. I would suggest reading this article to figure out how to implement this and the file structure https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
For easy to develop I want connect to my socket.io server(Node.js) from html files on the local drive with out webserver. How to config it?
Or best way for it?
Serving static files is not what socket.io is made for. Especially binary files is annoying with websockets.
Node.js has everything you need to serve static files, as Cadell pointed out there are good guides on the web for doing that.
The better solution IMHO is to use the connect framework for Node.js so you can use the static middleware. If you want to make your life even easier IMHO, then I'd use the express framework which is built on top of connect and includes a lot of really nice things to make writing a web app simpler. It's very easy to serve static files via either of those solutions.