No problem!

Remember, your npm scripts aren’t run with node run ... but npm run ... . The only scripts that don’t require the run keyword are start and test , although you could technically add the run keyword and everything would be fine.

If you followed this article to a T you’d be using create-react-app which has 4 built-in npm scripts :

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

And that would take care of most of your project for you. The build script has some performance optimizations for production.

I’ve not used Surge outside of my create-react-app projects. The build script I reference is an abstraction of create-react-app . I’m not 100% sure what is going on behind the scenes. I can do a little digging on the matter now that you’ve peaked my interest.

As far as your issue goes, all you really need to do is prepare your web app for production. Technically you don’t even need to do this. You can simply run the surge command (assuming the Surge CLI is installed on your machine) and provide Surge with the path to your project.

Of course you’d definitely want to prepare for production if this isn’t some throwaway project :).

What does your project structure look like? Do you have a source directory where your projects source code lives and a production directory?

My usual project structures look like this:

/
|
|- src <--- development
|  |
|  |- js
|  |- css
|  |- html blah blah blah
|
|- build <--- production
|  |- js
|  |- css
|  |- html 
|
|- package.json
|
|...

If this were my project structure and I wanted to utilize Surge, I would just run the surge command and point Surge to the build directory (More details in the blog post).

Now you just need to fill in that gap between coding in the src directory and running an npm script to transform your code and push it to the build directory (the directory you want to push up to Surge for production). This portion is not a one-size-fits-all part of the project. It depends heavily on the dependencies of your project, if you’re using any module bundlers (webpack, browserify, rollup, etc), and what transformations you are looking to make.

Are you catching my drift here? :)

At the very least, if you don’t have a build directory, your npm run build script would perform some sort of optimizations and move all necessary files from src to build .

Remember that Surge is free, and if you want to test your project out with no build directory, that’s totally fine. Just run the surge command and point it to your src directory.

Is this helping?