I am writing a number of VueJS apps that take part in a larger Microservices environment. My current workflow seems long winded but I can't find anything better and would like advice on how I could do it better. Here is my current work flow.
Write VueJS development version (testapp)
Push testapp to git server
npm rum build to get a dist folder
Create a nodejs/express app (testapp_server)
Copy testapp dist folder to the testapp_server html folder
Push testapp_server to git server
On production server clone testapp_server from git
pm2 start app.js --name testapp_server
If I make changes to my VueJS test app in dev, I have to go through this whole process again to get it into production.
I am on a closed secure network, so I don't have the luxury of using Heroku etc.
Is there a better way?
Update: I have just found out about git sparse-checkout which allows the checking out of specific folders from a repo. I am thinking I could include my dist folder in my development git repo and then just check out the dist folder using sparse-checkout directly into a node/express app on my production server.
Related
I'm trying to deploy a nodejs app on jelastic using pm2. Though I understand the classical use would be to have the app in ROOT folder, having ROOT folder containing package.json and ecosystem.config.js file.
Howerver the company I work with is used to have one GIT repo per project, with subdir /api for backend and /web for the frontend.
So my nodejs app is actually in ROOT/web/
Is there anyway to configure things so that it works? I tried changing node variables PROCESS_MANAGER_FILE and ROOT_DIR but it always somehow fail.
Thank you for your help
I am trying to deploy a React app in my Jelastic Node.js server but I am not being able to make it work.
I am using vite for building. To test the deployment, I am building my app on my local environment and deploying the build directory into the Node.js server which works fine sometimes but sometimes it too doesn't work and the site is unreachable. I don't know what causes this.
But I want to make this process automatic and set the root directory to dist directory which is default build directory for vite so that I could pull it from GitHub and run build command and deploy it automatically. I searched for changing the configurations in Jelastic Node.js but couldn't find any relating to this issue.
You can either a) add VCS project into any non ROOT context, and for ROOT create a symlink through WebSSH (but this can cause downtime during deployment) or b) add VCS project into any non ROOT context and add a deployment hook to which copy content from dist into ROOT (and in this case downtime is minimized).
I'm trying to create two applications(NodeJS backend and ReactJS Frontend) using a VPS server with Dokku (mini Heroku) configured.
Basically, that's what i did so far:
Created a folder for the project on my VPS server for my project
Entered inside the folder previously created
Executed the following command:
git clone:<project_url_backend>
Then I entered the backend's folder created by the git clone command and then executed:
dokku apps:create backend-proj
git remote add dokku dokku#<my_ip>:backend-proj
git push dokku master
Everything looks fine until here and when I open the link that dokku created for the backend, it opens fine and I can use the backend correctly.
So I repeated the process for the frontend.
Inside the project's folder, i run:
git clone:<project_url_frontend>
I entered on the subfolder created by git and then run:
dokku apps:create frontend-proj
git remote add dokku dokku#<my_ip>:frontend-proj
git push dokku master
It builds fine, but when I open the created link for the frontend project, it opens the backend, not the frontend.
Ps: I had issues with the react project(frontend), so I had to fix the Procfile, and run the frontend project by a server.js with express.js, serving the react application. I don't know whether this might have some influence on the process but I had to say anyway
The problem was that I needed to put express.js as one of the required dependencies inside the package.json file. Then I recreated the application on Dokku and then it worked fine
I'm trying to create an app in Angular 7, following the tutorial that gives you the default page
ng new my-app
I already reviewed it with ng serve --o and it works, but I have no idea now how to pass it to an environment outside of Angular. I've done
ng --build --aot = true
This has created a folder / dist / my-app and 3 JS files come in: main.js, polyfills.js and runtime.js I opened the index.html but nothing is shown, I expected to see the same thing I was doing in development.
I tried to run them with node, doing for example node main.js but it has not worked, in the 3 options it says
window is not defined
Has anyone already done these deploys to see how it would be in production?
What am I doing wrong....
Apps built with Angular or similar frameworks such as React or VueJs needs to be deployed in a weserver. Simply opening the index.html file in the browser will not work.
Now there are several ways of doing this -
Development
You can use http-server
npm install http-server -g
http-server -p 8080 ./dist
You can visit http://localhost:8080 to view your server
Production
There can be several options for production deployment depending upon a variety of factors such as your cloud provider, web server etc. The following two are an example -
Firebase Hosting
Firebase has a very simple deployment step - do firebase init once and firebase deploy to deploy your newly built webapp.
You can use Nginx running in docker
Dockerfile:
FROM nginx:alpine
COPY config/nginx.conf /etc/nginx/nginx.conf
COPY build/ /var/www
what you must do is mount your dist folder, which is the result of the ng-build you made on any http server.
apache: copies the dist folder in the www/html path of your apache
I have an application using Node.js with Aurelia on the front-end, which I want to deploy on Heroku.
To run the app locally, I need to execute following commands:
1. npm start
2. cd public > gulp watch
After installing heroku-cli, tried publishing it using git push heroku master.
The problem is, Heroku only runs npm start when it's deploying the app on cloud. So it is able to start the server.
However, it doesn't know anything about cd public and gulp watch.
My question is, how can I tell Heroku to change directory to public and execute gulp watch command, once it has started the server?
Edit:
I forgot to address an important point. Since you only mentioned Aurelia in your question, I (wrongly) assumed that that's all you had.
Ultimately, for a production app you'll want to have a proper webserver hosting your Aurelia app.
Example:
For Aurelia apps I've built, I typically have 3 distinct processes running, each with their own port (or hostname):
IdentityServer
ASP.NET Web Api
OWIN FileServer
The third one is what hosts my Aurelia app as a static bundle.
There is no gulp or anything like that involved here. The server doesn't even have npm installed and sees it just like any other server-side application. And that's exactly how I deploy it; no node-related commands needed.
If you're using nodejs for your server-side stuff, use http-server to serve the static bundle.
When you host your aurelia app within your own serverside application you get the added benefit of being able to send some bootstrapping configuration directly along with the bundle, so you don't have to hard-code urls and such.
That's what I implied with "don't host a static site on heroku": bundle it up, and let your web application host it. My original answer would only apply if there is no server-side stuff involved.
Original answer:
It's generally not recommended to host static sites on heroku, see this blog post. The bottom line is that Aurelia sites are static, and a static site doesn't need an app server. It's unnecessarily expensive and doesn't have as good distribution as most CDNs do.
With that said, if you insist on hosting a static Aurelia site on Heroku then your best bet is to combine all your script calls into a single call which, as you say, already runs. So make your npm start script call gulp watch.
You'd probably want to npm install your dependencies and call ../node_modules/.bin/gulp watch instead of calling gulp globally.
When it comes to Heroku however, gulp watch in itself probably won't work because that will start a development server which will have no port binding in Heroku. It will run, but it won't be accessible from the outside.
gulp watch is not something you want to run on a server anyway because it will watch for file changes (which never happen there) and run things like browsersync which will be useless. Just bundle your app and start a normal http-server or better yet, upload the bundle ready-to-start into the correct folder and you're done.
You want to build your app and then deploy as if it were a fully-compiled, static application. With Aurelia CLI, that would be au build --env prod and then copy the scripts folder, index.html, and any dependencies like css, fonts, etc. to a separate folder. gulp build works the same way.
From there, you will publish the compiled app to Heroku as shown in this medium.com article:
https://medium.com/#winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b
The main part of the article is below, but here is the kicker - you are "tricking" heroku into thinking it is a PHP app. Serious!
Head to root directory of the repo that contains index.html which dictates the main HTML page.
Run touch composer.json to create a file called composer.json.
Add the following line: {} inside.
Run touch index.php to create a file called index.php.
Add the line: <?php include_once("index.html"); ?> inside.
Now update the repo on Github if it’s connected to your account or Heroku command git push heroku master . Wait for the automatic deploy to work its magic and tada!
There are some other steps to make your compiled app into a repo (ie, git init) but this should work for you. It did for me.