I tried many times by run the command npm run build,
It gives me .nuxt folder and
when I run the command npm run generate I got a folder named dist
Please let me know how and what to do, to upload web application on Cpanel file manager?
if you're using ssr you should use npm run build or better build your app first on local, then upload the entire file include node_modules but .env file or only .nuxt, node_modules, nuxt.config.js, package.json. then make a new "app.js" file on your app root folder with:
const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const port = process.env.port || 3000;
async function start() {
let config = require('./nuxt.config.js');
//process.env.DEBUG = 'nuxt:*';
const nuxt = new Nuxt(config);
const builder = new Builder(nuxt);
await builder.build().catch(error => {
console.error(error);
process.exit(1);
});
app.use(nuxt.render);
app.listen(port);
};
start();
then fill your nodejs app like so:
app root: your app root folder
app url: your app url
app startup file: app.js
note: you don't need to run the "npm run install". just open your url.
Related
I would like to run app.js & gulp watch in a single command, however when I run npm run watch, the terminal stop on listen to port 3000, my gulp watch are not executed.
Below are my files:
packaga.json
"scripts": {
"watch": "node app.js & gulp watch"
}
app.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/build'));
app.listen(3000);
console.log('listen to port 3000');
gulpfile.js
gulp.task('watch', function(){
gulp.watch('./src/*.scss', gulp.series(['styles', 'css']));
})
"node app.js && gulp watch":
This runs the express server, then the gulp command. As long as your server is running the gulp won't be executed I guess.
Maybe take a look at this page:
Starting an express server from within gulp
Hi I am receiving the error that the project root is invalid. I will also add that I am using expo alongside my project.
This happens when executing the command npx expo export:web
Also happens when executing the command npx expo build
webpack.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
metro.config.js
(Not sure if metro is relevant as I believe it is more for development purposes...)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
react-native.config.js
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
web: {},
},
assets: ["./assets/fonts"], // stays the same
};
npm start works fine and everything works accordingly in the browser. The goal is to build this for production and begin hosting on a web server.
I am hoping that I am simply missing a location to a directory in a config file but any insight is appreciated.
First, just run it with expo start, after it started press w.
Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe
<Home /home/user/mainprojects/index.html> <-- Home app
<Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
<Bed /iframe>
</Home>
with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)
here is nginx setup for that
location / {
alias /home/user/mainprojects/dist/;
index index.html;
}
location /Bed {
alias /home/user/plugins/bed/dist/;
index index.html index.htm;
}
Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.
here is how my vue.config.js will look like
module.exports = {
devServer:{
proxy:{
'^/appReplacer':{
target: 'http://100.148.1.9:9003/',
changeOrigin:true,
logLevel:'debug',
pathRewrite: {'^/appReplacer':'/'}
}
}
}
}
Still looking for a solution..
Please help me thanks in advance !!
Assuming you are using Vue CLI v4 which is based on Webpack 4
Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option
This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)
Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"
// vue.config.js
// express should be installed as it is used by webpack-dev-server
const express = require('express');
module.exports = {
//...
devServer: {
before: function(app, server, compiler) {
app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
}
}
};
I am running React Native Storybook which runs Storybook in the Native emulator.
In addition to the how React Native Storybook works currently, I would also like to build an instance of it for web as a reference companion to our app.
I am using "#storybook/react-native": "5.3.14". My stories are located at ./storybook.
Install react-native-web, #storybook/react and babel-plugin-react-native-web from npm in your project root.
Add a new configuration directory for Storybook, say ./.storybook-website. Inside this directory, add main.js. This creation would otherwise be done by the Storybook installation wizard.
my-app
├── .storybook-website
│ └── main.js
└── // .... rest of your app
Add the following content to main.js:
module.exports = {
stories: ['../storybook/stories/index.js'],
webpackFinal: async (config) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
'react-native$': 'react-native-web',
// make sure we're rendering output using **web** Storybook not react-native
'#storybook/react-native': '#storybook/react',
// plugin-level react-native-web extensions
'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
// ...
};
// mutate babel-loader
config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
// console.dir(config, { depth: null });
return config;
},
};
Update the stories path in main.js to the location of your existing root story.
Finally add run scripts to your package.json:
"storybook:web": "start-storybook -p 6006 --config-dir ./.storybook-website",
"storybook-build:web": "build-storybook --config-dir ./.storybook-website --output-dir dist-storybook-website --quiet"
Presto! Run using yarn storybook:web. This will run storybook dev server, opening a browser showing what you usually would see in the device emulator.
I'm trying to add passport authentication to my Angular2 app. I initialize that with Angular-CLI and Express-Generator npm package.
Within my I created a server folder to include the express project generated by the express-generator.
Then I redirect the Express static middleware to the dist folder within my Angular2 root (generated by the ng build command).
I added the new build script as following:
"build": "ng build && DEBUG=server:* node ./bin/www"
But my question is related with Passport because it renders views using express, how can I do to integrate with Angular2 components?
I also add the next lines to my app.js file:
//Render the index within the dist path of Angular2
app.use(express.static(path.join(__dirname, '../dist/')));
// Catch all other routes using default index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
One example of those routes is:
app.get('/login', function(req, res) {
res.render('login', { message: req.flash('loginMessage') });
});
How could I do to render this login through the Angular 2 components?