Clientside Javascript in Typescript Express Projects

Question

I always wondered how to correctly add client-side javascript to my express project. I use Typescript, and I would also like to use Typescript typing (e.g. for jQuery) when writing javascripts for clients.

My project structure is as follows:

• root
  • distance
  • CSI
    • Assistants
    • Models
    • registration
      • router.ts
      • form.pug
    • Profile
      • router.ts
      • profile.pug
  • Wwwroot
    • CSS
    • Js
    • Images

What I have done so far:

I created all the javascript client files in wwwroot/js (e.g. jquery.min.js, registration-form.js) and I uploaded them to the header of the corresponding pages.

Disadvantages:

• I had to write ES5 javascript that is compatible with browsers that we would like to support
• I cannot place javascript files where they logically belong (for example, I would rather put my registration-form.js in src/registration/ instead of wwwroot)
• No Typescript is possible :( No Typescript typing, not passed to ES5, etc.

In some tutorials, I saw that they simply run npm install --save jquery and import them into their client-oriented files. Therefore, I feel that I must be missing some pretty important things, but I could not find any textbooks about this.

My question is:

What is the “right path / best practice” for writing client-side javascript in Typescript / Express applications (which should also ellimize the mentioned flaws)?

Answer 1

Using TypeScript on the client side is not much different from the server side.

Here is what you can do:

• Create a client folder for TypeScript client sources
• Place tsconfig.json in the client folder and configure it to generate the "es5" code (target: es5)
• Install jquery types (npm install --save-dev @ types / jquery)

To do this, you can now write your client-side code in TypeScript.

You can compile the server side code using tsc -p ./src (server side tsconfig.json under src ) and compile the client code with tsc -p ./client .

I made a simple example of such an application, check it out here . I put a simple script to create everything in package.json, so you can run npm run-script complie to get both server code and client code in the /dist folder. Then run it with npm start .

Further steps:

• Automate the flow: you can run the application locally and then simply edit the TypeScript source files and the application should restart automatically. This can be done using webpack / gulp / grunt or a custom shell script that can be run after modifying and saving any of the source file.
• If you have written good client-side code, check also angular ( https://angular.io/docs ). It uses TypeScript as its preferred language for client-side development, and you can create a more powerful client application that uses it. You can also choose another library (response, vue.js, etc.). See Examples on the TypeScript website .

Answer 2

The client side of Typescript has nothing to do with the expression.

The express is only for the server (even if you use it on an electron, it is still a server, not a client), and it really does not care about the client code.

Regardless of the client structure you use - set express to serve the dist folder as static files or simply serve it directly by any web server (apache / nginx / IIS)