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.
Top comments (4)
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)
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)
Thanks, worked for me, just had to do 2 adjustments:
in
index.html
add<script type="module" src="index.ts"/>
instead of only specifying thesrc
attributeAnd 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.
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]
To:
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:
Then type the following and press enter:
When you see the message: ''webpack compiled successfully''
Navigate to localhost:3000/ in your browser.
If you want to debug using Visual Studio Code (VSC),
Edit this file and change the following lines:
Change and save these to:
Then in the command window (CTRL+SHIFT+’) type the following and press enter:
The browser should now load with your web app, leave this running!
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.