I wish tho host my HTML5 application on Heroku. But I must choose one of the platforms (Java, Python, Node.js, etc) for my app. How can I run my application under Node.js? I have been able to create and deploy a simple Node.js app in Heroku however I am yet to figure out how can I merge my HTML5 app into this Node.js app.
I hope I make sense.
Tanks
"HTML5 app" is very non-descriptive and generic. If you mean an entirely client-side HTML application with no real backend logic, than that's trivial with node.js on heroku. If you put this in the root of your git repo in a file called server.js:
var app = require('express')();
app.use(express.static('app'));
app.listen(process.env.PORT);
Then put all of your HTML5 app in a directory called 'app' and node will serve it up.
Also in the root of your repo you'll need a Heroku Procfile with the following:
web: node server.js
Finally, you'll also want a package.json in the root of your repo so that Heroku can install your dependencies:
{
"name": "my-app",
"description": "My application",
"version": "0.0.1",
"dependencies": {
"express": "3.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}
you can use ruby as well. rack based app Heroku rack based app
You need to create a config.ru file and put your HTML content into public folder
Here are more details about creating a static site based on rack app. Creating Static Sites in Ruby with Rack
Hope this helps!
Related
I'm trying to deploy a node application with aws via Elastic Beanstalk. The deployment is showing as successful, but when opening the webpage I receive the error message Cannot GET /.
My general project structure looks like this:
client/
server.js
Where client/ is a react application built using create-react-app and server.js is where express app.listen is defined.
I connected the frontend to the backend in the development environment using "proxy": "http://localhost:5000" in the react app's package.json.
I also added "homepage": "my-aws-url.com/client" to the react package.json since it isn't stored at the root level of the project.
Do I need to do something with the proxy in production similar to what was done in the development environment, or are there other things I'm missing?
I am trying to deploy a react app and a node server to my domain http://cv-devlabs.com/ with cPanel but failing to run. Most of the time I'm getting a "server responded with the 404 error".
I have tried methods from "hosting react app and express server cpanel" and "How to deploy a react app on cPanel?" and failed at both. I'm assuming I did something wrong here.
My file structure is:
Root-Folder--
-client
--build
--node_modules
--public
--package.json(client)(content added below)
-.gitignore
-package.json(server)(content added below)
-procfile
-server.js
Package.json (client)
"name": "client",
"homepage": "http://cv-devlabs.com/vidci-vid2/",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000",
Package.json(server)
{
"name": "vidci-vid",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"scripts": {
"start": "PROD=true node server.js",
"postinstall": "cd ./client && yarn"
}
}
This is working fine on Heroku but on cPanel, it's not. The whole project can be found at https://github.com/ConsultVerraton/vidci-vid.git
Thanks to anyone who can help and thanks to anyone who can try. Do let me know if more information is needed.
Thanks
You cannot host a node.js app in most providers working with cpanel. If you want to host a node.js app you should deploy it on a vps. You can follow this tutorial for example:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
But in these cpanel providers, you could host a static react app (for example an app build with create-react-app). This kind of app does not need node.js at runtime. So you can build the assets and push them to your cpanel host.
You can follow this tutorial:
https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6
Yes you can, but it depend if the host provider allow it.
I'm actually running a express server on a cPanel account.
I didn't found the official documentation of cPanel but this is a pretty good one: How to create a Node.js application with cPanel using the Node.js Selector
If your looking to do it in command line, this the official documentation from cPanel :How to Install a Node.js Application.
I don't know about react but for anyone who wants to know how to deploy node js app to Cpanel this is a good source for him, this explains thoroughly how to deploy node js app to cpanel please check this
I am developing a NodeJS app that uses React on the front end. My folder structure is:
root -
- client (React App)
- api (express server)
My git folder is in the root folder for pushing the entire project to GitHub throughout development. But does my repo need to now be initialized in the api folder? Or is there a way to tell Heroku that the application is in the api folder?
Error on Heroku:
Build failed
There was an issue building your app. Please ensure your app is deployable to Heroku and try again.
! No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
! Push failed
Also I feel it's worth mentioning that I set up the auto deploys in the Heroku GUI. So, it is attempting to build. I also have a Proc file and an app.json file.
app.json
{
"name": "Craig Bauer | Portfolio",
"description": "My web portfolio built as a MEAN stacjk app",
"repository": "https://github.com/craigbauerwebdev/Portfolio",
"logo": "",
"keywoeds": ["node", "react", "portfolio"],
"image": "heroku/nodejs"
},
{
"buildpacks": [
{
"url": "https://github.com/heroku/heroku-buildpack-node.js"
}
]
}
Procfile
web: node app.js
Thanks in advance
I found this solution and just wanted to share.
My entire production application is now in the api folder. This command worked well for me.
git subtree push --prefix api heroku master
For future projects I will structure this differently so I won't have to copy the build before each deploy.
I can run the app locally without any issue by yarn start command. here I have provided photographs which represent my problem. I googled and noticed several people faces the same problem. but their context is different.
By default, Now publishes your files as a static directory. You can add a builder to your now.json file to tell Now how to build and deploy your site.
In a case where app.js contains a web server application, your now.json might look like this:
{
"version": 2,
"name": "my-project",
"builds": [
{"src": "app.js", "use": "#now/node"}
]
}
This tells Now to use the #now/node builder to generate a lambda that runs app.js to respond to requests.
If your app is purely js+html to be run on the client machine, you wouldn't need the lambda, but you can still build the source before deploying it as static files with #now/static-build.
Check out the Now docs for more info: https://zeit.co/docs/v2/deployments/basics/#introducing-a-build-step
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.