First of all, I have it wired and working, but I am somewhat discontent with the result and have a feeling it can be improved.
(The current result can be found here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1.)
The directory structure is:
C:.
│ .gitignore
│ package.json
│ tsconfig.json
│ tslint.json
│ typings.json
│ webpack.config.js
│
├───dist
│ └───server
│ api.js
│ api.js.map
│ main.js
│ main.js.map
│
└───src
├───client
│ app.component.ts
│ index.html
│ main.ts
│ polyfills.ts
│ tsconfig.json
│ vendor.ts
│
└───server
api.ts
main.ts
tsconfig.json
Right now the dist folder has only the server side files compiled from ./src/server. They are placed there by the IntelliJ IDEA, because ./src/server/tsconfig.json requests compilation on save.
The client side bundling occurs in memory courtesy of webpack-dev-server. The ./src/client/tsconfig.json does not request compilation on save.
The things I dislike about my current setup are described here - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1#problems, namely:
webpack is going to take care of any plain .js files under ./src/client - they would be bundled and placed under ./dist/client automatically. But what about plain .js files under ./src/server ? Do I need a task runner for that (gulp, grunt, whatever ...) or is there a solution within webpack?
I have three tsconfig.json files - ./src/client/tsconfig.json, ./src/server/tsconfig.json and ./tsconfig.json. The three files share most of the options, but not all. Right now I copy them in each of the three files - not very good.
In addition, because the typings folder is at the root I have to start all the top level TypeScript files (.\src\client\main.ts, .\src\client\polyfills.ts, .\src\client\vendor.ts and .\src\server\main.ts) with /// <reference path="../../typings/index.d.ts" />.
Hence the questions:
Can webpack also handle the server side files, but differently from the client side ones? I.e. transpile - yes, copy to dist - yes, bundle - no? Please, bear in mind I am using webpack-dev-server.
Is it possible to inherit tsconfig.json configuration so that I could avoid duplicating many options across the three files I have?
Is it possible to avoid the inclusion of /// <reference path="../../typings/index.d.ts" /> in the top level TypeScript files when the file layout is similar to mine ?
I know these are three questions instead of one, but I feel they are all closely related and the answer to one could also be the answer to another.
I don't think you need/want webpack to handle server-side files. Transpiling and copying over of the server side files to /dist is handled by Typescript compiler (via outDir config), already. There will be no bundling of server-side files since no server files were indicated as entry points in the webpack config.
Is not currently possible. However, looks like there is an issue to track this: https://github.com/Microsoft/TypeScript/issues/9876
Unsure, related to #3 in a way (but not really). I'd imagine no as long as you want to keep the client and server files truly seperate.
Related
We are trying to implement a grpc service in Node.
We have a common.proto-file where we describe common messages, that we can reuse across different services.
Up until now, we have only implemented services in Go, and consumed them in either Go or PHP. This all works fine.
Now that we want to implement one service in Node, we have generated the pb.js-files, both from common.proto, and lets call it service.proto.
The problem is, that in service_pb.js it generates the following code: require("../common_pb.js")
This is of course not valid, as the path to common_pb.js is node_modules/#company/common-node/common_pb.js, while now it looks for it in node_modules/#company/common-node/common_pb.js.
I still have not been able to figure out how we can make this work correctly for Node, so if anyone has a solution that would be great.
Here is what we came up with as a solution:
The tree of the project looks like this:
root/
├─ common/
│ ├─ common.proto
├─ some-service/
│ ├─ some-service.proto
├─ other-service/
│ ├─ other-service.proto
If we in some-service.proto needed a message definition from common.proto we had import "common.proto"; and when running the project we included the common dir.
We changed this, so that we in the some-service.proto file wrote common/common.proto, and when running protoc just included . which is the root dir as shown in the tree above. That way the includes came out as require('../common/common_pb.js'); instead of require('../common_pb.js');.
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 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.
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 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.