I have my own Yeoman generator.
I created a sub-generator to create a new view folder.
Basically, the usage is:
open a new terminal
cd into the parent folder
run the yeoman command yo my-generator:view
follow the instructions
This view sub-generator prompt a folder name.
For example:
If I want to create the view authentication on the default views directory.
cd views
yo my-generator:view
The result should be:
views //- Already created by the main generator
├── authentication
│ ├── authentication.controller.js
│ ├── authentication.template.html
Now, if I want to create a sub-view login for the authentication view.
cd views/authentication
yo my-generator:view
The result should be:
views //- Already created by the main generator
├── authentication
│ ├── authentication.controller.js
│ ├── authentication.template.html
│ ├── login
│ │ ├── login.controller.js
│ │ ├── login.template.html
Instead, the current (wrong) result is:
views //- Already created by the main generator
├── authentication
│ ├── authentication.controller.js
│ ├── authentication.template.html
├── login
│ ├── login.controller.js
│ ├── login.template.html
My struggle here is that I don't know how to get the current path when I run the command.
Actually, I just create the new folder with a default prefix path which is app/views/.
This is why Authentication example works.
However when my current path is deeper in the views folder, it will add the new folder at the root of the views folder.
If I could get the current path (of the cmd), I should be able to add this path as the prefix instead of setting a default and not static one.
This is why Login example doesn't works.
Some code example:
$that is the current generator object
$that.viewNameCamel is the name of the folder set by the user
I use a .txt file as template and then create the controller.js file.
const filePrefix = 'app/views/' + $that.viewNameCamel + '/' + $that.viewNameCamel + '.';
const exampleData = {
controllerAlias: 'vm',
otherVar: 'example'
};
$that.fs.copyTpl(
$that.templatePath('controller.txt'),
filePrefix + 'controller.js',
exampleData
);
Tried:
$that.env.cwd
process.cwd()
__dirname
path.js library
Similar:
Issue 1037
Question 28481715
So guys, do you have a clue on how do I get the current folder path ?
Is there an alternative solution here ?
Thanks !
EDIT 1:
The problem here is the .yo-rc.json present on the root directory of the projet.
The file rewrite the path so I should delete it to fix the problem.
However if I delete this file, the user configuration will no longer be saved.
And I need it for later sub-generator usage.
Is there another way to save the user configuration ?
Or once again, is there another way to get the current real path ?
I know this is kinda old but for any one who comes later,
from the documentation https://yeoman.io/authoring/file-system.html
If you want to know from where the user is running yo, then you can get the path with this.contextRoot. This is the raw path where yo was invoked from; before we determine the project root with .yo-rc.json.
from my experience removing the .yo-rc.json would mean that you need to manually check if the path provided is ok, having a fixed root point is something helpful.
Just remove the .yo-rc.json file from your root directory. This is the file that is responsible for locating your root irrespective of where you are in the file system.
I am not sure about the repercussions of removing it but nothing seem to have happened to the generators I built.
Now you can use process.cwd() and it will get the correct working directory.
For your use case to have a prefix app/views, you probably need to write some Javascript to append or not append the prefix based on where you are, which should be trivial.
Related
I created a NodeJS module, written in typescript (though it shouldn't change anything).
Here's how it's organized:
.
├── data/
│ └── MY_DATA_FILES.json
│
├── src/
│ ├── data/
│ │ └── data.ts
│ │
│ └── OTHER_TYPESCRIPT_FILES.ts
│
├── dist/
│ ├── data/
│ │ └── data.js
│ │
│ └── OTHER_JAVASCRIPT_FILES.ts
│
├── package.json
└── tsconfig.json
My goal is to read the data files from the data.ts file. When my current working directory in on the root of the module it's not a problem (then it would be ./data/...) but when I use this as a module, and it's placed in the nodes_modules/ directory, I'm not sure how to handle the situation.
I'm currently reading the files as follow:
import fs from 'fs';
const basePath = './data';
const filesPath = 'subdirectory/my_data.json';
export function getData(): any {
const fileFullPath = basePath + '/' + filesPath;
const contents = fs.readFileSync(fileFullPath);
// [...]
}
But here, my basePath is dependent on my working directory. I could set it as ./node_modules/my_module/data, but I know that's not the right approach..
Any help would be appreciated, thanks!
You would typically build a path for each location that is relative to the directory where your code is located and access the desired location in a relative way from that. The location of your code will be passed to the code's module as __dirname. You can then combine that relative path with __dirname to build a full path to the target location without making any assumptions about where or how the module is installed.
So, assuming your code is in the src directory, that would be where __dirname points to. To, get access to the data directory below the src directory, you would use:
let srcDataDir = path.join(__dirname, "data");
To get access to the dist/data directory, you would use:
let distDataDir = path.join(__dirname, '../dist/data');
To get access to the higher level data directory where MY_DATA_FILES.json is, you would use:
let topDataDir = path.join(__dirname, '../data');
As, you can see, the key is to build everything relative from the location you do know which is __dirname passed to the code as the location of the code's own directory.
In Javascript's modules, you don't ever want to make any assumptions about the current working directory because that can literally be anything. That's controlled by the top level program itself and how the program was started and is not anything the module itself can rely on or make assumptions about. But __dirname will always be the full path to the directory where your module's code is running from.
I am trying to run an react app on a server running Passenger. I can run simple Node.js apps no problem but I can not figure out how to run an React app. I am right now just in the beginning so I just created the default React sample project and I am trying to get that to run on Passenger.
I have done npm build but the suggestions for how to run that built app include yarn and serve. How would I configure the Passenger server to host my react app?
Any help on this would be very appreciated.
I know this is an older question now, but I figured out a solution for my case that allows a React app to run using Passenger that doesn't require yarn or serve -s build (which my VPS didn't let me run without being constantly logged in). I was not able to find any clear docs on how to do this anywhere else. The closest answer I found required me to build an express node server to frontend the React app (which I couldn't do for other reasons). I hope this answer helps others that might be searching for a similar solution to their question. I will add that I tested this solution on two different VPS cloud servers (DreamHost VPS and HostGator). Your VPS or server might need a modified setup to make this work.
First you need to create your production ready React app using npm run build (on your local system or your server, but I would recommend your local system). If you don't know how to do this you can look it up from the React docs in Creating a Production Build. The result of the production build should be a build directory. This is your React app encapsulated in a single deployable directory.
On the server running Passenger you will need to setup two directories (if your hosting provider didn't already do this for you) in the root level directory where Passenger expects apps to be run from. Create a public and tmp directory..
├── public
└── tmp
Note: If you are going to be running other node apps from here, then you might need a node_modules or other required directories. But they are not needed if you are just running the React app by itself.
Copy the contents of the build directory from Step 1 into the public directory on your server. The results of this should look something like this.
public
├── static
│ ├── css
│ │ ├── main.########.chunk.css
│ │ └── main.########.chunk.css.map
│ ├── js
│ │ ├── main.########.chunk.js
│ │ ├── main.########.chunk.js.map
│ │ ├── runtime~main.########.js
│ │ └── runtime~main.########.js.map
│ └── media
│ ├── background-image.########.png
│ └── logo.########.svg
├── asset-manifest.json
├── favicon.gif
├── favicon.ico
├── index.html
├── index.tmp.html
├── manifest.json
├── precache-manifest.########################.js
└── service-worker.js
Back at the root directory level, next to the public and tmp directories (not inside the public dir), create an app.js file containing this code:// app.js
// A simple Node.JS app launcher for running with Passenger.
const react_app = require("./public/index.html");
module.exports = {create: react_app.create}; This creates the node app that Passenger needs to connect too. The ./public/index.html in the code is the path to the actual entry point to your React app. But Passenger on many VPS setups is going to look for an app.js file to connect too. In some cases you might have to call this file server.js rather than app.js. This will depend on your hosting providers Passenger setup.
Finally you need to create an empty file called restart.txt inside the tmp directory. This file is used by Passenger on your server to detect when the React app should be "restarted". You simply have to do touch restart.txt from the command line on your server to have Passenger restart your service (at least that's the way it works on my server).
You should now be able to hit your React app from whatever address you have setup for your server.
The final root level directory structure should look like this (if you don't need a node_modules dir):
.
├── app.js
├── public
└── tmp
I would also recommend adding in a .htaccess file (again depending on you hosting provider) that prohibits file directory browsing and the like. Some VPS might require that you modify or add in a .htaccess file to make Passenger work at all. See your VPS specific docs for this info.
NOTE! This entire process is NOT needed if your React app can live on it's own. By that I mean that you can just upload the contents of the React production build process to the public or www or whatever "public directory" your server exposes to the world. The index.html file created in the React build folder is sufficient in many cases to serve up your React app from a web server. 😉
I tried the above answer and it worked to some extent but I found an easier way to achieve this. With this solution you can host your application on an apache or nginx server.
1.Add the homepage key to your package.json file
"author": "Your Name",
"license": "Your license",
"homepage": "https://your-domain.com/"
2.Create a production build with the below
npm run build
3.Copy the content of the generated build folder to your server root directory
4.Create a .htaccess file in the root directory with the content below
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
I'm having trouble adding an image url to a variable in my LESS file.
I am using a project called Guide4You where I would like to add a new LESS file with my own images. This project uses node with webpack.
For my project I use this folder structure:
├── root
│ ├── load_image.png
│ ├── styles
│ │ └── substyles
│ │ ├── load.less
In the less file I have the following code:
#test: url("../../load_image.png");
Whenever I try to compile the code into webpack I get the following error:
[ './root/load_image.png
Module parse failed:
C:\projects\root\\load_image.png
Unexpected character \'�\' (1:0)\nYou may need an appropriate loader to handle this file type.
Is it possible that the less-loader sees my url as a reference to another loader and tries to execute it?
You need an appropriate loader that would match that png of yours. To solve this problem, use either url-loader or file-loader so that it matches your png.
Documentation: https://github.com/webpack-contrib/url-loader, https://github.com/webpack-contrib/file-loader
I have a folder structure like so:
.
└── client
├── components
└── routes
├── index.js
├── Login
│ ├── index.js
│ ├── assets
│ ├── components
│ ├── container
│ └── modules
└── UpdatePassword
├── index.js
├── assets
├── components
├── container
└── modules
I would like to see if anyone is importing files from the UpdatePassword folder to the Login folder and vice versa.
Basically I'm following a fractal project structure where I want components that are related to the UpdatePassword or Login route to only exist in their respective folders. Shared components would exist in the client/components subdirectory. To maintain a structure like this, I would like to write a test that fails when an 'unacceptable' imports or require is used. I.e. if a file in UpdatePassword imports from Login/components.
Is there a way to test or check whether an import is coming from specific folders?
Try madge: I usually run it as madge --image /path-to-folder/dependencies.png routes (There is also a exclude option if you need it)
You'll get a visual graph which shows you dependencies between files.
I have no idea about native way to do it.But you can wrap "require" function:
function myRequire(fromPath, requiredPath) {
//code to judge whether or not can load requiredPath from fromPath
var can = ...
if(can) {
return require(requiredPath);
}
else {
throw new Error(`you can not load ${requiredPath} from ${fromPath}`);
}
}
I found that Express has an application generator, however the documentation does not explain the purpose of each directory and file. If someone could just give me a short explanation of which files I should be putting where, that would be much appreciated. Here's the generated app structure:
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 9 files
The app.js file is the entry-point of your application.
The package.json file contains all of your dependencies and various details regarding your project.
The bin folder should contain the various configuration startup scripts for your application.
For example, instead of applying all the Express middleware in the app.js file, you module.exports = {} them from their own configuration file and require them in app.js. [additional info LINK]
The views folder contains all of your server-side views.
The public folder contains all of your front-end code.
The routes folder contains all the routes that you have created for your application.
As stated in the official documentation, be aware that this is just one way to organize your code.
You should test it out and see if it fits your project.
This thread gives a deeper answer about the www file specifically: What does "./bin/www" do in Express 4.x?
Basically, running your app from the www file (which calls app.js) allows you to start your app with different configurations. You might have a "www" file representing the way the app should be run when on the web, a "dev" file that you, as the developer, would run, a "test" file you would run when running tests, etc. Read the thread linked above for more detail!
This structure is a standard organization for web-app
public contains all client static files (css, client javascript (ex. jQuery), images, fonts...)
routes contains the main back-end code (server side), which compute data before calling a template engine (see below) or respond to the client (via json of xml).
views contains each page template, see jade template. These files are used by scripts in "route"
app.js contains the express core, such as uri parser, modules, database...
package.json is the project descriptor file (used by npm for dependencies and sharing)
If the application generator provide a full example, don't hesitate to open each file (starting from app.js) to understand the project's organization.