0

I would like to run locally a Vue.js/System.js demo app I just got recently, never used System.js before (and I'll not...)

I only want to run this demo, before switching it to webpack... There is no npm script (so no install, no run dev)

How should I run it to display in my local browser? Anything to do before running? (there is no documentation on it..)

demo
    app
      components
      About
      App
      ..
      index.js
    routes
      Home
      ...
      index.js
    style
      main.css
  assets
    home
      ...
    ...
  documentation
    ...
  libs
  favicon.ico
  index.html
  readme.html

UPDATE

Here is the system.config:

System.config({
    defaultJSExtensions: true
    , map: {
        'app': './app'
        , 'js': '/libs/js'
        , 'style': '/libs/css'
        , 'theme': '/app/theme'
        , 'babel': '/libs/js/babel-core'
        , 'components': '/app/components',
        'routes': '/app/routes',
    },
    transpiler: 'babel'
    , meta: {
        'js/*.js': {
            format: 'global'
        }
    }
});

System.import('/app/index.js');

And the index.html:

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="BelosTemas">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test template</title>
    <link rel="shortcut icon" type="image/png" href="favicon.ico" />
    <link rel="stylesheet" href="./app/style/main.css" id="theme-stylesheet">
</head>

<body>
    <div id="app">
        <app></app>
    </div>
    <!-- system -->
    <script src="/libs/js/system.js"></script>
    <script src="/app/system.config.js"></script>
</body>
</html>

UPDATE 2

I changed the script src paths in the index.html relative paths (src='./) now the script file is located .. but it's not executed correctly, CORS related issue ..

Error:

system.js:5 Failed to load file:///app/index.js: Cross origin requests
are only supported for protocol schemes: http, data, chrome, 
chrome-extension, https.
mortalis
  • 2,060
  • 24
  • 34
  • Well, there are multiple ways. It depends on what the application depends on. Basically just configure SystemJS using `SystemJS.config({packages:{"app": {"main": "app/components/index.js"}}})` – Aluan Haddad Jan 16 '18 at 09:09
  • thanks @Aluan , I updated my question with the current system.config and index.html When requesting index.html in my browser ( file://... ) I get 2 errosr : Loading failed for the –  Jan 16 '18 at 09:35
  • Why use `src` attributes with a leading `/`? Also, on an unrelated note, the `meta` config looks fishy. – Aluan Haddad Jan 16 '18 at 09:37
  • fixed the meta in index.html , (copy/paste nug..). src attributes with leading / ... it's the original way it was written... –  Jan 16 '18 at 09:43
  • live-server is one of best solution https://www.npmjs.com/package/live-server – channasmcs Jan 16 '18 at 13:31

1 Answers1

2

I solved it , installing a lightweight web server

npm install -g live-server

then in the console, going to my app directory, I just run it

live-server

default browser is open with http://localhost:8080 bonus : hot reloading !