0

I stumbled across a project I thought was interesting.
https://codesandbox.io/s/bar-chart-race-eop0s?file=/src/index.js

I downloaded the files.

I need the dependencies to be included as I see from the json package file:

{
"name": "bar-chart-race-starter",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"@types/d3": "5.7.2",
"d3": "5.15.0"
},
"devDependencies": {
"@babel/core": "7.2.0",
"parcel-bundler": "^1.6.1"
},
"keywords": []
}


I fetched the dependencies.

<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>


I stuck them into index.html
I saved index.html


I try to run it through a browser:
Uncaught SyntaxError: import declarations may only appear at top level of a module

The src folder has an index.js
webconsole complains at this line: import "./styles.css";

even if I workaround and include the styles.css into html page through

<link rel = "stylesheet" type = "text/css" href = "./src >/Styles.css" />

it then cries about
import { generateDataSets } from "./dataGenerator";

which is line 2 of index.js

I am doing something wrong in implementing a local version of this project.

Can someone point out where I am going wrong?
It has to be much easier than this.
Help Please to download local version including dependencies of an codesandbox.io project.

John
  • 346
  • 1
  • 9
  • 19

2 Answers2

1

https://codesandbox.io uses a javascript package manager. the clue was in the package.json and how it was written.

for a good description of how javascript evolved:
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

https://en.wikipedia.org/wiki/Npm_(software)

npm (originally short for Node Package Manager)[4] is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc

https://www.stackchief.com/tutorials/npm%20install%20%7C%20how%20it%20works

npm dependencies vs devDependencies

So what's the difference? Packages included as devDependencies won't get installed when the optional --production flag is used. This makes it possible to exclude packages you only need for development.

For example, linters are popular for enforcing clean code but aren't necessary in production. You would include a linter package as a devDependency so you can run linters against your code locally without including it in a production build. npm install (with --production)

to download npm

https://nodejs.org/en/download/

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

for installing npm on windows:

https://phoenixnap.com/kb/install-node-js-npm-on-windows

to save the codesandbox.io on windows:

  1. save the zip file.
  2. extract the zip file to a folder.
  3. open a command prompt.
  4. issue the npm command: npm install <pathtofolderwithpackage> --save

John
  • 346
  • 1
  • 9
  • 19
0

You'll need to install the devDependencies as well (npm i -D), and then run npm start.

Julia
  • 1,950
  • 1
  • 9
  • 22