Learn how to construct a specialized folder arrangement and include TypeScript within an Express server before launching it on the Heroku platform

Question

Learn how to construct a specialized folder arrangement and include TypeScript within an Express server before launching it on the Heroku platform

Creating and deploying my MEAN app on Heroku has been a breeze so far. The front end is up and running smoothly on the provided website, but I'm stuck when it comes to compiling and building the server part of my app, especially since it's in TypeScript and follows a certain folder structure like this - myCodeStructure where the src folder is Angular CLI generated.

I've searched online and read through resources like https://devcenter.heroku.com/articles/mean-apps-restful-api, but they all seem to focus on simple server.js files with NPM start using node server.js.

Can anyone guide me through how to transpile my server code to JavaScript, build it properly, and then run it on Heroku?

angular typescript express heroku deployment

Answer 1

Answer №1

To achieve the same for a react app: Visit this link for detailed instructions.

Answer 2

To achieve the same for a react app: Visit this link for detailed instructions.

Answer 3

Answer №2

Responded by Drenai in a remark:

Prior to deploying an Express server with TypeScript, it's recommended that you first create and run a basic example project using Express and TypeScript. One notable missing component is the absence of a Procfile in your setup. Refer to existing examples like this one found at github.com/bergergit/mean-typescript-starter. Setting up an Express build on Heroku can encounter various issues if not executed properly, so starting with a functional example project will provide a solid foundation.

Answer 4

Responded by Drenai in a remark:

Prior to deploying an Express server with TypeScript, it's recommended that you first create and run a basic example project using Express and TypeScript. One notable missing component is the absence of a Procfile in your setup. Refer to existing examples like this one found at github.com/bergergit/mean-typescript-starter. Setting up an Express build on Heroku can encounter various issues if not executed properly, so starting with a functional example project will provide a solid foundation.

Answer 5

Answer №3

If you want to deploy a web app on Heroku, follow these steps:

Start by setting up an express server.
Build your Angular app using the command ng build.
In the express server, point the public folder to
```
path.join(__dirname, '../client/dist/project)
```
. This will serve the dist files generated when building the Angular app via express. Accessing http://localhost:3000 while the express app is running at port 3000 will display content from this dist folder.
Transfer the dist folder from the Angular project to the public folder in the express project.
Change the npm start command to node ..
Use the Heroku CLI to deploy the app.

These steps will enable you to serve static files through express. https://expressjs.com/en/starter/static-files.htm

Answer 6

If you want to deploy a web app on Heroku, follow these steps:

Start by setting up an express server.
Build your Angular app using the command ng build.
In the express server, point the public folder to
```
path.join(__dirname, '../client/dist/project)
```
. This will serve the dist files generated when building the Angular app via express. Accessing http://localhost:3000 while the express app is running at port 3000 will display content from this dist folder.
Transfer the dist folder from the Angular project to the public folder in the express project.
Change the npm start command to node ..
Use the Heroku CLI to deploy the app.

These steps will enable you to serve static files through express. https://expressjs.com/en/starter/static-files.htm

Learn how to construct a specialized folder arrangement and include TypeScript within an Express server before launching it on the Heroku platform

Answer №1

Answer №2

Answer №3

Similar questions

There seems to be an issue with loading Angular2 (error)

Create an interface that inherits from another in MUI

Utilize Angular to transform items in a nested array into comma-delimited values prior to assigning them to a grid

The property 'i' is not recognized on the type 'AppComponent'

Could someone assist me in identifying the issue with this logfile and guiding me in the correct direction?

Tips for detecting the end of a scroll view in a list view

Finding the selected text in an Angular TypeScript select box

What steps should I take to address this issue using IONIC and TypeScript?

Tips for integrating Less and Bootstrap in an Angular 6 project

Guide to constructing ODM models in Node.js for utilization with nedb

Preventing form submission in Express.js and NodeJS: A step-by-step guide

Using Node and Express to navigate to a URL within a React application

Is there a way to retrieve an HTML file from a different directory using Express?

Generating fresh objects to establish a Many-to-Many connection with Sequelize

After completing its tasks, Gulp closes down

Integrating the frontend (HTML, CSS, and JavaScript) with the backend (Express server)

NodeJs encountered an issue due to the absence of defined username and data

While the Angular application in VS Code may be successfully compiled, the most recent changes may not appear in the browser

Error encountered while attempting to load SWC binary for win32/ia32 in a Next JS application

Error with JavaScript callback functions