search

stackblitz / core

Online IDE powered by Visual Studio Code ⚡️
https://stackblitz.com
MIT License
10.23k stars 888 forks source link

StackBlitz SDK - installDependencies and startCommand do not work on load #2007

Closed cetincakiroglu closed 1 year ago

cetincakiroglu commented 2 years ago

Hi,

I'm trying to adapt StackBlitz SDK to generate dynamic component examples. I can load and open the project but cannot install dependencies on the initial load without clicking "install missing dependencies" even though I configured .stackblitzrc as in docs. Nothing happens.

Here is a reproducer. https://stackblitz.com/edit/angular-czlzjh?file=.stackblitzrc

Here is the related code

project = {
title: "Project title",
description: "Project description",
template: "angular-cli",
dependencies: {
    "@angular-devkit/build-angular": "~14.0.3",
    "@angular/animations": "~14.0.0",
    "@angular/cdk": "~14.0.0",
    "@angular/cli": "~14.0.3",
    "@angular/common": "~14.0.0",
    "@angular/compiler": "~14.0.0",
    "@angular/compiler-cli": "~14.0.0",
    "@angular/core": "~14.0.0",
    "@angular/forms": "~14.0.0",
    "@angular/platform-browser": "~14.0.0",
    "@angular/platform-browser-dynamic": "~14.0.0",
    "@angular/router": "~14.0.0",
    "@fullcalendar/angular": "~5.11.0",
    "@fullcalendar/core": "~5.11.0",
    "@fullcalendar/daygrid": "~5.11.0",
    "@fullcalendar/interaction": "~5.11.0",
    "@fullcalendar/timegrid": "~5.11.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "chart.js": "3.3.2",
    "codelyzer": "^6.0.0",
    "del": "^2.2.0",
    "file-saver": "^2.0.2",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.0",
    "gulp-flatten": "^0.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-uglifycss": "^1.0.6",
    "jasmine-core": "~4.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.2.5",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ng-packagr": "~13.0.0",
    "primeflex": "^3.1.0",
    "primeicons": "^5.0.0",
    "prismjs": "1.20.0",
    "quill": "1.3.7",
    "rxjs": "~7.5.0",
    "ts-node": "~8.3.0",
    "tslib": "^2.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.7.2",
    "xlsx": "^0.15.1",
    "zone.js": "~0.11.4"
},
'.stackblitzrc' :`
        {
            "installDependencies": true,
            "startCommand": "npm install"
         }
`,
'src/polyfills.ts': `
        import 'web-animations-js';
        import 'zone.js/dist/zone'; 
`,
'tsconfig.app.json':`
        {
          "extends": "./tsconfig.json",
          "compilerOptions": {
            "outDir": "./out-tsc/app",
            "types": []
          },
          "files": [
            "./main.ts",
          ]
        }
`,
'karma.conf.js':`
        // Karma configuration file, see link for more information
        // https://karma-runner.github.io/1.0/config/configuration-file.html

        module.exports = function (config) {
          config.set({
            basePath: '',
            frameworks: ['jasmine', '@angular-devkit/build-angular'],
            plugins: [
              require('karma-jasmine'),
              require('karma-chrome-launcher'),
              require('karma-jasmine-html-reporter'),
              require('karma-coverage-istanbul-reporter'),
              require('@angular-devkit/build-angular/plugins/karma')
            ],
            client: {
              clearContext: false // leave Jasmine Spec Runner output visible in browser
            },
            coverageIstanbulReporter: {
              dir: require('path').join(__dirname, '../coverage'),
              reports: ['html', 'lcovonly'],
              fixWebpackSourcePaths: true
            },
            reporters: ['progress', 'kjhtml'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: true,
            browsers: ['Chrome'],
            singleRun: false
          });
        };
`,
'package.json': `
       {
            "name": "rlmiqnbaw.github",
            "version": "0.0.0",
            "private": true,
            "dependencies": {
              "@angular/animations": "^14.1.2",
              "@angular/cdk": "^14.1.2",
              "@angular/common": "^14.1.2",
              "@angular/compiler": "^14.1.2",
              "@angular/core": "^14.1.2",
              "@angular/forms": "^14.1.2",
              "@angular/platform-browser": "^14.1.2",
              "@angular/platform-browser-dynamic": "^14.1.2",
              "@angular/router": "^14.1.2",
              "@fullcalendar/core": "^5.11.2",
              "chart.js": "^3.9.1",
              "core-js": "^3.24.1",
              "primeflex": "^3.2.1",
              "primeicons": "^5.0.0",
              "primeng": "^14.0.1",
              "quill": "^1.3.7",
              "rxjs": "^7.5.6",
              "tslib": "^2.4.0",
              "web-animations-js": "^2.3.2",
              "zone.js": "^0.11.8"
            },
            "scripts": {
              "ng": "ng",
              "start": "ng serve",
              "build": "ng build",
              "test": "ng test",
              "lint": "ng lint",
              "e2e": "ng e2e"
            },
            "devDependencies": {
              "@angular-devkit/build-angular": "~0.1100.4",
              "@angular/cli": "~11.0.4",
              "@angular/compiler-cli": "~11.0.4",
              "@types/jasmine": "~3.6.0",
              "@types/node": "^12.11.1",
              "codelyzer": "^6.0.0",
              "jasmine-core": "~3.6.0",
              "jasmine-spec-reporter": "~5.0.0",
              "karma": "~5.1.0",
              "karma-chrome-launcher": "~3.1.0",
              "karma-coverage": "~2.0.3",
              "karma-jasmine": "~4.0.0",
              "karma-jasmine-html-reporter": "^1.5.0",
              "protractor": "~7.0.0",
              "ts-node": "~8.3.0",
              "tslint": "~6.1.0",
              "typescript": "~4.0.2"
            }
          }
`,
'angular.json' :`...`,
'src/index.html': `...`,
'src/main.ts': `...`,
'src/app/app.component.ts':`...`,
'src/app/app.component.html':`...`,
'src/app/app.module.ts': `...`,
'src/app/app-routing.module.ts':`...`,
'src/styles.scss':`...`
}

    postExample() {
        sdk.openProject(this.project)
    }
fvsch commented 2 years ago

Hi @cetincakiroglu. The example code you're showing seems wrong, since you're passing the files directly as keys of the project object and not as keys in project.files. Maybe just a mistake when pasting your example code here?

Looking at your example project, it looks like you're using the EngineBlock runtime environment. The .stackblitzrc config only works in the WebContainers environment. More info on the differences: https://developer.stackblitz.com/docs/platform/available-environments/

I'm also not sure why the dependencies you define in project.dependencies are not listed in the sidebar and don't get installed on page load. They should be, so maybe that's a bug on our side. But to be sure I'd like to see a reproduction with the full code you're using to generate the sdk.openProject call, or a reduced test case. You could fork this project and try to reproduce your issue in your fork maybe?

cetincakiroglu commented 2 years ago

Hi @fvsch,

Sorry for typo, files are inside a files object

like this

project = {
  ....
  files: {
  ...
  }
}

Everything works except dependency install. I've already provided a reproduction link above in the issue. It's what happens when a user clicks on "Open in StackBlitz" button in our documentation.

Just wonder why dependencies cannot be installed other than a WebContainer project. Is there any configuration to do it, SDK documentation is so raw?

fvsch commented 2 years ago

I've already provided a reproduction link above in the issue

To clarify: we need a reproduction link for the code that generates the project, not for the end result (the generated project).

Right now your result example is a project saved in our database with zero dependencies:

{
  "dependencies": {
    "jpack": {
      "appDependencies": {},
      "resDependencies": {}
    },
    "externalDeps": [],
    "externalResources": []
  }
}

To figure out how that result ended up in our database, we'll need to reproduce the sdk.openProject call.

fvsch commented 2 years ago

Just wonder why dependencies cannot be installed other than a WebContainer project.

They can, and it normally works; which is why we need a reproduction with a sdk.openProject call that shows the same buggy result. :)

cetincakiroglu commented 2 years ago

Hi @fvsch ,

Here is the forked example https://stackblitz.com/edit/sdk-create-project-fubkef?file=index.ts,index.html,templates%2Fjavascript.ts

fvsch commented 2 years ago

So it looks like we indeed have a bug somewhere, that causes all dependencies to be dropped. We'll look into that!

Beyond this, there might be fixes that you could do to the dependency lists you're using in this project. Some issues I’m spotting:

I don't know if that will work around the bug we're seeing here or not, but it might help to clean up the dependencies you define, and to use the same dependencies in project.dependencies and project.files['package.json'].

Here is an example of using the SDK to generate an Angular 14 project that uses a single source of truth for dependencies: https://stackblitz.com/edit/sdk-angular-dependencies?file=project.ts

cetincakiroglu commented 2 years ago

Thank you for your support and time @fvsch, I've removed some dependencies as you pointed and it seems it works now!

fvsch commented 2 years ago

Excellent, I’m glad the workaround helped!

I made a copy of your reproduction project so that we can investigate it later and see what the underlying issue was.