DEV Community

Cover image for How To Bundle Code For Deno Web Applications

How To Bundle Code For Deno Web Applications

Craig Morten on July 03, 2020

My a previous post on writing a React SSR app in Deno I covered how you could write a server-side rendered React app making use of JSPM and by serv...
Read full post
Collapse
 
svdoever profile image
Serge van den Oever • • Edited

@craigmorton, this looks really promising! I cloned the opine repo and executed:

deno run --allow-net --allow-read --unstable ./examples/react/server.tsx`

But I'm getting the error:

error: Import 'deno.land/x/types/react/v16.13.1/r...' failed: 404 Not Found
Imported from "file:///C:/p/opine/examples/react/components/App.tsx:2"

I'm new to Deno, and have googled, searched on deno.land, but have no clue how to solve this... Any help would be appreciated!

I'm running on version 1.3 of Deno...

Collapse
 
craigmorten profile image
Craig Morten •

Hey Serge 👋

Sorry it's not working for you! I'll take a look now and see if can reproduce or suggest a fix 😄

Collapse
 
craigmorten profile image
Craig Morten •

Ah it seems React types were removed from the deno.land/x registry and I didn't notice -_- (see discord.com/channels/6848986651432...), I'll have a look at pushing a fix using denopkg.com/Soremwar/deno_types/re... instead 😄

Thread Thread
 
svdoever profile image
Serge van den Oever •

Hi Craig, thank for looking into the issue. Would be great if it could be fixed. I wrote a solution for server-side rect rendering with async calls for data a few years a go based on Hypernova that is used in production on anwbcamping.nl and available in github.com/macaw-interactive/react... (latest version available in the features/serveroute branch). This morning we were discussing the possibility to create a version based on react-suspence, running in an Azure function based on Deno, and then I found your work! So looking forward to investigate possibilities and try to adapt it to our use-case!

Thread Thread
 
craigmorten profile image
Craig Morten • • Edited

Heya, so think I've got something working again and have updated the article and the Opine React SSR example.

The Deno types directive didn't seem to play nicely with the denopkg.com proxy so in the end directly referencing the types via the GitHub raw URL did the trick.

Give pulling the latest down and let me know how get on! 😄

Thread Thread
 
svdoever profile image
Serge van den Oever •

Application starts up, but on localhost:3000 I get the following error:

TypeError: Cannot read property 'req' of undefined
at redirect (serveStatic.ts:220:39)
at serveStatic (serveStatic.ts:124:14)
at async Layer.handle as handle_request

Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

Some corrections

-make use community 
+make use of community
-:tada 
+:tada:
Enter fullscreen mode Exit fullscreen mode

And use sh for shell formatting markdown.

```sh
deno run ...
```
Enter fullscreen mode Exit fullscreen mode
Collapse
 
michaelcurrin profile image
Michael Currin • • Edited

Thanks. I was looking for React client code. Unfortunately with and without hydrate I still get errors that # private symbol and Deno is not valid, when I load my bundle in the browser.

Collapse
 
michaelcurrin profile image
Michael Currin •

It works for me to use .hydrate or .render

I fixed my errors by the way. Importing from CDNs alone was fine. Importing from Deno modules caused my bundle to include things not compatible in the browser.

Collapse
 
michaelcurrin profile image
Michael Currin •

I have some guides for using bundle and compile on the CLI

michaelcurrin.github.io/dev-cheats...