I have created an endpoint with Nuxt 3 Server to send emails.
The email sending part is working great.
The styling of the email templates is done with Pug but I am having a hard time to get the path to the pug templates.
I suspect the issue is that the pug files are not being included in the build process.
When deployed to netlify which runs yarn build I get
"ENOENT: no such file or directory, open '~/views/email/welcome.pug'"
async send(template, subject) {
// 1) Render HTML based on a pug template
const html = pug.renderFile(
`~/views/email/${template}.pug`,
{
firstName: this.firstName,
url: this.url,
data: this.data,
subject
}
);
}
My project structure looks like this.
What would be the best way to handle this?
Since you want to send emails, you will a Node.js server somewhere. You could use Heroku and push your code there, then use yarn build && yarn start there.
Should fix your issue.
PS: yarn generate is for SSG, Netlify can handle those apps for free but it will not come with all the server capabilities.
Related
I'm using Express and Pug inside an Electron application. Everything works fine, but when I try to build for production it ends up in a blank/white screen.
I've tried the following:
if (isDevelopment) {
mainWindow.loadURL("http://localhost:3000");
} else {
mainWindow.loadFile("a static file");
}
But since I'm using Pug and Express it never creates a static file I can serve in production. The first screen in the app is a login page, which is set by the server.js and is a combination of multiple template files made on the fly by Express.
Here is my file structure, to illustrate:
Any idea how I can set up Electron so it acts like it does in development with localhost?
I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my 'public' root app and another admin.css for my 'private' (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.
I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don't know what.
One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?
Steps I did:
npm install aurelia-useable-style-loader
then use the plugin in main.ts:
aurelia.use.plugin('aurelia-useable-style-loader');
then added one reference in my aurelia.json:
"aurelia-useable-style-loader",
Tha's all. At runtime, no particular errors, but css are not loaded/unloaded.
Any help is greatly appreciated.
PS: as a workaround, I proceed differently (see below) but I'm curious to do it with the plugin aurelia-useable-style-loader
this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
.then((data) => data.text())
.then((styles) => {
DOM.injectStyles(styles, null, null, 'masterStylesheet');
this.masterStyleSheetLoaded = true;
});
I got a react-native app already ready and works but the app points on a prod api so to avoid problems I wanted that she points on a rest api, so how can I reconfigure it, I have only an environment file.js that contains the URL api, and this file is called in the API service
I tried react-native config but didn't know how to make it work,
All I want is to duplicate that env file because he contains all necessary URLs, so I want to have file named envProd and another named envStaging they should be similar the only different part is the URL of my api , so when I want to run the app i precise which file I want to choose to run with
If the API URL's are the only difference, you don't need to create two separate config files. Instead, you can make use of the inbuild __DEV__ global variable in JavaScript to determine if you're using React Native packager (dev mode) or not (production).
Ref: https://facebook.github.io/react-native/docs/javascript-environment.html
So, something like below.
var apiURL = __DEV__ == true ? 'development.api.com' : 'prod.api.com';
I am finding switching environments quite hard to manage.
__DEV__ is awesome for local disabling stuff when in development. Won't work for any of the builds though.
For staging vs production seems that configuring react-native-config is the best. Unfortunately, next to being somewhat hard to configure binaries need to get recompiled separately for each environment. This means - one update - two build with uploads to whatever provider you use. It can get more complex if you use something like codepush too.
possible solution
Create a hidden feature in your app that allows to toggle the environment from the within the app. This way you can have one build, give it to testers. They switch env to staging and later you only need to promote it as a production build.
This could be something like tap 10 times on an empty space somewhere - the more creative you get the better :)
Good luck
const _Environments = {
production: {
API_BASE: 'https://api.test.com/',
USERNAME: 'admin',
PASSWORD: '1234',
},
development: {
API_BASE: 'https://dev.api.test.com/',
USERNAME: 'admin',
PASSWORD: '1234',
},
};
function getEnvironment() {
// Insert logic here to get the current platform (e.g. staging, production, etc)
var platform = __DEV__ ? 'development' : 'production';
// ...now return the correct environment
return _Environments[platform];
}
export const Environment = getEnvironment();
Try this. using yargs you can replace static import content with dynamic scripts.
I recently updated from Angular 7 to Angular 8 using ng update. After following the expected migration path with no issues I built and deployed. Everything worked great until I started checking other browser versions and realized some were getting 401 unauthorized from the server in requesting the js files.
The issue is, the differential loading is done like this:
<script src="main-es2015.1234.js" type="module"></script>
It seems that some browsers, some of the time, don't want to pass auth info for <script type="module" .... It strikes me that there are several ways to work around this:
I can work around this by adding crossorigin="use-credentials" to the script tag but I haven't been able to find how to do that in ng build.
I can tweak the auth settings to somehow allow anonymous requests through to my JS files but I haven't been able to find the dotnet core method of doing this without a lot of complexity. Right now the entire app only allows windows auth. If I allow anonymous I don't want to have to worry somehow that I've left a controller open.
I'm thinking the former option is the cleaner solution but I'm open to alternatives.
Since the posting of the accepted answer the option to handle this in the first way McAden suggests by adding crossorigin="use-credentials" has been added to the Angular CLI options.
Original feature request
Angular CLI documentation
In your angular.json add
{
...,
"build": {
"builder": ...,
"options": {
...
"crossOrigin": "use-credentials"
}
}
}
I modified angular.json and used an explicit deployUrl under projects -> main -> architect -> build -> options:
"deployUrl": "/ClientApp/dist/",
That alters the script tags:
<script src="/ClientApp/dist/main-es2015.1234.js" type="module">
So it no longer goes through the dotnet core application to pull the js file. Then in IIS I set that folder to allow anonymous.
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.