I'm somewhat new to JHipster and have used grunt in the past to live reload changes to client side code in Tomcat webapps. I'm wondering what best practices are to do the same with JHipster. The documentation discusses using "yarn start" or "npm start" when working on your local machine. I need to work remotely on an AWS box and can't do Browsersync.
As I make changes in the /src tree I'd like them to get picked up and deployed into the /target tree so I'll see them with a browser refresh.
Curious what other have done in this situation and would appreciate any recommendations on how to accelerate JHipster client side development on a remote server.
Thanks!
Related
I have deployed a react application using this tutorial on Medium:
https://medium.com/#timmykko/deploying-create-react-app-with-nginx-and-ubuntu-e6fe83c5e9e7
I am using an Ubuntu server from Digital Ocean.
It worked perfect for deploying the web app by doing "git pull" in the /var/www-folder.
However, I am not able to change the app running on the server. When I change the repo locally, git push locally and pull on the remote server, everything seems to be working fine. With "git log" I can see that the changes to the repo are actually registered. However, after running
sudo service nginx restart
The changes are not visible on the server when I go the the corresponding IP-adress..
I even tried building the project after pulling on the server.
What could the solution to this be?
Thanks:)
I'm trying to build a react app starter that suits my needs. I've read, downloaded, tested countless react boilerplate to try to understand how to add SSR but I'm kind of stuck right now.
The github repo is here
So far I've got React running with hot reload. Webpack 4 bundles the client code. I use a proxy with webpack-dev-server (WDS) to serve my backend express api as well as my client for development.
WDS hot reload change when I update app client code. The express server doesn't restart that way.
I use nodemon to watch the change of the server so that only the backend restarts when I'm coding api features.
For production I simply build the server and client to the dist folder and serve the application with node.
Later I plan to add React router, redux, etc but this is the easy part.
So what I'd like to add now is server side rendering (SSR) for the production mode as I don't need it for development.
Any idea on how I could implement that ?
Thank you
I'll post a further analysis.
Right now I start a webpack-dev-server that allows me to serve and hot reload the client app on localhost:3000
I also launch an express server on localhost:8080 and connect it to the client using the proxy attribute of the devServer
If I modify code on the client app only the hot reload is triggered
If I modify code on the express api only the server api is restarted
From what I understand of SSR and hot reload being put together is that webpack now needs to be compiled in the express server and I add a dev server and a hot reload middleware.
But if I do that each time I modify code of the api nodemon will restart the server and then webpack will compile the client code but I don't need that since I only modified the api.
What I think I need to do is leave things as they are for the development part (because I don't need SSR for dev) but add a production code that will be executed only if NODE_ENV=production, add a template dedicated to serve the html for production with all the renderToString logic
How's that sound ?
Check out Paragons. It has Webpack 4, router, redux, and more all working with SSR. Plus it has both development and production modes.
Does somebody know how to set up propertly websites based on angular (auto generated with yeoman) on ubuntu server?
Here is the thing, I have a project developed in angular, I generated it with yeoman (the basic example, on yeoman codelab). I can run it and see it working on my computer with "grunt serve", but I have no idea how to upload it to my server for access it from the internet.
On my ubuntu, I have installed apache2, MySQL, PHPMyAdmin, and Node (i guess I do not need apache2 for all this, but I have it anyway).
I connect with putty and the command node works fine, npm works fine too.
I am searching info, but I only found how to run a service on the node (example:node test.js) but this is not the case.
But what I want to do is to upload a website (angular) for access it from the internet...
I uploaded the "app" folder (that has the index.html, styles, controllers, views, etc) of my angular website (generated with yeoman), i uploaded it on my www directory in ubuntu, but when I access angular, or styles doesn´t work.
So, the question is: Does NODE have a "www" directory (like in apache2) where I have to upload my websites (angular websites) for access it from the internet? or I have to run it with some kind of "grunt" or "node" command?
Because i can´t run it with "node index.html", and if i access it from the internet it doesn´t work either, so... what am I doing wrong?
If you have a runnable app on local then follow these steps:
Set it up on git and host on github, bitbucket or any other git hosting and connect your server via ssh and choose/make whatever directory. (Doesnt matter which direcory, I personally prefer /var/www )
Pull that repo in that directory.
Run the app using forever or some process management tool like pm2
PS: grunt is more of a developer tool than production tool. so start your app directly using node wahtever_your_server_file_is.js in forever
Also make sure whatever port you are using to run the app is open on your server.
I am new the MEAN stack.
I started this nice journey with an Angular2 template,
http://akveo.com/ng2-admin/
However, I got some questions:
When I am developing the front-end part, I start webpack-dev-server.
Do I need to start webpack-dev-server when the project is in production situation?
If I have a NodeJS API server, do I need to start both "node server" and "npm start" in production situation?
In terms of file structure, how can I combine ng2-admin starter (based on Webpack) and the NodeJS API server in the same project?
These questions make me so much confused.
Thank you and look forward to your great answers.
I've just used Yeoman to create an Angular project that looks great when I run grunt serve. But then I decided to view it by running http-server, and the page gets displayed without the formatting and without the images. Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?
I discovered that I had to run grunt to build the project which fixes the references and places a distribution uglified version of the project in a dist folder. This ran just fine on my other server.
"Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?"
Yes, you will run into this problem on your web hosting server.
grunt-serve serves the app used the setup on your local machine.
http-server mimics how a real web hosting server would evaluate your references.
My development routine is to use grunt-serve until I have a working version and then use http-server to test it out and see if it would work before I push it to my web hosting server. As #cdavid mentioned, running grunt build from your dist directory should be sufficient for general dependency issues.