DEV Community

Cover image for Server Side Rendering React App with Deno

Server Side Rendering React App with Deno

Francesco Leonardi on June 24, 2020

Intro Two of my favourites things are React and dinosaurs. In this article I will show how I’ve put them together to develop a server si...
Collapse
 
craigmorten profile image
Craig Morten • Edited

FYI at the time this article was published, the current version of Deno is v1.1.1 and all the JSX troubles have been fixed 😉

Edit: I believe the author has now removed the out of date warning regarding v1.0.2 for anyone confused by my now seemingly random comment!

Collapse
 
fleonard profile image
Francesco Leonardi • Edited

Thanks for the sanity check!
I've actually wrote the code and the blog post way before it was scheduled to be published and forgot to check the current release, I'll update the post accordingly 👍

Collapse
 
craigmorten profile image
Craig Morten • Edited

Nice one!

Yeah Deno is moving incredibly fast atm, so easy to draft something and then find it's already out of date! Already the case for a v. suspiciously similar article I wrote about a month ago on the same topic (REF: dev.to/craigmorten/writing-a-react...) - it's an effort to keep everything current 😂

Thread Thread
 
fleonard profile image
Francesco Leonardi

Yeah totally agree, happens every time you start trying out new tech.
I guess it's one of the fun parts of been a developer!

Collapse
 
craigmorten profile image
Craig Morten

P.S. JSPM has also migrated it's CDN from dev.jspm.io to jspm.dev. 😄

REF: jspm.org/jspm-dev-release

Collapse
 
fleonard profile image
Francesco Leonardi • Edited

Yeah I saw that and updated the article even tho, as they state in the release, dev.jspm.io will still be available for a further 12 months until June 2021.

Collapse
 
gurb profile image
gurb • Edited

Thanks for information. I got this error, code error: error sending request for url (dev.jspm.io/react@16.13.1): error trying to connect: dns error: No such host is known. (os error 11001). Deno 1.1.1 - Windows 10 - VsCode 1.46.1

edit: "Cannot find module 'dev.jspm.io/react-dom@16.13.1/server' or its corresponding type declarations.ts(2307)"

Collapse
 
fleonard profile image
Francesco Leonardi • Edited

I'm not actually able to replicate the issue. This is the Deno version I'm running:

deno 1.1.1
v8 8.5.104
typescript 3.9.2

Have you tried by any chance to manually do :

deno upgrade --version 1.1.1

and then:

deno run --allow-net --reload  ./server.tsx

Using the --reload flag will force a reload of all the modules you have already cached.

Collapse
 
gurb profile image
gurb

I never downloaded before react-dom. I suppose their servers broken temporarly. Thank you.

Collapse
 
a2lop profile image
andres lopez

Hey! Nice article! Where service do you suggest to host this deno-react ssr application?

Collapse
 
fleonard profile image
Francesco Leonardi

I think the easiest way would be to create a Docker container for the app and then you should be able to deploy to any service you want.
You can have a look at Deno Docker to check how to set it all up.

Collapse
 
downey profile image
Tim Downey

Where does all the dinosaur artwork for Deno come from? I'm pretty unfamiliar with Deno, but I feel like things with a good mascot (e.g. Docker, Golang) often end up being successful... 😅

Collapse
 
craigmorten profile image
Craig Morten

The original icon design was Ryan Dhal himself. A lot of the most popular banners/images in use are by the artist hashrock (including the banner of this article).

You can check out artwork and the artists on deno.land/artwork (not everything is on there, but by clicking through to artists’ GitHub you can generally find more). Be sure to give them credit!

Collapse
 
downey profile image
Tim Downey

Thank you!

Collapse
 
ije profile image
X.

nice tutorial!! maybe you can try Aleph.js, a react framework in deno, like nextjs.