I have a web server (back-end) written using node. It will communicate with the front-end written in react. I would like to 'require' a file for a data structure and also use that same file in a script in the front-end. I can seen how this can easily be done using json - However, I would like to see if this can be done using plain javascript.
There are multiple ways to do this, but here is a simple one, using a monorepo structure.
You file structure will look like this:
/
packages
backend
package.json
index.js
frontend
package.json
index.js
common
index.js
package.json
Then, in each of the frontend and backend package.jsons, you can include common package as a dependency using the file:.. syntax
ie.
dependencies: {
"common" : "file:../common"
}
Related
When I’m looking at some github projects and tutorials I look at the package.json file and see frontend frameworks listed as the dependencies quite a lot. I don’t get it. I thought Node was backend? My understanding is that to install frontend frameworks you dl them directly from their website or github or use a CDN then link them in your pages - all this has nothing to do with Node.
Even if I did install a framework through Node doesn’t it save it to the node_modules folder? There must be a reason for it as I’ve seen a lot of projects list them in their package.json file. Can anyone explain this to me?
NodeJS is not only a "server" in the sense that it is a programmable webserver, it is a JavaScript runtime. You can use it to serve webpages, but you can also use the NodeJS server as a parser / generator for JavaScript (meaning: reading and writing files on the system). If you use one of the frontend frameworks like react and angular, you install the packages just to get their sourcecode and not to actually run the code on the server. Then you use a bundler like webpack to turn the code you've written and the code from the modules into one (or multiple) large chunks of minified frontend code. You can usually find those generated files inside the /dist or /build folder. Now to get these files to clients, you can use NodeJS as a server too, serving the files to the clients. That way, the packages "installed" on your server end up on your client.
We are working with Django as a server framework and used JavaScript for client-side scripting. Now we are migrating to Angular4, do we need to run a node.js server with the existing running Django server?
No, Angular is basically concerned with your front-end in your case, you don't need to use Node together with Django for your back-end.
However, what you would need node for is the build process and dependencies, as Node helps in the building process of your Angular project and in the management of your dependencies, this is facilitated also with NPM.
Apart from that, Node also allows you use the port:4200 when serving using ng serve.... Once your project passes the development stage and you have a dist folder, you don't need the ng serve process anymore and the files within the folder are static and can be run like your normal index.html files...
I do hope this is helpful.
Angular is for your front-end. You can use what you want for the back-end.
You can use Node to build your sources, to convert typescript files to javascript files.
I have a Sails.js server and a Vue Webpack application running separately. This is what my folder structure looks like:
/application-root/server/
/application-root/client/
The /server/ folder contains my Sails.js application and /client/ contains my Vue Webpack application.
I don't want to host these two separately. I want to be able to just deploy the server and make it such that the server renders the Vue Webpack application. I am aware that Sails uses .ejs as a templating engine.
How do I render my Vue.js application instead of the default .ejs templates that Sails uses?
I tried solutions like vue-sails-template etc. but they all come with some compromises and pre-existing code that I have to work around. Thanks.
First, you'll need to run npm run build to get a version of the Vue webpack application that is useful to a server side renderer.
I don't know much about Sails, but check out this previous answer to see if that's helpful for the rest.
I have a folder structure for a Node.js /w Angular.js project with some files like so (from project root):
frontend
frontend-file1.ts
frontend-file2.ts
backend
backend-file1.ts
backend-file2.ts
I use a TypeScript compiler along with many other gulp plugins to compile this into a build folder like so (notice how frontend files get placed into public):
build
backend-file1.js
backend-file2.js
public
frontend-file1.js
frontend-file2.js
In the source folders, I use ES6/TypeScript import statements to import files.
Example: backend-file1.ts
import './backend-file2';
Situation
I've written some custom utility functions that should be used by both backend and frontend. I don't want to repeat the same functions in both folders, since this is prone to errors and is double work.
I've considered creating a shared folder at the project root amongs the frontend and backend folders, but I can't import files in the browser that go up further than the index.html file, which is in the frontend folder.
Question
How would I be able to write a TypeScript file once and be able to import this file in both frontend and backend folders?
I would just structure the code like this:
- src/
- server/
- client/
- shared/
You can place all your shared libraries into shared directory then import/require them from your server or client source files:
import '../shared/library'
To extend the already given answer for outFile case I will show my way of dealing with class sharing in case when you cant or do not want to use webpack/browserify/outFile options.
The structure looks similar
-client
index.html
app.ts
-server
service.ts
-common
helper.ts
-dist
-client
-index.html
-lib
-client
app.js
-common
helper.js
-server
service.js
-common
helper.js
The idea is how you build the dist folder with the results of your build. I do this with gulp tasks and by having the structure above it allows me to reuse components both server and client side from the common library.
Note. To work at client side do not forget to setup base url for systemjs in index.html:
System.config({
baseURL: './lib'
});
System.defaultJSExtensions = true;
Hope this helps.
I wanted to share what I've done so that others have the same option. I felt the other options which are cleaner required a lot more work, and since this is a personal project I set it up in a simpler but more crude way.
Basically I wanted to use symlinks so that I could edit it from either location without issue and without making too many changes to the current project structure. I'm also lucky that I don't need to support Windows for this.
I already had a single repo with a React app in the fe folder and the backend server in be, both using TypeScript. Here's my resulting folder setup:
be/
src/
shared -> ../../fe/src/shared
fe/
src/
shared/
I'll note that React does not support symlinks (IIRC it's because webpack does not support symlinks) and so the "real" folder should be in the frontend.
I also wanted this to work without manual setup, and so I made an extra script in package.json which makes sure the symlink is already set up. It also creates a broken symlink if the symlink is already there, but again, this is for a personal project and I'm okay with it. (Happy to update it if someone has a better understanding of ln than I do.) In the backend's package.json:
"prebuild": "ln -f -s ../../fe/src/shared src/shared",
"build": "tsc",
I've used JetBrains WebStorm to create a Node.js Express App. I used npm (via File->Settings->Node.js and NPM) to install a package called validator which is used for string validation.
The package was installed under node_modules, which is fine. If I do var validator = require('validator'); in my server code, I can use the validation functions successfully.
The problem is that I would also like to use validator in client JavaScript. I can include the script like this:
<script src="/javascripts/xss-filters.min.js"></script>
But that means I have to copy xss-filters.min.js from the node_modules folder into the public javascripts folder. Then, if I ever update the package with npm, the files will be out of sync.
Is there some way to reference node_modules from my view, or to create some sort of linked file or file reference or something? I'd rather not have to maintain this manually.
you should consider using browserify, which allows you to require modules in the browser by building all the dependencies. so basically you code like you would do in server side http://browserify.org
You can done it by using another node.js module, called node-browserify
how to use node.js module system on the clientside
You can try to use bower, or yeoman.
bower - will simplify the process to include js libs.
yeoman - will help you to build projects with the the libraries that you need.