When I deploy my Nextjs app I get a buid err. Vercel doesn`t see nested pages. How can I override it, maybe it is posible in vercel.json?
Building logs
Project structure
I tried this, but it`s breaks everything
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
Could you try moving your components outside pages folder as Next.js has a file-system based router built on the concept of pages.
Hope you should be using export default instead of export inside index.tsx for exporting your component.
Related
I'm new to the web developing stuff and currently watching on udemy a 70h course.
I like to practice new learned stuff in real world applications. Therefore I've setted up an httpd container (https://hub.docker.com/_/httpd) with a bootstrap template in it (https://startbootstrap.com/theme/sb-admin-2)
My question: how do I add new node.js modules to this template? I want to add a module to connect the website to my postgres database.
The volume I made for the httpd container is as follows: /usr/local/apache2/sb/src/:/usr/local/apache2/htdocs/
In this directory I have installed the postgres module via npm and wrote a simple javascript code in index.js. If I call index.js via node index.js from the terminal it works fine. If I try to call it from the website it doesnt work. I know I missed something important to get this module work but I can't figure it out.
Edit
It was a really simple example of using extern modules in node.js shown in udemy. I've tried to use this example in my website.
index.js
var superhero = require('superheroes');
var hero = superhero.random();
function testCall(){
// alert("just a test!");
alert(hero);
}
In index.html I call the "testCall" function as follows
<body id="page-top" onload="testCall()">
This part works well, If I put a simple string as alert, for instance "alert("just a test!");"
I want to build a dashboard to display some values stored in postgres
[I am receiving the all files in console but showing in the frontend and automatically refresh showing the whitescreen][1]
Package.json fileQ5XvT.png
To resolve white/blank screen deployment of react app in Azure, try either of the following ways:
In package.json add "homepage": "."
Make sure to publish from build folder instead of public folder
In your index.html, make sure to check to specify correct JavaScript bundle.
References: How to fix the Blank screen After a Static Deployment with create-react-app and I have deployed a azure-webapp and the page displays blank
You can see this other post: Blank page after running build on create-react-app
If you're using react-router and trying to open index.html directly in the browser (or using electron, which essentially does that), in addition to setting homepage as others have suggested, replace your BrowserRouter with a HashRouter.
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
In my nwjs application i am using React to build my UI. Currently, React is being loaded via a <script> tag in the main file, index.html. index.html has another <script> tag which loads main.js containing code which defines and renders my React components as well as requiring (require()) a few Node modules such as "fs" and "McFly".
This all seems to be working, however when i try using another node module (react-inlinesvg) i get an error, "document is undefined".
Having looked online for help, i have come to the conclusion that React now believes that it is being run on the server? Which is odd, as before i started using the react-inlinesvg module it was happily rendering components using React.render (clientside rendering).
If you need any more context or information then please ask.
It could be that you are rendering on the server side, or also that you are rendering both sides. In the second case you could simple nest the line that is causing you error with:
if (process.env.BROWSER) {
the line causing the error
}
If the error disappears, it means that you are on the server side also!
I hope this helps...
Basically if you code is universal (or isomorphic, if you want...) with this check you can execute the code only on client side, you want to do this to use a particular style-sheet for example:
if (process.env.BROWSER) {
require("../style/main.scss");
}
Naturally if you want to do stuff server-side you can check
if (!process.env.BROWSER) {
}
if any one face this he can solve it in 2 ways:
Solution 1: if you are using nw.js 15 or above try to enable mix context mode:
in your package.json add this flag:
"chromium-args": "--mixed-context"
Solution 2: expose document to the global object using this hack:
global.document = window.document;
We have developed an application using Extjs 4.2 following MVC pattern. We have project folder setup as follwing:
WebContent
--> app
-->controller
-->model
-->store
-->view
app.html
app.js
In app.js we have defined all models, controllers, stores under Ext.application. Like:
Ext.application({
name: 'MyProject',
autoCreateViewport: true,
models: [
'Model1',
'Model2'
],
stores: [
'store1',
'store2'
]
(views and controllers similarly)
This all works good for us. Now we need to concatenate all these models, stores, controllers, views into one app-all.js and use it in our app.html. I have read many posts on net on how to do that with Sencha cmd tool, but none of them was application to me as we have a restriction to install cmd tool and we need to generate concatenated and minified file on build time with Maven.
I found out a solution that by using JSBuilder2, I can get a concatenated + minified app.js.
Problem is now when I use this minified file, all individual js files are still being downloaded. As if I delete individual js files, I get 404 error and application fails to load.
I suppose that is because of way we have defined models, views, controllers in our app.js; they are still looking for js class files in respective folders.
Please share if you have any solution to this.
You can disable the dynamic loader using the enabled property of Ext.Loader (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Loader-cfg-enabled):
Ext.Loader.setConfig({ enabled: false })
You must place this code after including the framework files, but before your application files.
This should prevent Ext JS from trying to download files. You need to make sure all framework and application classes that you use are included on the page.