Cannot find module windows 10 from subdirectory - javascript

I am trying to run a node.js script from a walkthrough I found online however I am gettings errors early on.
(Link to walkthrough I am trying to go through) https://www.education-ecosystem.com/elliottminns/l5DN4-how-to-create-a-cryptocurrency-trading-bot-in-nodejs/q6knD-how-to-create-a-cryptocurrency-trading-bot-in-no-7/
When I run the code with Node.js in windows 10 its give me an error where it can't find the other modules or other .js files in the subdirectory.
I know this is something probably super simple but when I look around, I think I getting the wrong information.
I use Brackets to look at the project folders and .js files, and I use cmd with node or node.js to run the index.js file.

The line
const app = require("app");
will make Node attempt to load a module called app from the node_modules folder.
Obviously, this is not what you want – instead, you need to load a file which is located relative to the current file. To specify a relative load path, use this:
const app = require("./app");
Node will then look for a file or directory called app. If it's a directory, it will load index.js from it.
An excerpt from this article:
The require function will look for files in the following order:
Built-in core Node.js modules (like fs)
NPM Modules. It will look in the node_modules folder
Local Modules. If the module name has a ./, / or ../, it will look for the directory/file in the given path.

Related

How to run nextjs dev server with the config from another project?

I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.
Dev server runs properly, but most features don't work:
.env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?
I've pushed my current code to the following repository:
https://github.com/michalgrzasko/nextjs-2-pages-example
Just run dev server using yarn dev. To reproduce errors:
Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
Uncomment <Nav /> component in the same file
.env is not runnable files, if you will load from "somewhere" - you don't need it.
You should focus on the next.config.js file.
Check this, maybe will help.
Anyway, you will need:
-API from your second source(from where you like to load config)
-Load config every time once you dev build your project.
-use process.env.your_name in your classes/functions

How does a React application start without explicit references to its JS implementation files?

I'm learning React. In the tic-tac-toe game ( https://reactjs.org/tutorial/tutorial.html ) the index.html file had some event handlers and a div pointing at id=root. But nothing about an index.js file, which has a ReactDOM.render.
What tells the browser to run the index.js code if there is no tag loading it?
This link ( Where's the connection between index.html and index.js in a Create-React-App application? ) says:
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.
But if this is the answer, then why should a browser know about webpack, especially as this isn't mentioned in the minimal index.html file?
The create-react-app build script tells webpack to create the bundle(s), starting with src/index.js as the entry point. Also part of this build script is to create a modified version of the index.html file which points to the newly-created bundle file(s). You can find the modified index.html file in your /build directory, and it will have gained something like the following:
<script src="/static/js/main.379f1d19.chunk.js"></script>
That script tag is how the browser knows what to load.
Try running npm run build.
the index.html file discussed in the answer above is in the build directory produced by webpack after running that command.
Under the hood, Create React App uses Webpack with html-webpack-plugin.
this plugin will be producing the index.html file by using the index.html in the public directory as a template
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
when running npm run build webpack starts with index.js and every time you import it includes that module in one script that would be injected into the index.html generated above as explained below in the answer you shared
We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.
This is my understanding I hope this helps.

Why can't I preview Vue project locally?

From the Vue CLI https://cli.vuejs.org/guide/deployment.html, it stated that the dist directory is meant to be served by an HTTP server. But why can't I preview it from the index.html? Cause my understanding is that Vue is just a front end JavaScript framework, so one should be able to preview it from any browser. If am to create a simple vue project using a cdn, it can be directly previewed on the browser. But this is not the case for the vue project created through the CLI. Can someone explain this.
Take a look into the Chrome Dev Tools. You will see a couple of errors similar to those:
As you can see, there are a bunch of files that fail to be imported. This is because these files are not imported using a relative file path, but an absolute one (starting from root, as visible by the prepended / in all files in the index.html).
If you run a local server from the dist directory root will resolve to this directory, allowing the files to be imported properly and your site to be visible in the browser.
However if you simply open the index.html file in your browser, / will resolve to the root of your operating system, which does not contain the files. If you were to copy all those files into the root of your OS, so that the paths would resolve successfully, you would not need a server to view your Vue application.
CLI projects are built with the use on a server in mind. The idea is to just be able to deploy the files in the dist directory to a server and have a working Vue application.
Just to add to a great answer from #aside.
You can use a publicPath configuration option of Vue CLI and set it to '' or ./ - this should be enough to make it work from file system
The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.
vue.config.js
module.exports = {
publicPath: ''
}

how is __dirname implemented in Node.js?

I am quite new to Node.js and have come across the "__dirname" and found it to be quite handy for getting the absolute directory path of the script. But I am curious as to how it is implemented, how is it able to understand the directory structure. I have gone through the node js source code but I am not able to find a proper answer.
these object are available globally to use in node
create a file anywhere in your system with any name suppose app.js
and write in that file
console.log(__dirname);
run it like :-
node app.js
it will print the path of current directory.

How to prepare grunt to prepare dist folder with app.js?

I'm currently playing around with Yeoman Angular Fullstack Generator. That's pretty cool and works as expected. Since it uses grunt, it's possible to run grunt serve dist so that it starts the server with my uglified and concatenated files...
BUT:
Last week I found modulus.io (nodejs cloud hosting like heroku) and they were offering a free evaluation phase. Problem: They expect that my project has an app.js so they can start it with node app.js.
Question:
Do you guys know how can I use grunt to generate a dist folder just for modulus.io, including all contents of the already generated dist folder (currently just frontend code) + all needed server-side javascripts + an appropriate app.js (that uses express and the contents from the dist folders) and the package.json file?
Any help would be appreciated. :) I think a similar task must exist somewhere since you might have this problem on any other cloud hosting platform. Unfortunately I couldn't find a proper solution
Regards,
Sascha
In short, modulus.io is just looking for an entry-point into the application. It can be called whatever you like, so long as in your package.json file you have a line that tells it what to launch, ie. "main": "dist/app.js".
See: https://modulus.io/codex/projects/app-guidelines for more info.
The full stack generator that you are using should have generated all this for you however...?
EDIT: Running a simple grunt command will create a \dist directory that is ready to be uploaded.

Categories

Resources