Develop Reference

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

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: ''
}

Why my React app is not loading correctly (broken) in localhost?

I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification

I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.

Problems when bringing node with angular OR how to create a mean app without using angular-cli

I am using angular4. I used angular-cli to create my project.
I want to use node.js as server side language with mongodb. So, I found a tutorial here to connect node.js with angular.
But there are two problems with it:
dist folder is created.
auto refresh server like using nodemon or similar is lost
problem with dist folder
My site depends heavily on images. I keep all the images in a folder called images which is located under assets folder created by angular-cli
So, when I run the server, all the assets will be copied to the dist directory, which will take time and (more important) space on the webserver. Another problem is that If I upload new images, then it will be copied to the images folder inside dist folder, so I have to manually copy those images to my original dist folder.
Another copy of images folder in dist folder will take double space than my original app. So, I have to pay more money for hosting to use more space.
problem with auto-refresh server
before using node, I just typed this command
ng serve
and my application started. Then when I change any code and save the file, the changes were reflected in the browser without restarting the server.
But when I started to use node, I have to manually restart the server whenever I make changes to my code.
Question:
Is there any way that prevents app to create images folder inside dist folder to save space. I mean can I use original Images folder instead of creating one inside dist?
Or is there any other way that a node application and angular application work together?
If anybody knows a solution that does not use dist folder, then I would love to use that solution. As my need is satisfied. Auto-refresh server is not important to me in this case.
So, if anybody knows a way of how to create a mean app without angular-cli,
then I think that is very near to my solution.

You can change dist folder's name to any name you want. you just need to find file .angular-cli.json in your main root folder and change json
"apps": [
{
...,
"outDir": "dist", // dist to any name e.g. public, ...
...
}
]

Run Node with Sails from another directory cwd

I need to be able to start my Node app, that is using Sails from another working directory:
The usual: node app
What I need: node myfolder/app
The second way lifts the server, however, none of the assets works. Looks like he is using my current directory as the assets folder (didn't tried api or anything else), but the server get's lifted.
What happens, is that accessing resources, gives me back a Not Found.
Is this a issue, or am I doing something wrong?
Explaining my goal:
I have a folder with multiple node apps. I'm using pm2 to launch lots of processes, so, my folder structure is like this:
Apps
|- processes.json
| App1
|-...
| App2
|-...
I need to start all the apps from the Apps folder, not from within the App1 or App2 folder. However, it is not working properly with Sails.js. I have tried to run only a single app from another working directory, but the same problem occurs.

Actually, a better answer if you're going to be running things through a process manager would be to change the directory in the Sails app's main file itself. That is, at the top of the App1/app.js file, put:
process.chdir(__dirname);
that way you won't be starting a different process, and the process manager will be able to monitor output, logs, etc. in the expected fashion.
Not sure if this would be a good thing to have in Sails by default, but we'll look into it!

Sails does expect you to be lifting the server from within the app directory. However, you can always write a wrapper script to temporarily change the working directory:
process.chdir('App1');
require('child_process').exec('node app.js');
Save that in your main Apps directory as runApp1.js, and use your process manager to run that instead.