I have setup react using NodeJS according to Link
Since I am learning React, I have to create multiple small projects. I am using create-react-app. This is causing:
Delay in creation of the app (Even when we have node installed while creating a previous app(s).
Allocation of ~200 MB for node_modules folder
Is it possible to reuse the dependencies created for one project, to be used in another?
I have tried copying node_modules from earlier projects to this one but I get following error while executing npm start
> products#0.1.0 start /Users/Deven/playground/React/test
> react-scripts start
internal/modules/cjs/loader.js:783
throw err;
^
Error: Cannot find module '../scripts/start'
in essence the softlinks to files are broken. Also copying node_modules is consuming space so I would like to reuse it.
I am able to get workaround using node_modules in the main app and reusing the same by creating sub-directories for each app in main. In the example I created app called mouseover
Create a main app using create-react-app command.
create-react-app main
It will have node_modules, public and src folders. The public and the src folders are small in size and we can create these for individual apps.
For new app, create a folder for app inside src directory of main.
cd main/src/
mkdir mouseover
Copy Sample public and src to the new folder.
cp -r ../../sample/src ./mouseover/
cp -r ../../sample/public ./mouseover/
Modify App.js to import App from `src/App' from new app folder and return it (index.js of main to consume)
sed -i '' 's/import App1 from .*/import App1 from \".\/mouseover\/src\/App\"/g' App.js
The App.js in main will look like following after importing App from new app and returning it.
import React from "react"
import "./App.css"
import App1 from "./mousehover/src/App"
function App() {
return (
<App1 />
)
}
export default App
Related
I use vue-cli-plugin-electron-builder plugin (based on vue-cli) to deliver Win desktop Electron app.
The app project has third party dependency. Let's call it "ABC":
package.json
"dependencies": {
"ABC": "^x.x.x",
}
"ABC" exports the only one function init() so in main.js I can import and run the function
import * as init from 'ABC'
init()
There is a call inside of the function init():
var fork = require('child_process').fork;
script = 'someOutsideScript.js'
fork(script, []);
someOutsideScript.js contains require('anyModule') and has no export entities
Problem:
When someOutsideScript.js is executed the error Cannot find module 'anyModule' is thrown.
If I copy anyModule in node_modules the application works properly.
The plugin uses Webpack to process source code.
Webpack builds a dependency graph based on source code "import-s/require-s". someOutsideScript.js isn't supposed to be processed because there are no references to this script in source code. It is just executed by 'fork'. require('anyModule') works without troubles in main.js
Question:
How to share the same module loading context in main.js and someOutsideScript.js? Is there any way to pre-process someOutsideScript.js static script to avoid Cannot find module exception?
Thank you
First of all apologies if i couldnt explain my question but i will try my best.
I am building an app which dynamically creates node APIs for users also run them and return url of that API.So, i want to run node server for every Project dynamically.Right now i am using Nodemon which will run a script like this:
const express = require('express');
const app = express();
app.use('/projectone',require('./projects/projectone/server.js'));
app.use('/projecttwo',require('./projects/projecttwo/server.js'));
app.listen(3000);
Every new project will add project's link in this script and nodemon will restart automatically.but this is not a good approach as it is restarting all the projects on adding or updating one project.So i want to run separate nodemon or node instance for each project.
Added details
i am using this at my local machine.as it is under development.so when i create new project ,the project generation code adds a project folder with files in projects folder.this change triggers nodemon which restarts and start watching newly added project.
Any suggestion for this will be appreciated.
I am building a site with node.js express
and this is my file structure:
local file structure
the dist folder holds the packed version of the site and the src the dev
also I have 2 server file once for each version.
I went with that style after doing a pluralsight course with the same style.
my npm start script is:
"scripts": {
"start": "node node_modules/babel-cli/bin/babel-node.js tools/distServer.
},
locally it works great.
I hooked my azure webapp to my github repo for this project and each time it tells me the the build was successfully even that at first it looked for a server.js file at the root, I added it later as a copy of the distServer file.
and then I noticed another error:
"Start script "./node_modules/babel-cli/bin/babel-node.js server.js" from package.json is not found."
as the built was successful I didn't pay too much attention to it, but when I try to access the site it returns only 500 errors
once I checked the logs they were full of:
import express from 'express';
^^^^^^
SyntaxError: Unexpected token import
I have no idea how to make it work on azure, like it does locally and would appreciate any help.
It seems like your local node js version does not match you node js version on azure .
Compare your node js version by doing (node -v or nodejs -v ) on both environnement .
By follow Angular2 example, I create my first app
under my project folder. I can run: "npm start" to make the application running
For example I can access the app from http://localhost:3000
I have a new requirement which I need to run the application under a context path, which mean I need to access the application through http://localhost:3000/myapp
The question is how to deploy or run Angular2 application in a sub folder path?
try to add in the index.html file. However, it seems Angular cannot resolve the path to find the template URL and resource JS and TS files.
Can anyone help to make sure I can run the app under a context path "myapp"?
Add base tag to index.html:
<base href="/myapp">
or in your bootstrap file (main.js)
import { provide } from '#angular/core';
import { APP_BASE_HREF } from '#angular/common';
bootstrap(AppComponent, [
provide(APP_BASE_HREF, {useValue: '/myapp'}),
]);
I'm currently trying to deploy a hapi.js app to heroku with this file structure:
.git
client
server
The hapi.js server is inside the server folder along with it's package.json file, node_modules and all that stuff.
Inside the client folder, I have all the front-end related things (small angular app with bower_components and a gulp script to inject everything). The server.js from /server is serving both the bower_components and the angular app related files.
My current problem is that, obviously, Heroku doesn't find a way to deploy my app because of its structure, since it needs to have the server and package.json on the root of the project (which i'm trying to avoid at all costs).
So far I tried to put on my Procfile the following:
web: node server/server.js
but unfortunately it didn't let me push because it didn't match any of its buildpacks.
Have you add .bowerrc file
.bowerrc file contains
{
"directory": "client/bower_components"
}
and add bower.json in root.