How to deploy js file to front-end from back-end

Glitch Help
1

I want to transpile and bundle TypeScript codes into one js file (using Rollup.js).
Then I was going to write rollup.config.js, I was stucked.

rollup.config.js:

import typescript from 'rollup-plugin-typescript';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {
  entry: './src/scripts/Main.ts',
  dest: '/front-end/dist/index.js', // <--- Which destination I have to write?
  format: 'iife',
  exports: 'none',
  sourceMap: true,
  plugins: [
    typescript(),
    nodeResolve(),
    commonjs(),
    json(),
  ]
}

Please teach me which destination do I have to write.
Thanks.

2

What errors are you getting? The filesystem is writable so you should be able to make it output to anywhere you want. A couple of things to consider without knowing the errors you’re getting: your application files are in the ‘/app’ directory on the container, so you might want to use __dirname when referencing your locations. If you’re outputting to folders that don’t exist, you might need to make them first in the editor - create a temporary blank file at the location you’re writing to.

See our Grunt example for a working version of a similar type of project: https://gomix.com/#!/project/grunt-js

3

Thank you for your help.
I tried new rollup.config.js:

import typescript from 'rollup-plugin-typescript';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {
  entry: './src/scripts/Main.ts',
  dest: '/tmp/dist/index.js', // <--- changed! I moved "dist" under "tmp" directory as Grunt setting.
  format: 'iife',
  exports: 'none',
  sourceMap: true,
  plugins: [
    typescript(),
    nodeResolve(),
    commonjs(),
    json(),
  ]
}

and index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to HyperDev!</title>
    <meta name="description" content="A cool thing made with HyperDev">
    <link id="favicon" rel="icon" href="https://hyperdev.com/favicon.ico" type="image/x-icon">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body><a href="/dist/index.js">/dist/index.js</a>
    start
    <script src="/dist/index.js"></script>
  </body>
</html>

but /dist/index.js was not loaded. And When I clicked a link to /dist/index.js, the browser displayed:

Cannot GET /dist/index.js

Which do I wrong?

4

Are you serving the /tmp directory in Express or whatever framework you’re using? It’s difficult to tell without seeing your project (please share the project URL), but it looks like you’re writing your javascript file to /tmp/dist but looking for that file in /dist.

5

Sorry to be late to response.

Now, I’ve retried this issue on new project:

What I want to do is: “Once I edit a file that is (projectroot/)src/**/* , rollup.js reads the entry file (src/scripts/Main.ts) , resolve all *.tag files dependancies and bundle them into ONE public/index.js file(and one public/index.js.map file)”. But I don’t get any bundle file yet.

6

Finally it solved!

I edited the entry file to this way:

Then Glitch produced a bundle file, putted it at /public/index.js and it worked on browser.

I thank you very much!

1 Like