Managing dependencies and automating setup processes can be tricky when incorporating Typescript into a

Question

Managing dependencies and automating setup processes can be tricky when incorporating Typescript into a

Query:

How can I easily set up Typescript with Symfony without making extensive changes to Symphony's configuration files?

Here are the key requirements for the solution:

Typescript MVC Pattern should be set up in a private typescript directory:

src > XBundle > Resources > private > typescript
Javascript bundles should be compiled in :

src > XBundle > Resources > public > js
The private directory should contain multiple apps for various pages. Each app can have its own tsconfig.json file if needed.
An app can consist of files like home.app.ts importing search.component.ts and chat.component.ts
Compiled "apps" should be stored in the public > js directory mentioned above and named, for example, home.bundle.js
Only x.bundle.js files should be present in the public > js folder
The bundles should be added to twig files, and the view should run the bundle without the need for an extra script to call the "module". This is to avoid using AMD or System

What I Don't Want:

I am not interested in solutions involving react or angular, and prefer a general approach using the /web directory or the Resources directory in a bundle within a Symfony project.

Most articles on this topic focus on symfony2 and attempt to integrate react and angular.

I do not need a step-by-step installation guide for npm and tsc.

An automatic compile feature is not necessary as Phpstorm already handles it automatically for me.

symfony typescript webpack typescript2.0 symfony-3.1

Answer 1

Answer №1

Shoutout to @zerkms for the guidance on using webpack to make this work. Still a work in progress, room for further optimization.

Setup:

Get webpack installed, I opted for a global installation. (Not sure how to set up Phpstorm to utilize webpack as there doesn't seem to be a built-in system for it)

Navigate to

src > XBundle > Resources > private > typescript

npm init -y

Install the dev dependencies:

npm install --save-dev awesome-typescript-loader

and

npm install --save-dev typescript

Note:

@Morgan Touverey Quilling suggests installing webpack locally, up to you:

npm install --save-dev webpack

Configuration:

Check out my folder structure:

├── XBundle/
│   ├── Controller
│   ├── Resources
│   │   ├── config
│   │   ├── private
│   │   │   ├── typescript
│   │   │   │   ├── components
│   │   │   │   │   ├── auth
│   │   │   │   │   │   ├── auth.component.ts
│   │   │   │   │   ├── search
│   │   │   │   │   │   ├── search.component.ts
│   │   │   │   ├── services
│   │   │   │   │   ├── http.service.ts
│   │   │   │   ├── node_modules
│   │   │   │   ├── package.json
│   │   │   │   ├── webpack.config.js
│   │   │   │   ├── tsconfig.json
│   │   ├── public
│   │   │   ├── js
│   │   │   │   ├── build
│   │   │   │   │   ├── auth.bundle.js

webpack.config.js This config could probably be simplified much further.

Create a new config for each bundle, pointing to the main file. Remember to rename the output bundle.

Stick to one bundle per page. If you need different bundles (like auth.bundle.js and search.bundle.js) on the home page, consider creating a home.component.ts using auth.component.ts and search.component.ts, then adjust webpack.config.js to create home.bundle.js

const path = require('path');

//Common configurations
let config = {
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'awesome-typescript-loader' }
        ]
    },
    resolve: {
        extensions: ['.ts']
    }
};

//Repeat this for each bundle needed
let authConfig = Object.assign({}, config, {
    entry: path.join(__dirname, 'components/auth','auth.component.ts'),
    output: {
        path: path.join(__dirname, '../../public/js/build'),
        filename: 'auth.bundle.js',
        library: 'XApp'
    }
});

//Include each config here.
module.exports = [
    authConfig
];

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["dom", "es2015", "es2016"]
  },
  "exclude": [
    "node_modules"
  ]
}

Execution

Run webpack in the directory where webpack.config.js is located.

Adding JS to your Twig file

Add this in one of your templates.

{% block javascripts %}
    {# More stuff here #}
    {% javascripts
    '@XBundle/Resources/public/js/build/auth.bundle.js'
    %}
    {# More stuff here #}
    {% endjavascripts %}
{% endblock %}

For any new bundles.js created for the first time, run these commands in the root directory of your Symfony project:

php bin/console assets:install
php bin/console assetic:dump

Answer 2

Shoutout to @zerkms for the guidance on using webpack to make this work. Still a work in progress, room for further optimization.

Setup:

Get webpack installed, I opted for a global installation. (Not sure how to set up Phpstorm to utilize webpack as there doesn't seem to be a built-in system for it)

Navigate to

src > XBundle > Resources > private > typescript

npm init -y

Install the dev dependencies:

npm install --save-dev awesome-typescript-loader

and

npm install --save-dev typescript

Note:

@Morgan Touverey Quilling suggests installing webpack locally, up to you:

npm install --save-dev webpack

Configuration:

Check out my folder structure:

├── XBundle/
│   ├── Controller
│   ├── Resources
│   │   ├── config
│   │   ├── private
│   │   │   ├── typescript
│   │   │   │   ├── components
│   │   │   │   │   ├── auth
│   │   │   │   │   │   ├── auth.component.ts
│   │   │   │   │   ├── search
│   │   │   │   │   │   ├── search.component.ts
│   │   │   │   ├── services
│   │   │   │   │   ├── http.service.ts
│   │   │   │   ├── node_modules
│   │   │   │   ├── package.json
│   │   │   │   ├── webpack.config.js
│   │   │   │   ├── tsconfig.json
│   │   ├── public
│   │   │   ├── js
│   │   │   │   ├── build
│   │   │   │   │   ├── auth.bundle.js

webpack.config.js This config could probably be simplified much further.

Create a new config for each bundle, pointing to the main file. Remember to rename the output bundle.

Stick to one bundle per page. If you need different bundles (like auth.bundle.js and search.bundle.js) on the home page, consider creating a home.component.ts using auth.component.ts and search.component.ts, then adjust webpack.config.js to create home.bundle.js

const path = require('path');

//Common configurations
let config = {
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'awesome-typescript-loader' }
        ]
    },
    resolve: {
        extensions: ['.ts']
    }
};

//Repeat this for each bundle needed
let authConfig = Object.assign({}, config, {
    entry: path.join(__dirname, 'components/auth','auth.component.ts'),
    output: {
        path: path.join(__dirname, '../../public/js/build'),
        filename: 'auth.bundle.js',
        library: 'XApp'
    }
});

//Include each config here.
module.exports = [
    authConfig
];

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["dom", "es2015", "es2016"]
  },
  "exclude": [
    "node_modules"
  ]
}

Execution

Run webpack in the directory where webpack.config.js is located.

Adding JS to your Twig file

Add this in one of your templates.

{% block javascripts %}
    {# More stuff here #}
    {% javascripts
    '@XBundle/Resources/public/js/build/auth.bundle.js'
    %}
    {# More stuff here #}
    {% endjavascripts %}
{% endblock %}

For any new bundles.js created for the first time, run these commands in the root directory of your Symfony project:

php bin/console assets:install
php bin/console assetic:dump

Managing dependencies and automating setup processes can be tricky when incorporating Typescript into a

Query:

What I Don't Want:

Answer №1

Setup:

Configuration:

Execution

Adding JS to your Twig file

Similar questions

The deployment on Vercel for a Node Express and TypeScript project is experiencing issues with building

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

There was an error during module build process: ReferenceError occurred due to an unrecognized plugin "import" specified in "base" at position 0

It appears that Typescript mistakenly interprets a class or type as a value, indicating that "'Classname' is being referred to as a value but used as a type here."

Steps to retrieve the value stored in a variable within an Angular service from a separate component

What is the process for downloading a .docx file encoded in Base64?

The path referenced in typings is incorrect

Issue encountered while importing TypeScript files from an external module in a Next.js project

The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

The source code in VS Code was not accurately linked

Searching and adding new elements to a sorted array of objects using binary insertion algorithm

Is it possible to use the Optimistic Hook with boolean values?

Loading an index.html file using Webpack 3, Typescript, and the file-loader: A step-by-step guide

"Error: The property $notify is not found in the type" - Unable to utilize an npm package in Vue application

Steps for displaying detailed information about a single product on an Ecommerce page

"Utilize Typescript to dynamically check data types during runtime and receive alerts for any potential

Enhance Express Middleware with Typescript for advanced functionality

What is the best way to modify an object within a pure function in JavaScript?

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

Obtain the hexadecimal color code based on the MUI palette color name