Locally run Stackblitz project with Typescript and RxJs

Yoyoyo, what's up guys?

OMG, it's been a while since my last article. A lot going on, thankfully good stuff (:

I use Stackblitz a lot. Like A LOT. Today I created a new Typescript/RxJs project, once done, I was trying to export it and run it locally. Long story short, it wasn't running locally out-of-the-box.

Lucky us, my friend Tomek Sułkowski got us covered, all it took was to reach out and ask him:

Hey Tomek, how do you locally run a Stackblitz project with Typescript and RxJs?

NOTE: If you don't follow Tomek on Twitter already, you should.

All you gotta do is:

• Export the project from Stackblitz.
• Extract the project into the folder of your preference.
• Go to the project's directory using a terminal.
• Run npm i -D parcel.

With parcel it's easy to spin up a server that properly serves the index.html file. Before continuing, add your .ts files as scripts in the index.html file.

<!-- Your HTML code -->

<script src="index.ts"></script>

NOTE: If you have more than one .ts file, you may need to inject them all.

The last thing we're going to do is adding a new script to the package.json to serve the application.

{
  "name": "<your_project_name>",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    ...
    "serve": "parcel index.html"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

You made it! Now call npm run serve and go to http://localhost:1234 in your browser.

NOTE: This guide is for simple projects, if you find issues trying to follow it, drop me a comment down below.

Comments

[Naga Kiran K]

Thanks. Able to run the Stackblitz React Typescript project following these steps.
Need to add type="module" while adding .tsx files in index.html
<script type="module" src="index.tsx"></script>

Adding the sample git repository for reference (github.com/nagakirankys/react-ts)

[Tomek Sułkowski]

NOTE: If you have more than one .ts file, you may need to inject them all.

Unless you're already importing it from your entry (index.ts) file 🙂
(which usually is the case, so a manual injection of other files should be a very rare necessity)

[Nikola Furnadjiski]

Thanks, worked for me, just had to do 2 adjustments:

in index.html add <script type="module" src="index.ts"/>instead of only specifying the src attribute

And because I've tried to run it previously unsuccessfully even though I fixed the error afterwards it was still not running with error
Error: Expected content key 3fd3a35e377c90d1 to exist
I fixed this by deleting the .parcel-cache folder and run the command again.

Then it ran successfully.

[Patrick Hume]

Using the React Typescript

I had issues getting this to work. I suspect because the file types were tsx so needed to be converted though webpack. To get it to work I did the following (step by step):

Note: This is baised of a new React Typescript project [stackblitz.com/fork/react-ts]

1. Export the project from Stackblitz and extracted it.
2. The in the folder where the app was extracted to add a file called: tsconfig.json
3. Paste the following inside this file and save the changes:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

1. Find the file package.json
2. Replace its contents with the following and save the changes:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

1. Edit the file: index.tsx and change the line:

const root = createRoot(rootElement);

To:

const root = createRoot(rootElement || new Element());

1. Save the changes.

2. Open a command prompt (Type cmd into the location bar at the top of the window and tap enter)
   Type the following and press enter:

   npm install

3. Then type the following and press enter:

   npm start

4. When you see the message: ''webpack compiled successfully''

5. Navigate to localhost:3000/ in your browser.

If you want to debug using Visual Studio Code (VSC),

1. Open VSC and select the folder with the app to open (CTRL+K CTRL+O)
2. From the menu along the top in VSC select “Run”
3. From the menu select “Add Configuration…” select “Web App (Chrome)” from the drop down or witch ever browser you want to use.
4. You should see a launch file “. launch.json” in the folder” .vscode”

5. Edit this file and change the following lines:

   "webRoot":"${workspaceFolder} "
   "url":"localhost:8080"

6. Change and save these to:

   "webRoot":"${workspaceFolder}/src"
   "url":"localhost:3000"

7. Then in the command window (CTRL+SHIFT+’) type the following and press enter:

   npm start = react-scripts start

The browser should now load with your web app, leave this running!

1. Go back to visual studio code and press F5
2. Now another chrome window will open! This is the one you can use to run your app and debug it in VSC, any break points in VSC will now be hit and you can step though your app in VSC. Don’t close the original Chrome window that first opened when you run “npm start = react-scripts start” that’s the server instance.
3. Try putting a breakpoint on line 5 of the App.tsx and refresh the page, your code should pause at this breakpoint

If your using github integrated with stackblitz

You can safely push these changes to stackblitz and github, stackblitz will still continue to work normally

I hope I made this easy enough to follow and understand and that it helps someone.