so Ive finished my first app and I want to deploy it to Heroku, but I keep getting error No default language could be detected for this app. Ive read that you need to have package.json in your root directory. My directory looks like this
AppFolder
client -> package.json + /public + /build folder + /src -> all react components
server -> package.json + app.js(main file) + .env + db.js (database pool) + /routes folder
Is there a way how to keep this file structure and still deploy it succesfully?
Should I commit /build folder to github as well? (Its in .gitignore originally) and its created in /client folder, however in some guide I was trying to follow they moved it to /server folder. Id like to use continious deployment as I still need to test responsivnes + finish some details.
Also Im using MySQL, will I be able to host my database on Heroku as well?
All right Ive figured out how to overcome this issue with folder structure. On Heroku go to Resources -> Add Buildpack -> And you want to add a gitpack from github named subdir-heroku-buildpack, author is
timanovsky
HERE. Ive came around this information in this video: VIDEO.
Or there is a way using git subtree, but for beginners as I am I find the first method more easier.
Also for the front-end part and MySQL Database, both that I successfully deployed using Heroku (Database) and Netlify (React app) Ive used this video: VIDEO2. It shows how to upload your back-end to Heroku as well, but with the traditional heroku-way folder structure.
I am using node 10.16.0 and vue 2.6.11 and I want to have a config.js file in the node root folder, pointing to a folder that is outside the node structure
hello
hi.txt
node-project //node project
server.js
config.js
public //contains build vue
vue-project //contains not build vue
config.js should contain something like
let txtFile= '../hello/hi.txt';
exports.txtFile = txtFile;
I want to be able to keep the config.js file in node, not blended in vue, but have build vue (inside public folder) also able to read it
Ideally I would like to read config.js from vue-project and when I do npm run build , I can also read config.js from public (where I put the builded vue project)
Here is my failed, over-complicated attempt
Since everything you put in the public folder of a vue project it gets passed to the build, and the path changes automatically during build, I did this
hello
hi.txt
node-project //node project
server.js
vue-project //contains not build vue
public
configs
config.js //contains ../../../../hello/hi.txt
src
views
Home.vue //imports configs/config.js
and when I did npm run build the above becomes
hello
hi.txt
node-project //node project
server.js
public //contains build vue
css
js
fonts
configs
config.js
index.html
So the config.js automatically transfered to the build vue, the path to config.js is automatically changed and the config.js is in the node, easily accessible, only one sub-folder away, not blended in the vue js.
The problem is that now config.js changed position, so I have to manually change its content to
let txtFile= '../../hello/hi.txt';
I thought that its alright, small price to pay, its just a single manual change.
But the problem is that Vue does not read the changed value. Its still reads ../../../../hello/hi.txt and not '../../hello/hi.txt . Restarting node does not help. I guess vue caches the value?
Please advice. I hope my example helped you understand what I want to do. Feel free to ask me anything that will help you clarify
Thanks
I tried to create a multi module/package project with npm today.
The structure is as following:
root
|
|____ backend <-- npm package containing all routes
|
|____ frontend <-- npm package containing all js/html/css files
|
|____ dist <-- merged output from backend & frontend
|
|____ build_and_run.sh <-- shell script to invoke npm in both - frontend and backend and run the final application in "dist/"
The frontend should be in the "dist/static" directory.
Both - the frontend and backend are using different dependencies and compiling steps (TypeScript, VueJS etc.), so the differentiation between frontend and backend currently makes the most sense to me.
My problem is the deploying of both modules/packages into the final directory.
Copying the files isn't a problem, but deploying dependencies into the "dist" directory is (e.g. express).
The second goal is to create a Docker file, but this option shouldn't be neccessary for running the server.
If someone has a better structure or solution fitting my needs, I would definitely appreciate to hear it.
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.
This is my folder structure:
root
admin
index.html
bootstrap.css
...
...
app.js
when I'm running
node app.js
using Express 4, routing works correctly but I don't know how to view this file:
http://localhost/admin/index.html
it seems like it searching for this route...
so I tried to render the file to the client and it works but then all its css and script doesn't.
What am I doing wrong?
Please look at:
http://expressjs.com/en/starter/static-files.html
And use:
app.use(express.static('root'));
Express is a framework and provide the template structure, so it's good to put the files of frontend in the folder views, not in static. Static is more used for import libs, js, css.
In you case, put the index.html in the views folder, and the route can be somethink this:
res.sendFile("index.html");
Docs