NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

Recently, I embarked on a project using NX (Nest.js + Angular) and set up TypeORM for database configuration. While everything runs smoothly in "serve" mode, I found myself struggling with configuring migrations.

In a typical Nest.js project, all files in the dist directory mirror the project's structure, including migrations. With TypeORM properly configured, setting the migrationsRun flag to true should trigger migrations upon app startup.

The issue arises with NX utilizing webpack, which consolidates everything into a single main.js file within the dist folder, omitting migration files.

My query now is: what would be the most effective approach to resolve this hurdle? Is tweaking webpack settings the best solution, or are there alternative methods worth exploring?

Below is an outline of my project's structure:

project/
├─ apps/
│  ├─ api/
│  │  ├─ src/
│  │  │  ├─ config/
│  │  │  │  ├─ database/
│  │  │  │  │  ├─ typeorm.config.ts
│  │  │  ├─ database/
│  │  │  │  ├─ migrations/
|  |  |  |  |  ├─ 1668904379611-SomeMigration.ts
├─ dist/
│  ├─ apps/
│  │  ├─ api/
│  │  │  ├─ main.js

typeorm.config.ts

  host: process.env.MYSQL_HOST,
  port: +process.env.MYSQL_PORT,
  username: process.env.MYSQL_USER,
  database: process.env.MYSQL_DATABASE,
  password: process.env.MYSQL_PASSWORD,
  entities: [__dirname + '/../../**/*.entity{.ts,.js}'],
  migrations: [__dirname + '/../../**/database/migrations/*{.ts,.js}'],
  extra: {
    charset: 'utf8mb4_unicode_ci',
  },
  synchronize: false,
  migrationsRun: true,
  logging: true,
  autoLoadEntities: true,

//edit

After further investigation, it appears that the issue lies with Webpack itself rather than NX directly. Webpack bundles all files into one main.js file.

Answer №1

Encountering a similar issue when using webpack has been a common problem for many developers.
As per the typeorm FAQ documentation, it is recommended to utilize a specific configuration for webpack. This solution works well for migration files that are relatively simple, containing only SQL and no entities (such as seed migrations). However, the process becomes more challenging with more complex files.

To address this issue, you can leverage the webpack-merge plugin to customize the bundling of your main.js and each migration file while maintaining a single webpack.config file.

Remember that migration files are now in JS format. It is crucial to adjust the code accordingly for production purposes, especially concerning the typeorm CLI and data source paths.

I recommend checking out another related post on this topic for further insights

I trust that these suggestions will prove beneficial in resolving your issue.

Answer №2

During my recent project, we structured the general database configuration in a folder named lib that was created using the NX command. Each service would then access this general configuration from lib and retrieve its own migration details from its specific config. Additionally, we set up targets in the package.json file to facilitate running migrations.

// Service Module https://i.stack.imgur.com/cDYdY.png

// dataStoreOptions.ts https://i.stack.imgur.com/uIJi3.png

// project.json https://i.stack.imgur.com/G7Ol7.png

Tip: Since the project was a mono repo, each service had its own package.json file. For services with databases, we added these targets to their respective package.json files.

I trust that this information proves helpful. 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with "Cannot resolve symbol" issue in PhpStorm due to multiple Vue.js projects being installed

Examining the project structure: -node_modules/ ... -package.json -package-json.lock -vue2/ ... -vue3/ -node_modules/ -src/ App.vue main.ts shims-vue.d.ts -package.json -tsconfig.json -webpack.config.js I have successfully installed two diffe ...

The conditional type in TypeScript is malfunctioning

Upon finishing an article discussing conditional types in TypeScript located at: I have attempted to implement a conditional type in the following function: function convertToIsoString<T extends number|undefined>( timestamp:T ): T extends number ...

Angular application experiencing loading issues on Firefox caused by CSP problems

I am encountering an issue while trying to access my app on the testing server. The internal URL I am using is: . However, when I visit the page, it appears completely blank and upon inspecting the dev console, I see the following error message. This situa ...

Configuring webpack: Eliminate hash in the file names of entry/bundle *.js files

I'm currently working on a Vue.js app. However, after building it, instead of getting the "background.js" file, I end up with "background.2a548437.js". To configure webpack-chain, I am using the "vue.config.js" file. While inspecting the results of ...

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

I am new to learning GraphQL with Typescript and I am trying to pass an argument in a GraphQL function to return something dynamically. I have been struggling with this issue for the past hour and could not find any solutions. Here are the relevant code sn ...

There is an implicit 'any' type error binding element 'currency' in Graphql React Typescript

I am facing an issue with my code. I want to use the EXCHANGE_RATES in renderedExchangeRates, but I am receiving an error message saying "Error Message: Binding element 'currency' implicitly has an 'any' type." I understand that this is ...

Vue version 3 is encountering an issue with a module that does not have an exported member in the specified path of "../../node_modules/vue/dist/vue"

After I updated my npm packages, errors started popping up in some of the imports from the 'vue' module: TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X' The X instances affected inclu ...

What is the best way to verify the input of a TextField element?

When I visited the Material UI Components documentation for TextField, I was hoping to find an example of validation in action. Unfortunately, all they showed was the appearance of the invalid TextField without any insight into the actual validation code i ...

Utilizing ResolveComponentFactory() with a String Key: A Step-by-Step Guide

My goal: I want to find a way to use something similar to the "resolveComponentFactory()", but with a 'string' identifier to obtain Component Factories. Once I have them, I plan to utilize the "createComponent(Factory)" method. Check out this P ...

Encountering the error message "Angular module not found" after transitioning to webpack

Transitioning from pure Javascript scripts to webpack for my project is the current challenge. Our html file, game.html, contains the following: <html> ... <script src="bundle.js"></script> ... <div ng-app="visualizerA ...

Problem encountered when bundling Swagger UI Express plugin with webpack for production deployment

Having an issue with the integration of the swagger-ui-express plugin in my node express REST API. When trying to bundle with webpack in production mode, I keep getting an error stating that SwaggerUIBundle is not defined. My app works fine without using w ...

MUI Chips serving as selectible tags with checkbox-like functionality

I have retrieved data from a JSON file containing information about different types of chips: [ { "id": "4", "name": "Caucasian" }, { "id": "5", "name": "Asian" }, ...

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...

Bring in all subdirectories dynamically and export them

Here is what I currently have: -main.js -routeDir -subfolder1 -index.js -subfolder2 -index.js ... -subfolderN -index.js Depending on a certain condition, the number of subfolders can vary. Is there a way to dynam ...

The object literal is restricted to defining existing properties, and 'id' is not a recognized property in the type 'FindOptionsWhere<Teacher>'

I encountered a persistent error within my teachers.service: Object literal may only specify known properties, and 'id' does not exist in type 'FindOptionsWhere | FindOptionsWhere[]'.ts(2353) FindOneOptions.d.ts(23, 5): The expected t ...

Utilizing Typescript in tandem with an external library through es6 modules

Is there a recommended method for incorporating Typescript with non-module libraries like PixiJS and SortableJS without using webpacker? I'm looking to utilize es6 modules but want to avoid cumbersome solutions. What would be the best approach in this ...

What steps are needed to have typescript recognize a typed function as a throw-statement?

I'm grappling with a typescript issue - I have a custom function that consistently throws an error, which is used to handle null variables. Strangely, if I directly throw an error without using the function, typescript recognizes that the variable can ...

Visibility of Input-properties in Angular 2

I am encountering an issue where a component parent is calling another component child with an input-property. Although the property is available in the child's template, it does not seem to be accessible within the constructor or OnInit functions. I ...

Utilizing moment.js in conjunction with typescript and the module setting of "amd"

Attempting to utilize moment.js with TypeScript 2.1.5 has been a bit of a challenge for me. I went ahead and installed moment using npm : npm install moment --save-dev The d.ts file is already included with moment.js, so no need to install via @typings ...

Discovering the most recent 10 date elements in a JSON object within a React application

I have an array of objects containing a date element. My goal is to identify the 10 most recent dates from this element and display them in a table format. When I attempt to render these dates using a mapping technique that targets each data with data.date ...