How to set up Typescript in Symfony?

Question

Question:

How do I set up Typescript with Symfony with the minimum amount of configurations changes to Symphony’s configuration files?

Here are the points that this solution should solve:

1. Typescript MVC Pattern in a private typescript directory:

   src > XBundle > Resources > private > typescript

2. Javascript bundles compiled in :

   src > XBundle > Resources > public > js

3. the private directory should consist of multiple apps for different pages. (If an app requires it's own tsconfig.json file, that's fine)

4. an app is simply (for example) home.app.ts that imports (for example) a search.component.ts and a chat.component.ts

5. Compiled "apps" should be located in the public > js repository mentioned in point (2) and should be named (example taken from point (4)) home.bundle.js

6. In the public > js folder, there should only be x.bundle.js files

7. Adding the bundles to my twig files, and calling my view should immediately run the bundle. I should not have to add an extra script to call the "module" (this is the reason why I want to avoid AMD / System )

What I'm not looking for:

I'm not looking for a solution with react and angular but a general solution using the /web directory (or even the Resources directory in a bundle) at the root of a symfony project.

Most articles regarding this talk about symfony2 and try integrating react and angular.

I'm not looking for an installation tutorial for npm and tsc.

I don't need an automatic compile. I use Phpstorm so it does it automatically anyway.

Answer 1

I ended up using webpack for this to work. Props to @zerkms. This is a work in progress, and could be better optimized.

Installation:

1. Install webpack, I personally installed it globally. (Unsure how to configure Phpstorm to use webpack, there doesn't seem to be a direct built in system for it)

2. Go to src > XBundle > Resources > private > typescript

3. npm init -y

4. Install the dev dependencies: npm install --save-dev awesome-typescript-loader and npm install --save-dev typescript

Side note:

@Morgan Touverey Quilling, recommends installing webpack locally, your choice:

npm install --save-dev webpack

Configuration:

Here is 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.

For every bundle, a new config should be created pointing to the main file. Remember to rename the output bundle.

There shouldn't be more than one bundle per page. If you need (for example) the auth.bundle.js and the search.bundle.js on the home page, you should probably create a home.component.ts that uses auth.component.ts and search.component.ts and create a config in webpack.config.js to create the home.bundle.js

const path = require('path');

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

//Copy and paste this for as many different bundles
//as required
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'
    }
});

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

tsconfig.json

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

Run

Type webpack in the directory where webpack.config.js resides.

Adding JS to your Twig file

Somewhere in one of your templates.

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

And run the following commands for any new bundles.js created for the first time in the root directory of your symfony project:

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

Answer 2

In Symfomy or another framework typescript install next.

LOCAL

You need install npm:

sudo apt-get install npm

install typescript as global:

sudo npm install -g typescript

Now you can compile with command to js with command tsc:

tsc greeter.ts

You can set in public folder in your bandle create *.ts and compile it with tsc command in terminal. You can work with it.

LOCAL INSTALL WITH gulp

But if you create automatic compile you will install gulp or grunt:

npm install --global gulp

In project folder create package.json (it's configure file for manager npm)

and install guild gulp-typescript (documentation)

npm install gulp-typescript

create gulpfile.js (tasks file for gulp) in root project directory.

and set tasks by written in doc.

gulp.task('scripts', function() {
    var tsResult = gulp.src("lib/**/*.ts") // or tsProject.src() 
        .pipe(tsProject());

    return tsResult.js.pipe(gulp.dest('release'));
});

LOCAL install angular2

If would like use angular2 in symfony2. You can install Angular CLI as global.

npm install -g @angular/cli

Create folder in your bundle for angular2 (for example: src/AppBundle/Resources/angular2). That will be angular2 project in symfony.

Create project in terminal

cd src/AppBundle/Resources
ng new PROJECT_NAME // angular2

and work with symfony by API

BUT IF YOU DEPLOIYNG TO SERVER Configure the redirect to index.html in ANPACHE OR NGINX

If you deploy create compile your amgular2 app to dist (ng build ) and in your web server configure path to src/AppBundle/Resources/PROJECT_NAME/dist/index.html