Search code examples
javascriptrxjs6

Can RXJS run without a server on (client side)?


Ok so this will seem silly but please help if you can. I want to start using RXJS.

as opposed to vanilla javascript it doesnt seem to work by just downloading it and then importing from the local source file. (simple example):

HTML:

    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <script src="app.ts"></script>
    </body>

app.ts:

    // RxJS v6+
    import { interval } from 'rxjs';
    import { sample } from 'rxjs/operators';

I get an error though that this is a valid object (obviously because there is no rxjs loaded via the initial html page as a script)

QUESTION: What is a good way to load rxjs assuming that I want to create an offline site that the user downloads once and then uses the resources importing them from this local file (not all at once obviously) for route?

** I dont want to run a server on client side though if possible**

Thanks, Alex

    HTML:

    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="app.ts"></script>
    </body>

app.ts:

    // RxJS v6+
    import { interval } from 'rxjs';
    import { sample } from 'rxjs/operators';

Solution

  • First, typescript doesn't run natively in the browser. You'll have to transpile it by configuring a tsconfig.json, or using babel with the typescript-preset.

    I recommend changing your file extensions to js for starters. Secondly, I recommend using something simple to bundle your ES6 imports into something the browser can read, like Parcel. If you choose to use native ES6 modules, you'll need to link to RXJS in your index.html file, and whatever dependencies it may require, rather than using a package.json.

    All that said, I recommend getting your feet wet with Parcel. It will generate a single js file that is the sum of all of your dependencies. And that js file can be referenced in the script tag of your index.html file.

    Here's their Getting Started guide: https://parceljs.org/getting_started.html