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

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

Related

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.

Cannot find module windows 10 from subdirectory

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.

How to run the react app without a server

I have created the project using npx create-react-app my-app https://github.com/facebook/create-react-app.
When running npm run build I get the following:
70.28 KB build\static\js\2.93539f7c.chunk.js
22.82 KB build\static\css\main.cfe0ffe9.chunk.css
1.41 KB (+44 B) build\static\js\main.79f4d9a1.chunk.js 761 B build\static\js\runtime~main.fdfcfda2.js
The project was built assuming it is hosted at the server root. You
can control this with the homepage field in your package.json. For
example, add this to build it for GitHub Pages:
Looks like I need to have server to run the app.
Is it possible to run this locally without any server running? I mean since it is just html,css,js and why would a server be needed here? for what purpose?
Also there is many files generated into the build folder, there is an index.html too, a static folder, so its not like a single bundle.js and a single index.html, it seems more complicated.
Anyone can explain why the build folder is this much files? and which one to consider for running the app?
Thanks
Is it possible to run this locally without any server running?
No
I mean since it is just html,css,js and why would a server be needed here? for what purpose?
React loads content using XHR, which can't make requests to file scheme URLs.
Anyone can explain why the build folder is this much files?
React makes use of code chunking to optimise which data is loaded. This means that JS which isn't used immediately can be loaded later on and not impact the time between initial page load and first render.
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath"
This will let Create React App correctly infer the root path to use in the generated HTML file.
source: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
So you should just specify your homepage as the current path:
"homepage": "./"

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.

Categories

Resources