DEV Community

Cover image for How to set up an Express Server with Typescript and ES6 import statements using Vite
Kevin To
Kevin To

Posted on • Edited on

4

How to set up an Express Server with Typescript and ES6 import statements using Vite

Require this, require that... ugh! It's 2022 man!

I remember setting up my server for the first time with typescript while trying to use import and export statements... my god that was a painful day.

So I'm here to save you all that trouble and show you how you can setup a typescript server super easily with ES6 import statements. We're going to use Vite to bypass all that boring setup, and get straight to the meat of things.

Initialize a new project

First cd into the folder where you keep your projects and run this command to intialize a new Vite project. Follow the prompts and select react and typescript. CD into you project and run the command yarn install to install all the dependancies. And we're off to the races!

Image description

Install packages

First things first we need a few packages.

  • Express framework itself
  • The types for our express objects
  • ts-node which allows us to run our server in node.js without having to precompile
  • and nodemon which will restart our server every time we make a change

Image description

Toggle esModuleInterop

In you tsconfig under compiler options set the esModuleInterop to 'true'

Image description

Setup your server

Setup your typescript server. I'm calling mine server.ts and for this example it will be located inside the src directory

Image description

Edit package.json

In you package.json add "type": "module" (if its not already there) to enable ES6 import syntax, and set your nodemon script with the filepath to your server.

Image description

Run it!

And finally all we have to do is run our script. And we're all good to go!

Image description

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (3)

Collapse
 
emperorlou profile image
Nikolas

Can you not use screenshots for the code snippets? I want my AI to look at this but screenshots are a bad way of showing code these days.

Collapse
 
bobgravity1 profile image
bobgravity1

how can I get my vite project to communicate with my local server/backend.... I keep getting 404. I have tried to set up proxies and the likes

Collapse
 
kevinqtogitty profile image
Kevin To • Edited

As I don't have your project in front of me this what I suggest you check.

  1. Client side code and Server side code should be separated into two different directories.

  2. Make sure your client is running on one port, and your server should be running on another

  3. Make sure the base url you are making the request to has 'https://' at the beginning

  4. Your frontend should be making a request via the fetch api or axios with it's endpoint as the port that your server is running on. If your server is running on port 3000 then...

fetch('http://localhost:3000/')
     .then(res => res.json())
     .then(data => console.log(data))
Enter fullscreen mode Exit fullscreen mode

sometimes it might be that trailing backslash is preventing you from hitting the root endpoint of '/', meaning you might be trying to access 'localhost:3000//' and that's why you are getting a 404

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more